Question

js

js起初它会起作用但是在测试时我离开了提示未定义的各种时间但是时间仍然出现但是经过几次离开提示空白后领带显示未定义基本上在获得问候中只会来吧你是未定义的HTML，这很奇怪，因为它已经有效了

window.onload = function () {
    document.getElementById("time").innerHTML = getGreeting();
    document.getElementById("welc").innerHTML = open();

};

var count = setInterval(function () {
    getGreeting()
}, 1000);

function getGreeting() {
    var dateNow = new Date();
    var time = dateNow.toTimeString();
    var hours = time.substring(0, 2);
    var today = dateNow.toDateString();
    var now = dateNow.toLocaleTimeString();
    var clock = document.getElementById("time");
    //var numhours = hours.parseInt();
    if (hours >= 12 && hours < 18) {
        return
        clock.textContent = "Good Afternoon, Welcome Time:" + today + " " + now;
        clock.innerText = "Good Afternoon, Welcome Time:" + today + " " + now;
    } else if (hours >= 18 && hours <= 23) {
        return
        clock.textContent = "Good Evening, Welcome Time : " + today + " " + now;
        clock.innerText = "Good Evening, Welcome Time : " + today + " " + now;
    } else if (hours >= 0 && hours < 12) {
        return
        clock.textContent = "Good Morning, Welcome Time:" + today + " " + now;
        clock.innerText = "Good Morning, Welcome Time:" + today + " " + now;
    }

}

function open() {
    var name = prompt("Hello User. What is your name?");
    if (name === '') {
        return "Hello User";
    } else if (name) {
        return "Hello " + name + "!";
    }
}

HTML 所有这里都是一个菜单，包含子菜单和网页的基本轮廓我不认为HTML会出问题

<DOCTYPE! html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="final.css">
<script type ="text/javascript"  src="final.js"></script>
<title>Final HTML/CSS Project-History of Major Tech Companies</title>
</head>
<body>
<div id="header">
<h1>Home<h1>
</div>
<div id="nav">
<nav>
<ul>
    <li><a href="#">ppgphb</a>
        <ul>
            <li><a href="#">ppgphb</a>
                <ul>
                    <li><a href="#">ppgphb</a></li>
                    <li><a href="#">myymmy</a></li>
                    <li><a href="#">ymymmy</a></li>
                    <li><a href="#">ymmyym</a></li>
                    <li><a href="#">ymmy</a></li>
                    <li><a href="#">mymyym</a></li>
                </ul>
            </li>

            <li><a href="#">myymmy</a></li>
            <li><a href="#">ymymmy</a></li>
            <li><a href="#">ymmyym</a></li>
            <li><a href="#" >ymmy</a></li>
            <li><a href="#">mymyym</a></li>
        </ul>
    </li>

    <li><a href="#" >myymmy</a></li>
    <li><a href="#">ymymmy</a></li>
    <li><a href="#">ymmyym</a></li>
    <li><a href="#">ymmy</a></li>
    <li><a href="#">mymyym</a></li>
</ul>
</nav>
</div>
<div id="content">
</div>
<div id ="footer"> <p id = "welc"></p><p id = "time"></p></div>
</body>


</html>

css这里是css它与这个问题无关，但我只是添加了

     body{
background-color:#DED4FF;
 }
 nav{
 margin-right:25px;
  }
 nav ul{

list-style-type:none;
position:relative;
display:inline;
 }
 nav ul li{

 position:relative;
 border:1px ouset #3B315C;
 color:#DED4FF;
 -color:#52447F;
 text-align:center;
 margin:5px;
 width:125px;
 padding:5px;
 margin-bottom:25px;
 box-shadow:0 1px 7px #CAC1E8;
 }
 nav li:visited{

 }
 nav ul ul{
 border:1px solid black;
 margin-bottom:15px;
 margin-left:1px;
 position:absolute;
 transition:display 8s;
 transition:display 8s;
 display:none;
 }
 nav ul li a{ 
 color:#DED4FF;
 text-decoration:none;
 display:block;
 }
 nav ul ul li a{
  transition:8s;
 }
}
nav ul ul li{
border:1px ouset #715FB5;
background-color:#A388FF;
margin:0px;
margin-left:90px;
box-shadow:0 1px 7px #413D63;
}
nav ul ul li a{
color:#6F6A7F;
}
nav ul ul ul li {

box-shadow:0 1px 7px ;
border:1px ouset #52447F;
background-color:#826DCC;
}
nav ul ul ul li a{
color:#52447F;
}
nav ul ul ul{
margin-right:18px;
float:none;
position:absolute;
transition:display 8s;
}
nav ul:after{
content:"";
clear:both;
display:block;
}
nav ul li:hover>ul{
display:block;
}
#header,#nav,#footer,#content{
height:100px;
}
#nav{
 border-right:1px solid black;
 text-align:center;
 width:145px;
 height:500px;
 float:left;
 }
 #content{
  float:right;
  }
  #footer{
   border-top:1px solid black;
    clear:both;
     }
    #header{
     border-bottom:1px solid black;
    border-top:1px solid black;
    }

Answer 1

在代码所在的状态下，除非您最近添加了返回，否则它无法工作。 if语句中的返回值使代码短路。

if (hours >= 12 && hours < 18) {
    return  <-- anything after return will not run...

因为你没有返回任何东西，它将返回undefined，而不是推入innerHTML。你应该返回文本。

if (hours >= 12 && hours < 18) {
    return "Good Afternoon, Welcome Time:" + today + " " + now;
}

Answer 2

时钟根本不起作用。在：

if (hours >= 12 && hours < 18) {
    return
    clock.textContent = "Good Afternoon, Welcome Time:" + today + " " + now;
    clock.innerText = "Good Afternoon, Welcome Time:" + today + " " + now;

自动分号插入将在return之后插入一个分号，因此该函数返回 undefined 并且不执行以下两个语句。你应该有类似的东西：

var clockString;
...
if (hours >= 12 && hours < 18) {
   clockString =  "Good Afternoon, Welcome Time:" + today + " " + now;
} else if (...) {
   ...
}

if (typeof clock.textContent == 'string') {
  clock.textContent = clockString;
} else if (typeof clock.innerText == 'string') {
  clock.innerText = clockString;
} else {
  clock.innerHTML == clockString
}

我一直在尝试用javascript创建一个时钟，但有时它显示为未定义

2 个答案: