js倒计时

最新推荐文章于 2023-12-25 11:55:05 发布

可爱的小书包

最新推荐文章于 2023-12-25 11:55:05 发布

阅读量88

点赞数

分类专栏： JavaScript jquery 文章标签： js 倒计时

本文链接：https://blog.csdn.net/qq_32409957/article/details/84993398

版权

JavaScript 同时被 2 个专栏收录

4 篇文章 1 订阅

订阅专栏

jquery

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="cn">

<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>倒计时</title>
</head>
<style>
    .showTime {
        font-size: 50px;
        margin: 0 auto;
        text-align: center;
    }
</style>
<body>
    <div class="time">
        小时：<input type="number" min=0 max=24 name="hour"><br/>
        分钟：<input type="number" min=0 max=60 name="minute"><br/>
        <button onclick="submit()">提交</button>
    </div>
    <div class="showTime">
        
    </div>
</body>
<script src="jquery-1.11.0.min.js"></script>
<script>
    var time = 0; 
    function submit() {
        // 获得时间
        var hour = $("[name='hour']").val()!=""?$("[name='hour']").val():0;
        var minute = $("[name='minute']").val()?$("[name='minute']").val():0;
        time = hour * 3600 + minute * 60;
        // 定时器启动第一次启动会延迟设定的时间
        show();
        // 开启定时器
        interval = setInterval(() => {
            show();
        }, 1000);
        
    }
    // 显示时间
    function show() {
        var showHour = parseInt(time / 3600);
        var showMinute = parseInt((time % 3600) / 60);
        var showSecond = time % 60;
        // 每次添加时间，需要将之前的时间清空
        $(".showTime").empty()
        .append(showHour<10?"0"+showHour:showHour).append(":")
        .append(showMinute<10?"0"+showMinute:showMinute).append(":")
        .append(showSecond<10?"0"+showSecond:showSecond);

        if (--time<0) {
            // 清除计时器
            clearInterval(interval);
            //到点自动停止计时器，也可做其他的事情
        }
    }
</script>
</html>

效果图

可爱的小书包

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js倒计时

&lt;!DOCTYPE html&gt;&lt;html lang="cn"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
复制链接

扫一扫