JS实现定时器

2025-07-25 10:14:48

JS实现定时器 JS实现定时器有趣的小案例池子： JS实现定时器 JS实现关闭图片窗口 JS实现输入检验获取焦点后隐藏提示内容的输入框 JS实现获取鼠标在画布中的位置聊天信息框显示消息 JS点击切换背景图自动切换背景的登录页面 JS制作跟随鼠标移动的图片 JS实现记住用户密码案例分析我们需要制作一个定时器，可以在屏幕上面显示的。首先我们需要的是，在三个黑的盒子里面显示时间。然后设

JS实现定时器

有趣的小案例池子：

JS实现定时器

JS实现关闭图片窗口

JS实现输入检验

获取焦点后隐藏提示内容的输入框

JS实现获取鼠标在画布中的位置

聊天信息框显示消息

JS点击切换背景图

自动切换背景的登录页面

JS制作跟随鼠标移动的图片

JS实现记住用户密码

案例分析

我们需要制作一个定时器，可以在屏幕上面显示的。

首先我们需要的是，在三个黑的盒子里面显示时间。
然后设置自动变化，利用setInterval实现。
最后使用innerHTML在三个盒子中分别设置时分秒。

结果展示

构建框架

代码语言：javascript代码运行次数：0运行复制

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <span class="hour">1</span>
        <span class="minute">2</span>
        <span class="second"></span>
    </div>
</html>

CSS样式

代码语言：javascript代码运行次数：0运行复制

<style>
        div {
            /* 把盒子设置到比较中间的位置 */
            margin-top: 200px;
            margin-left: 400px;
        }
        
        span {
            /* 设置成行内块元素 */
            display: inline-block;
            /* 设置盒子大小 */
            width: 40px;
            height: 40px;
            /* 设置背景颜 */
            background-color: #;
            /* 设置文字大小 */
            font-size: 20px;
            /* 设置文字颜 */
            color: #fff;
            /* 设置文字居中 */
            text-align: center;
            /* 设置行高 */
            line-height: 40px;
        }
    </style>

JS逻辑

代码语言：javascript代码运行次数：0运行复制

 <script>
        // 1. 获取元素 
        var hour = document.querySelector('.hour'); // 小时的黑盒子
        var minute = document.querySelector('.minute'); // 分钟的黑盒子
        var second = document.querySelector('.second'); // 秒数的黑盒子
        var inputTime = +new Date('2022-12-6 18:00:00'); // 返回的是用户输入时间总的毫秒数 这里需要的是，
        // 需要的是填写当前自己的电脑上的时间以后的时间，不然会很奇怪
        countDown(); // 我们先调用一次这个函数，防止第一次刷新页面有空白 
        // 2. 开启定时器
        setInterval(countDown, 1000);

        function countDown() {
            var nowTime = +new Date(); // 返回的是当前时间总的毫秒数
            var times = (inputTime - nowTime) / 1000; // times是剩余时间总的秒数 
            var h = parseInt(times / 60 / 60 % 24); //时
            h = h < 10 ? '0' + h : h;
            hour.innerHTML = h; // 把剩余的小时给 小时黑盒子
            var m = parseInt(times / 60 % 60); // 分
            m = m < 10 ? '0' + m : m;
            minute.innerHTML = m; // 设置分钟
            var s = parseInt(times % 60); // 当前的秒
            s = s < 10 ? '0' + s : s;
            second.innerHTML = s;  // 设置秒数
        }
    </script>

完整代码

代码语言：javascript代码运行次数：0运行复制

<!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>
        div {
            /* 把盒子设置到比较中间的位置 */
            margin-top: 200px;
            margin-left: 400px;
        }
        
        span {
            /* 设置成行内块元素 */
            display: inline-block;
            /* 设置盒子大小 */
            width: 40px;
            height: 40px;
            /* 设置背景颜 */
            background-color: #;
            /* 设置文字大小 */
            font-size: 20px;
            /* 设置文字颜 */
            color: #fff;
            /* 设置文字居中 */
            text-align: center;
            /* 设置行高 */
            line-height: 40px;
        }
    </style>
</head>

<body>
    <div>
        <span class="hour">1</span>
        <span class="minute">2</span>
        <span class="second"></span>
    </div>
    <script>
        // 1. 获取元素 
        var hour = document.querySelector('.hour'); // 小时的黑盒子
        var minute = document.querySelector('.minute'); // 分钟的黑盒子
        var second = document.querySelector('.second'); // 秒数的黑盒子
        var inputTime = +new Date('2022-12-6 18:00:00'); // 返回的是用户输入时间总的毫秒数 这里需要的是，
        // 需要的是填写当前自己的电脑上的时间以后的时间，不然会很奇怪
        countDown(); // 我们先调用一次这个函数，防止第一次刷新页面有空白 
        // 2. 开启定时器
        setInterval(countDown, 1000);

        function countDown() {
            var nowTime = +new Date(); // 返回的是当前时间总的毫秒数
            var times = (inputTime - nowTime) / 1000; // times是剩余时间总的秒数 
            var h = parseInt(times / 60 / 60 % 24); //时
            h = h < 10 ? '0' + h : h;
            hour.innerHTML = h; // 把剩余的小时给 小时黑盒子
            var m = parseInt(times / 60 % 60); // 分
            m = m < 10 ? '0' + m : m;
            minute.innerHTML = m; // 设置分钟
            var s = parseInt(times % 60); // 当前的秒
            s = s < 10 ? '0' + s : s;
            second.innerHTML = s;  // 设置秒数
        }
    </script>
</body>

</html>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。原始发表：2022-12-06，如有侵权请联系 cloudcommunity@tencent 删除var登录定时器函数框架

#感谢您对电脑配置推荐网 - 最新i3 i5 i7组装电脑配置单推荐报价格的认可，转载请说明来源于"电脑配置推荐网 - 最新i3 i5 i7组装电脑配置单推荐报价格

本文地址：http://www.dnpztj.cn/biancheng/1151110.html

本站网友广州二手房出售	12分钟前发表
initial-scale=1.0"> <title>Document</title> </head> <body> <div> <span class="hour">1</span> <span class="minute">2</span> <span class="second"></span> </div> </html>CSS样式代码语言：javascript代码运行次数：0运行复制<style> div { /* 把盒子设置到比较中间的位置 */ margin-top
本站网友遗世独立的理想乡	3分钟前发表
h; hour.innerHTML = h; // 把剩余的小时给小时黑盒子 var m = parseInt(times / 60 % 60); // 分 m = m < 10 ? '0' + m
本站网友怎样保护皮肤	3分钟前发表
400px; } span { /* 设置成行内块元素 */ display
本站网友温州建国医院	28分钟前发表
首先我们需要的是
本站网友法罗力	17分钟前发表
然后设置自动变化
本站网友全面开放二胎	16分钟前发表
原始发表：2022-12-06
本站网友哈尔滨二手房交易网	24分钟前发表
#fff; /* 设置文字居中 */ text-align
本站网友嘉兴翡翠花园	11分钟前发表
然后设置自动变化
本站网友中浩青溪庄园	3分钟前发表
m; minute.innerHTML = m; // 设置分钟 var s = parseInt(times % 60); // 当前的秒 s = s < 10 ? '0' + s

JS实现定时器