如何用 JS 创建一个时钟呢

最新推荐文章于 2022-09-22 08:27:28 发布

原创最新推荐文章于 2022-09-22 08:27:28 发布 · 680 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

JS 专栏收录该内容

72 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现的实时时钟效果。通过设置HTML元素样式和利用JavaScript的定时器功能，每秒钟更新显示当前时间。代码简洁，易于理解。

废话不多说,直接贴代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS时钟特效</title>
    <style>
        #divid{
            width:260px;
            height: 50px;
            background:black;
            margin:0 auto;
            margin-top:300px;
            line-height: 50px;
            text-align: center;
            font-size:25px;
            color: red;
        }
    </style>
</head>
<body>
<div id="divid">
</div>
</body>

<script type="text/javascript">
    var divid = document.getElementById("divid");   //获取 div 标签返回的对象
    setInterval("settime()",1000);      //创建一个定时器,一秒调用一次这个方法

    function settime(){                 //创建方法
        var dd = new Date();            //创建一个时间类对象
        var y = dd.getFullYear();       //返回年
        var m = dd.getMonth();          //返回月
        var d = dd.getDate();           //返回日
        var h = dd.getHours();          //返回时
        var i = dd.getMinutes();        //返回分
        var s = dd.getSeconds();        //返回秒
        var date = y+"/"+m+"/"+d+"  "+h+":"+i+":"+s;    //将获取的所有值组合成一个变量

        divid.innerHTML=date;       //将获取的时间值输入到div对象中,也可以用innerText
    }
</script>
</html>

	基本思想是使用JS定时器方法,每1000毫秒(1秒)调用一次方法,返回并填充div

里的内容