原生js实现自定义倒计时（包含暂停、继续）

最新推荐文章于 2024-04-29 21:35:15 发布

见面请叫我渣zha

最新推荐文章于 2024-04-29 21:35:15 发布

阅读量2.4k

点赞数 6

分类专栏：前端学习技术代码文章标签： javascript html

本文链接：https://blog.csdn.net/youzigrowing/article/details/120676354

版权

前端学习同时被 3 个专栏收录

6 篇文章 0 订阅

订阅专栏

技术

3 篇文章 0 订阅

订阅专栏

代码

2 篇文章 0 订阅

订阅专栏

最近在学习js,想用js做一些简单的小案例，说干就干！
这一篇就是用js实现自定义倒计时。用到的html和css不多，所以界面很简单，主要看功能。
主要用到js的timing,就是setInterval(),clearInterval()，也涉及读取用户输入的数据等。

界面图：

在这里插入图片描述

首先是html和CSS（行内样式）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript 语言之倒计时工具训练</title>
</head>
<body>
    <h1>JavaScript实例--倒计时</h1>
    <div>
        <input type="number" id="hour" style="width: 35px;">
        时
        <input type="number" id="min" style="width: 35px;">
        分
        <input type="number" id="sec"  style="width: 35px;">
        秒
        <button id="start" onclick="doStart()">开始</button>
        <button id="pause" onclick="doPause()">暂停</button>
        <button id="continue" onclick="doContinue()">继续</button>
    </div> 
    
    <span id="clock" style="font-size: 3em">
        <!-- 00:00:00 -->
        <b>00</b>:<b>00</b>:<b>00</b>
    </span>

</body>

input的type是number，其实text也可以，看个人。

JS：

<script>
    //定义总时间，定时器变量
    var sumTime,time;
    // 获取三个input标签
    var hour = document.getElementById('hour');
    var min = document.getElementById('min');
    var sec = document.getElementById('sec');
    // 获取b标签
    var b = document.getElementsByTagName('span')[0].getElementsByTagName('b')
    console.log(document.getElementsByTagName('span'))

    function doStart(){
        // 获取输入框的value值
        var h1 = parseInt(hour.value);
        var m1 = parseInt(min.value);
        var s1 = parseInt(sec.value);
        // 计算总时间
        sumTime = h1*60*60 + m1*60 + s1;
        document.getElementById('start').setAttribute('disabled','disabled')

        // 知识点解析：
        // setAttribute() 方法添加指定的属性，并为其赋指定的值。
        // 参数   类型  描述
        // attributename   String  必需。您希望添加的属性的名称。
        // attributevalue  String  必需。您希望添加的属性值。

        //调用计算时间的方法 
        onTimer()
    } 
    // 计算时间的方法

    function onTimer(){
        // clearInterval(time);
        time = setInterval(function () {
          // 当总时间为0，倒计时结束
          if (sumTime === -1) {
            clearInterval(time);
            window.alert("定时结束！");
            document.getElementById('start').removeAttribute('disabled')

            // 知识点解析：
            //  removeAttribute() 方法删除指定的属性
            // 参数  类型  描述
            // attributename   String  必需。规定要删除的属性的名称。

          } else {

            // （1）当总时间不为0，计算当前时间，并显示在页面上
            h = Math.floor(sumTime / (60 * 60));
            m = Math.floor(sumTime / 60) - (h * 60);
            s = Math.floor(sumTime) - (h * 60 * 60) - (m * 60);
            // 补零
            if (h <= 9) h = '0' + h;
            if (m <= 9) m = '0' + m;
            if (s <= 9) s = '0' + s;
            console.log(h,m,s)
            b[0].innerHTML = h;
            b[1].innerHTML = m;
            b[2].innerHTML = s;
            // (2)并做-1操作
            sumTime--;
          }
        }, 1000);
    }
    // 点击暂停
    function doPause(){
        // 清除定时器
        clearInterval(time);
    }
    // 点击继续
    function doContinue(){
        // 当总时间不存在的时候
        if(sumTime == undefined){
            alert('请先开始倒计时')
        //存在的时候，继续执行时间计算的方法 
        }else{
             onTimer()
        }
    }

</script>

以上就是本次倒计时的代码，大家可以看一看，如果发现有问题可以留言，本人是前端小白，我们讨论讨论，互相学习。

见面请叫我渣zha

关注

6
点赞
踩
16

收藏

觉得还不错? 一键收藏
3
评论
原生js实现自定义倒计时（包含暂停、继续）

最近在学习js,想用js做一些简单的小案例，说干就干！这一篇就是用js实现自定义倒计时。用到的html和css不多，所以界面很简单，主要看功能。主要用到js的timing,就是setInterval(),clearInterval()，也涉及读取用户输入的数据等。界面图：首先是html：` JavaScript 语言之倒计时工具训练 JavaScript实例--倒计时时分
复制链接

扫一扫