原生js实现一个简单的倒计时功能

Posted 2020-10-14

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了原生js实现一个简单的倒计时功能相关的知识，希望对你有一定的参考价值。

　　大家好，我是云中君！欢迎大家来观看我的博客

之前那，在群里看到很多人问，关于电商网站中的倒计时功能怎么实现，很多人说在网上找了很多插件，但是不是很会用，所以今天就在这里分享一下我封装的一个小的倒计时功能！

下面是布局代码！

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <link href="css/index.css" rel="stylesheet">
    </head>
    <body>
    <!--用的时候把下面这个代码放到你那个放倒计时的盒子里面就好了-->
        <span class = "span1"  id="time1" data-time="2017/11/19 23:32">
                本场剩余：
            <!----data-time用来存放你商品到期的时间，时间格式就按照上面格式就好--->
            <!--每个span的id要唯一，调用函数的时候就是要传id这一个参数-->
                <em></em> 天
                <em></em> 小时
                <em></em> 分
                <em></em> 秒
            <!--em标签用来放置我们所要显示的时间--->
        </span>    
        <script type="text/javascript" src="js/js.js"></script>
        <!--在这里调用js文件，里面是封装的倒计时的js函数-->
    </body>
</html>

　　怎么样，布局很简单吧！接下来是我们的css代码，本人并没有做太多的设置，大家根据自己的喜好来设置不同的样式，这样都是可以的！

span{font-size:12px;color:#666;}
em{font-style:normal;color:red;font-size:12px;}
/******这里是css，大家可以根据自己的喜好更改到自己的style，笔者只是在这里简单的做了一些设置********/

　　接下来就是我们的js代码了

function getTime(id){
        var timer = null;//这里设置time为null，用于下面来清除计时器
        var obj = document.getElementById(id)//获取到放置时间数据的span的id
        timer = setInterval(function(){//设置定时器，来更新时间
                var a = new Date((obj.getAttribute("data-time"))).getTime();
                //上面这一步可能比较复杂，我们首先来看obj.getAttribute("data-time")这一句。这个是用来获取指定标签的data-time属性，
即我们要使用的到期时间，然后来看new Date().getTime(),这一句是用来获取我们所设置到期时间的时间戳，用于下面的计算，这个获取的是固定的数值
                var b = new Date().getTime();//这是获取当前时间，是一个不固定的数值
                var d = 0,s=0,h=0,m=0;//定义变量
                var ee = obj.getElementsByTagName("em")//获取布局中的em标签用于存取数据
                d = Math.floor((a - b)/1000/60/60/24);//获取剩余天数
                h = Math.floor((a - b)/1000/60/60%24);//获取剩余小时
                m = Math.floor((a - b)/1000/60%60);//获取剩余分钟
                s = Math.floor((a - b)/1000%60);//获取剩余秒数


                
                
                
                //中间这块区域是用来判断，当前时间数值小于10的时候给他前面加个0，这里可以根据具体情况可加可不加，以下同理
                if(d < 10){
                    d = "0" + d
                }else if(d < 0){
                    d = 0
                }
                if(h < 10){
                    h = "0" + h
                }else if(h < 0){
                    h = 0
                }
                if(m < 10){
                    m = "0" + m;
                }else if(m < 0){
                    m = 0;
                }
                if(s < 10){
                    s = "0" + s;
                }else if(s < 0){
                    s = 0;
                }

   
                ee[0].innerHTML = d;
                ee[1].innerHTML = h;
                ee[2].innerHTML = m;
                ee[3].innerHTML = s;
                if(a <= b){//当我们的时间到期的时候，清除计时器，然后把当前标签的内容设置为0；
                    clearInterval(timer);
                    ee[0].innerHTML = 00;
                    ee[1].innerHTML = 00;
                    ee[2].innerHTML = 00;
                    ee[3].innerHTML = 00;
                }
            },1000)
}
getTime("time1")//这里用来调用这个函数，传入id

　　这里我们就做好了一个倒计时的功能了！大家有不懂得地方可以加笔者的qq来和我一起讨论，欢迎大家来交流！qq：785228195

以上是关于原生js实现一个简单的倒计时功能的主要内容，如果未能解决你的问题，请参考以下文章