利用js实现倒计时

倒计时这个名词并不陌生，比如：天猫，京东等一些网上商城都会推出一些限时特价商品，今天我们就一起编写一个属于自己的倒计时；

　　　　Ps: 首先做一件事情的时候，不应该盲目的去做，应该首当其冲的去想，脑子里面出现大概的思路。

一、首先我们应该在HTML放一个容器（这里面没有什么可解释的就是为了呈现倒计时）；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>倒计时制作</title>
    <style>
        .otime span{display:inline-block;padding: 10px 20px;opacity: 0.5;margin-left: 10px;color:red;}
    </style>
</head>
<body>
    <div class="text">
       <p>距离元旦还剩余:<span id="time" class="otime"></span></p>
       <p>当前时间：<span id="time1" class="otime"></span></p>
    </div>
</body>
</html>

二、编写JS代码

//这个函数是为了适应格式 比如：01分01秒;
    function p (n){
        return n < 10 ? '0'+ n : n;  
    }

    //倒计时函数
    function newTime (){
        //定义当前时间
        var startTime = new Date(); 
        //定义结束时间
        var endTime = new Date("2017/1/1 00:00:00");
        
        //算出中间差并且已毫秒数返回; 除以1000将毫秒数转化成秒数方便运算；
        var countDown = (endTime.getTime() - startTime.getTime())/1000;
        
        //获取天数 1天 = 24小时  1小时= 60分 1分 = 60秒
        var oDay = parseInt(countDown/(24*60*60));
        
        //获取小时数 
        //特别留意 %24 这是因为需要剔除掉整的天数;
        var oHours = parseInt(countDown/(60*60)%24);
        
        //获取分钟数
        //同理剔除掉分钟数
        var oMinutes = parseInt(countDown/60%60);
        
        //获取秒数
        //因为就是秒数  所以取得余数即可
        var oSeconds = parseInt(countDown%60);
        
        //下面就是插入到页面事先准备容器即可;
        var html =  "<span>" + p(oDay) + "天</span>"+ "<span>" + p(oHours) + "时</span>" + "<span>" + p(oMinutes) + "分</span>" +"<span>" + p(oSeconds) + "秒</span>";
        document.getElementById('time').innerHTML = html;
        
        //别忘记当时间为0的，要让其知道结束了;
        if(countDown < 0){
            document.getElementById('time').innerHTML = '元旦到了';
        }
    }

　这样就实现了一个计时器的效果，如果想要好看一点，只需要加点样式即可；

三、制作当前时间的秒表（也就是第二个容器需要做的）

1、直接编写JS代码　

 1 function oldTime (){
 2         var oDate = new Date();
 3         //获取年
 4         var oFullyear = oDate.getFullYear();
 5         //获取月份
 6         var oMonth = oDate.getMonth()+1;
 7         //获取日期
 8         var oDta= oDate.getDate();
 9         //获取星期
10         var oDay = oDate.getDay();
11         var week = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
12         //获取小时
13         var oHours = oDate.getHours();
14         //获取分钟
15         var oMinutes = oDate.getMinutes();
16         //获取秒数
17         var oSeconds = oDate.getSeconds();
18         //插入到容器中
19         var b = "<span>"+ oFullyear +"年</span>" + "<span>"+ oMonth +"月</span>" + "<span>"+ oDta+"日</span>" + "<span>"+ week[oDay] +"</span>" + "<span>"+ p(oHours) +"时</span>" + "<span>"+ p(oMinutes) +"分</span>" + "<span>"+ p(oSeconds) +"秒</span>";
20         document.getElementById('time1').innerHTML = b;
21 
22     }

　---》如果学会了，不妨自己试一下，看看能不能做出更高级的计时哦;

posted @ 2018-06-19 15:39 剑仙6 阅读(1722) 评论(0) 收藏举报

刷新页面返回顶部

剑仙6

利用js实现倒计时

公告