Javascript 如何使用运行时函数更新时钟？
我正在做一个小型的数字时钟项目，该项目应该是通过使用电源按钮来模拟真实的时钟，打开时钟并显示当前时间，同时关闭时钟电源并将显示渲染为空。这是该项目应该做的，但现在它正在这样做。第一次单击按钮时，它会将当前时间作为内部文本呈现到显示中，但不会使用我正在使用的setInterval函数进行更新。只有控制台会在更新时打印当前时间。我能得到一些代码方面的帮助吗？我有一些关于该项目的笔记，如果有不清楚的地方，请询问，谢谢。我想知道为什么当我想关机时，时钟没有关闭，为什么我的时间没有像我想要的那样在显示屏上更新。下面我有一些代码来说明我试图写的东西Javascript 如何使用运行时函数更新时钟？,javascript,html,algorithm,web-applications,Javascript,Html,Algorithm,Web Applications,我正在做一个小型的数字时钟项目，该项目应该是通过使用电源按钮来模拟真实的时钟，打开时钟并显示当前时间，同时关闭时钟电源并将显示渲染为空。这是该项目应该做的，但现在它正在这样做。第一次单击按钮时，它会将当前时间作为内部文本呈现到显示中，但不会使用我正在使用的setInterval函数进行更新。只有控制台会在更新时打印当前时间。我能得到一些代码方面的帮助吗？我有一些关于该项目的笔记，如果有不清楚的地方，请询问，谢谢。我想知道为什么当我想关机时，时钟没有关闭，为什么我的时间没有像我想要的那样在显示屏上
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#digital-clock {
border: 2px solid black;
height: 200px;
position: relative;
width: 400px;
}
#display {
border : 2px solid black;
border-radius: 9px;
font-size: 40px;
height: 55px;
line-height: 55px;
position: absolute;
top: 10px;
left: 15px;
text-align: center;
width: 250px;
}
#button {
border: 2px solid black;
border-radius: 50%;
font-size: 16px;
height: 55px;
line-height: 55px;
position: absolute;
top: 10px;
left: 305px;
text-align: center;
width: 55px;
}
</style>
</head>
<body>
<div id="display"></div>
<div id="button">OFF</div>
</body>
<script language="javascript" type"text/javascript" src="digtalclock.js"></script>
</html>
var c_d = document.getElementById("display");
var btn = document.getElementById("button");
console.log(btn)
console.log(c_d);
function setTime() {
var d = new Date();//current date and time.
var h = d.getHours();//the current hours.
var m = d.getMinutes();//the current minutes.
var s = d.getSeconds();//the current seconds.
var ct = `${h}:${m}:${s}`; // a var called ct short for clocktime which does the same as h +":"+ m +":"+s
console.log(ct);//ct logs current time and updates occordingly when page is refreshed.
runTime(ct);// callBack for runTime with ct as parament value.
}
function runTime(x) {
var t = x;//var ct passed in as parameter from setTime function and stored as data into variable t in runTime().
console.log(t);//t is still console logging ct the variable data.
var n = 0;//used for tracking clicks
console.log(n);
btn.addEventListener("click",function(e) {//click toggle function.
n += 1;// increments by 1 everytiime click executes.
var c = setInterval(setTime,1000);//a setInterval statement which is supposed make time tick but only on the console. not on display like i want to.
console.log(n);
const s = ["ON ","OFF"," ",];
//*************NOTES REGARDING THE IF STATEMENT*****************
//**************************************************************
/*odd and even numbers are used to keep track of the click event.
the if statement is used to detect even numbers. Inside the body
i used the constant string variable s which has 3 strings indexed
and combine that with click button event to create a toggle effect
indicating when the power is on the else statement is read because
when you click the button the first number to appear is odd, and
since n increments by one the following number is 2 and even. So the
if statements states if n is even when you click the button the text
inside is changed by grabbing one of the 3 indexed items of const s array.
the power button excutes as off and the dispay is supposed to go blank
by using an empty string that is indexed inside the cost s variable. */
if(n % 2 === 0) {
console.log("Even Num");
btn.innerHTML = s[1];
c_d.innerHTML = s[2];
c = clearInterval(c);
}
//**************NOTES REGARDING THE ELSE STATEMENT*******************
/*The purpose of the else statment is. Since we are treating the project
as if it were a real life clock with on and off power buttons. when n and btn
interact for the first time it console.logs 1 meaning our first odd number is
created. and n is incremented by one. since n starts with a value of 0. its logical to
say that if you click the button 1 is added to n everytime. furthermore, i use n to keep
track of the clicks . Since were powering on the clock the inner text of the
button will use cost s variale and and the first indexed item to idicate the power
is on. for the clock display or the section where you see time apear at i used the
c_d var name short for clock_display and passed it a method of innerHTML = to t because
i thought i finally invoked the set interval function but time is not updating. it
is only displaying current time at the point of click as innerHTML. while it updates on the console.
nothing updates on the display.*/
else{
console.log("odd num");
btn.innerHTML = s[0];
c_d.innerHTML = t;
}
});
}
setTime();
文件
#数字钟{
边框：2件纯黑；
高度：200px；
位置：相对位置；
宽度：400px；
}
#展示{
边框：2件纯黑；
边界半径：9px；
字体大小：40px；
高度：55px；
线高：55px；
位置：绝对位置；
顶部：10px；
左：15px；
文本对齐：居中；
宽度：250px；
}
#钮扣{
边框：2件纯黑；
边界半径：50%；
字体大小：16px；
高度：55px；
线高：55px；
位置：绝对位置；
顶部：10px；
左：305px；
文本对齐：居中；
宽度：55px；
}
关
var c_d=document.getElementById（“显示”）；
var btn=document.getElementById（“按钮”）；
控制台日志（btn）
控制台日志（c_d）；
函数setTime（）{
var d=new Date（）；//当前日期和时间。
var h=d.getHours（）；//当前小时数。
var m=d.getMinutes（）；//当前分钟数。
var s=d.getSeconds（）；//当前秒数。
var ct=`${h}:${m}:${s}`；//一个称为ct的变量，表示时钟时间，与h+“：“+m+”：“+s”的作用相同
console.log（ct）；//ct记录当前时间，并在刷新页面时不时更新。
运行时（ct）；//使用ct作为参数值的运行时回调。
}
函数运行时（x）{
var t=x；//var ct作为参数从setTime函数传入，并作为数据存储在runTime（）中的变量t中。
console.log（t）；//t仍然是控制台记录变量数据。
var n=0；//用于跟踪单击
控制台日志（n）；
btn.addEventListener（“单击”，函数（e）{//单击切换函数。
n+=1；//每次执行单击时递增1。
var c=setInterval（setTime，1000）；//一个setInterval语句，它应该使时间滴答作响，但只在控制台上显示，而不是像我想的那样显示。
控制台日志（n）；
常数s=[“开”、“关”、“开”、“关]；
//*************关于IF语句的注释*****************
//**************************************************************
/*奇数和偶数用于跟踪单击事件。
if语句用于检测身体内部的偶数
我使用了常数字符串变量s，它有3个索引字符串
并将其与单击按钮事件相结合，以创建切换效果
指示何时打开电源，读取else语句是因为
单击按钮时，第一个显示的数字为奇数，并且
因为n增加1，下面的数字是2，甚至是偶数
if语句说明当您单击按钮时，n是否为偶数
通过抓取常量数组的3个索引项中的一个来更改内部。
电源按钮显示为关闭，显示为空白
通过使用在cost s变量内建立索引的空字符串*/
如果（n%2==0）{
console.log（“偶数”）；
btn.innerHTML=s[1]；
c_d.innerHTML=s[2]；
c=清除间隔（c）；
}
//**************关于ELSE语句的注释*******************
/*因为我们正在处理这个项目
就像是一个真实的时钟，有开和关的电源按钮
第一次交互it console.logs 1表示我们的第一个奇数是
已创建。n将递增1。因为n以值0开头。其逻辑值为
如果你每次点击按钮，1就会被添加到n中。此外，我用n来保持
点击的轨迹。因为我们打开了时钟的内部文本
按钮将使用成本变量和第一个索引项来标识电源
是开启的。对于时钟显示或您看到时间的部分，我使用了
c_d var name是clock_display的缩写，并将innerHTML=方法传递给t，因为
我以为我最终调用了set interval函数，但时间没有更新。它
仅将单击点处的当前时间显示为innerHTML。同时在控制台上进行更新。
显示屏上没有任何更新*/
否则{
console.log（“奇数”）；
btn.innerHTML=s[0]；
c_d.innerHTML=t；
}
});
}
设置时间（）；
测验
时间00:00:00
断电
通电
var btn=document.getElementById（“btn”）；
var on=document.getElementById（“on”）；
var timestamp=新日期（）；
var区间=1；
var标志=0；
var mytimer=setInterval（函数（）{
时间戳=新日期（timestamp.getTime（）+间隔*1000）；
btn.addEventListener（“点击”，函数（e）{
标志=1
})
在.addEventListener上（“单击”，函数（e）{
标志=0
})
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>test</title>
</head>
<body>
<div>Time <span id="time">00:00:00</span> </div>
<div><button id="btn">Power off</button></div>
<div><button id="on">Power On</button></div>
<script>
var btn = document.getElementById("btn");
var on = document.getElementById("on");
var timestamp = new Date();
var interval = 1;
var flag = 0;
var mytimer = setInterval(function () {
timestamp = new Date(timestamp.getTime() + interval * 1000);
btn.addEventListener("click",function(e) {
flag = 1
})
on.addEventListener("click",function(e) {
flag = 0
})
if(flag == 0)
document.getElementById('time').innerHTML = timestamp.getHours() + 'h:' + timestamp.getMinutes() + 'm:' + timestamp.getSeconds() + 's';
else
document.getElementById('time').innerHTML = '0h: 0m: 0s';
}, Math.abs(interval) * 1000);
</script>
</body>
</html>