倒计时（刷新重新计时）JS（附部分代码）

最新推荐文章于 2024-06-23 21:13:16 发布

立青(ಡωಡ)

最新推荐文章于 2024-06-23 21:13:16 发布

阅读量2k

点赞数 3

文章标签： javascript html5

本文链接：https://blog.csdn.net/weixin_45078708/article/details/108050055

版权

倒计时——每次刷新重新倒计时

知识点

知识点

DOM操作
定时器函数
格式化时间

步骤

一、获取操作对象DOM标签

二、格式化时间的函数方法

1、设定倒计时时间长度：天、时、分、秒

2、计算该时间长度的总秒数：时*3600+分*60+秒；

3、格式化时间：时=总秒数/3600；分=（总秒数%3600）/60；
	秒=总秒数/60；【时和分都要向下取整（Math.floor（））】

4、把得到的时分秒，进行三目运算。当<10,与字符串“0”拼接

三、字符串拼接函数

1、调用格式化时间的函数

2、定义一个字符串str

3、用字符串拼接的方法（str +=）连接标签

4、在父元素中显示str【dom.innerHTML = str;】

四、计时器函数

1、倒计时的总秒数进行自减

2、条件判断：当倒计时总秒数<0时清除计时器

3、调用字符串拼接函数

运行结果

在这里插入图片描述

script代码段

<script>
    //需求：倒计时
    //思路：DOM操作，定时器，格式化时间

    //步骤
    //获取DOM标签
    var box = document.getElementById("box");
    //定时器变量
    var time = null;
    //格式化时间
    //秒数转 小时、、分钟、、秒钟
    //2个小时后，活动结束
    //2 * 60 * 60 = 7200
    //7199
    //7198

    function downTime(seconds){//秒数  形参（代替实参的变量）
        //console.log(seconds);
        //声明时分秒变量
        var h = 0;
        var m = 0;
        var s = 0;
        //计算
        //1小时 = 3600秒
        //1分钟 = 60秒
        //除法运算
        //取余（剩余时间）
        //小时、分钟、秒钟
        h = Math.floor(seconds/3600);
        m = Math.floor(((seconds % 3600) / 60));
        s = Math.floor(seconds % 60)

        h = h < 10? "0" + h : h;
        m = m < 10? "0" + m : m;
        s = s < 10? "0" + s : s;
        console.log(h,m,s);
        //返回时分秒
        return{
            //冒号左面是属性，右边是属性值
            //把变量值赋给属性
            //返回的是属性

            h:h,
            m:m,
            s:s
        }

    }
     //var time = downTime(7197);//实参
     console.log(time);
     var total = 2 * 60 + 60;
    function init(){
        //获取格式化的时间
        var obj = downTime(total);
        console.log(obj);
        //对象通过键值key存取数据
		//字符串拼接
        var str = "<b>3分钟倒计时</b>"
        str += "<span>"+obj.h+"</span>"
        str += "<i>:</i>"
        str += "<span>"+obj.m+"</span>"
        str += "<i>:</i>"
        str += "<span>"+obj.s+"</span>"
        box.innerHTML = str;
    }
    //调用初始化函数
    init();
    //计时器函数
    timer = setInterval(function(){
        total--;
        if(total<0){
            clearInterval(timer)
            return;
        }
        //字符串拼接，写入倒计时空格
        init();
    },1000)


</script>

Body代码段

<body>
 	<div class="box" id="box">
     	<b>3分钟倒计时</b>
     	<span>00</span>
     	<i>:</i>
     	<span>00</span>
     	<i>:</i>
     	<span>00</span>
 	</div>
</body>

立青(ಡωಡ)

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
倒计时（刷新重新计时）JS（附部分代码）

倒计时——每次刷新重新倒计时知识点步骤运行结果script代码段Body代码段知识点DOM操作定时器函数格式化时间步骤一、获取操作对象DOM标签二、格式化时间的函数方法1、设定倒计时时间长度：天、时、分、秒2、计算该时间长度的总秒数：时*3600+分*60+秒；3、格式化时间：时=总秒数/3600；分=（总秒数%3600）/60；秒=总秒数/60；【时和分都要向下取整（Math.floor（））】4、把得到的时分秒，进行三目运算。当<10,与字符串“0”拼接三、字符
复制链接

扫一扫