JS实现时钟功能
程序员文章站
2022-03-09 09:04:54
...
时钟功能
功能描述
以前前段的JS代码有的是扒的，现在觉得也是人才啊，笑哭。今天简简单单用原生js写个时钟功能吧。
涉及知识
- 闭包
- 计时器setInterval(code,millisec[,”lang”])
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>自制时钟</title>
</head>
<body>
<p id="demo">0</p>
<script>
var add = (function () {
var sec = 56,min=0,h=0;
return function () {
if(sec==59){
sec=-1;
min+=1;
}
sec+=1;
if(min==59){
min=-1;
h+=1;
}
if(h==23){
h=-1;
}
var obj={
"second":sec,
"minute":min,
"hour":h
};
return obj;}
})();
var plus =(function(){
let cnt="hello world!",name="simon";
return function(){ return cnt+=name;}
})();
function myFunction(){
var obj=add();
sec=obj.second;
min=obj.minute;
h=obj.hour;
if(sec<10){
p="0"+sec.toString();
}
else{
p=sec.toString();
}
if(min<10){
q="0"+min.toString();
}
else{
q=min.toString();
}
if(h<10){
r="0"+h.toString();
}
else{
r=h.toString();
}
document.getElementById("demo").innerHTML = "当前时间:<span style='color:red'>"+r+":</span><span style='color:green'>"+q+":</span><span style='color:blue'>"+p+"</span>";
}
setInterval(myFunction,1000)
</script>
</body>
</html>
实现效果
在GIS的沙场，轻舞飞扬。