javascript - 我一直在尝试用 javascript 制作一个时钟,但有时它显示为未定义

标签 javascript html css clock

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;
    }

最佳答案

那么在代码所处的状态下,除非您最近添加了返回,否则它不可能工作。 if 语句中的 return 使代码短路。

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;
}

关于javascript - 我一直在尝试用 javascript 制作一个时钟,但有时它显示为未定义,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21271800/

相关文章:

javascript - 将文本区域值保存到 JSON

javascript - Mongoose - 获取嵌套数组/动态生成的 $and 子句中 id 的所有元素

html - MathML <mo> 标签包装小数点

html - 我不能改变这些元素的位置

html - Twitter Bootstrap 轮播导航显示

JavaScript 图像对象

javascript - 使用 d3.js 绘制等值线 map

javascript - 刷新过滤器文本 Bootstrap 4

css - HTML5 视频在播放前闪烁白色?

html - css - 显示背景全高并覆盖里面的内容