JS制作时钟实例

最新推荐文章于 2024-01-31 16:02:42 发布

卢晶晶

最新推荐文章于 2024-01-31 16:02:42 发布

阅读量698

点赞数

CC 4.0 BY-SA版权

分类专栏： Web前端 JS CSS HTML

本文链接：https://blog.youkuaiyun.com/Lucrecia666/article/details/82789633

Web前端同时被 3 个专栏收录

14 篇文章

订阅专栏

9 篇文章

订阅专栏

CSS

7 篇文章

订阅专栏

本文介绍了如何使用JavaScript创建一个动态更新的时钟实例，通过设置定时器实现每秒更新时间，并提供了CSS样式、HTML结构及JavaScript代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JS制作时钟实例：

主要使用：

定时器：
1.定义
sobj=setInterval（function（）{
//每隔一秒钟执行此代码段
}，1000）
2.清除
claerInterval（sobj）；

CSS样式:

#clock {
            height: 50px;
            width: 500px;
            border-radius: 50px;
            background: #000;
            color: blue;
            font-weight: bold;
            text-align: center;
            line-height: 50px;
        }
        
        * {
            font-size: 30px;
        }
        
        #button {
            margin-left: 150px;
        }

HTML部分:

<body>
    <div id="clock">
        <span id="sid">随意初值</span>
    </div>
    <div id="button">
        <button id="abt">暂停</button>
        <button id="bbt">开始</button>
    </div>

</body>

JS部分：

<script type="text/javascript">
    function getDate() {
        dobj = new Date();
        year = dobj.getFullYear();
        month = dobj.getMonth() + 1; //不能在下面用 month = '0' + month+1代替此处+1;
        if (month < 10) {
            month = '0' + month;     //此处‘+’为字符串连接，不做数学运算
        }
        date = dobj.getDate();
        if (date < 10) {
            date = '0' + date;
        }
        hour = dobj.getHours();
        if (hour < 10) {
            hour = '0' + hour;
        }
        minute = dobj.getMinutes();
        if (minute < 10) {
            minute = '0' + minute;
        }
        second = dobj.getSeconds();
        if (second < 10) {
            second = '0' + second;
        }
        str = year + '/' + month + '/' + date + ' ' +
            hour + ':' + minute + ':' + second;
        sidobj = document.getElementById('sid');
        sidobj.innerHTML = str;
    }
    getDate(); //获得初始时间
    start();   //调用start函数
    //定时器开始启用秒表
    function start() {
        sobj = setInterval(function() {
            getDate(); //每隔一段时间执行一次
        }, 1000);
    }
    //也可用setInterval(getDate，1000）;代替函数体中的值

    //暂停
    function close() {
        clearInterval(sobj);
    }
    abtobj = document.getElementById('abt');
    abtobj.onclick = function() {
        close();
    }

    //开始
    bbtobj = document.getElementById('bbt');
    bbtobj.onclick = function() {
        start();
    }
</script>