JS实现时钟功能

最新推荐文章于 2022-05-09 13:55:34 发布

原创最新推荐文章于 2022-05-09 13:55:34 发布 · 502 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

前端学习专栏收录该内容

6 篇文章

订阅专栏

时钟功能

功能描述

以前前段的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>