全国统一服务热线:400-633-9193

基于JavaScript实现活动倒计时效果

        2017-04-29    1563

本文实例为大家分享了js倒计时效果的具体代码,供大家参考,具体内容如下


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!DOCTYPE html>
<html>
  <head>
    <title>countDown</title>
    <style type="text/css">
      #mydiv{
        width:150px;
        background-color:green;
        margin:0 auto;
        padding:0 auto;
        color:pink;
      }
    </style>
    <script type="text/javascript">
      <!-- 秒数可修改-->
      var second=50;
      <!-- 分钟可修改-->
      var minute=1;
      <!-- 小时可修改-->
      var hour=1;
      <!-- 天数可修改-->
      var day=1;
      var flag=false;
      function countDown(){
        var div=document.getElementById("mydiv");
        second-=1;
        if(second==0){
          minute=minute-1;
          second=60;
          if(minute<0){
            hour=hour-1;
            minute=59;
            if(hour<0){
              day-=1;
              hour=23;
              if(day<0){
                flag=true;
              }
            }
          }
        }
        if(flag){
          div.innerHTML="活动结束!";
        }else{
          div.innerHTML="距离活动时间还剩:"+day+"天"+hour+"小时"+minute+"分"+second+"秒";
        }
      }
       setInterval("countDown()",1000);
    </script>
  </head>
  <body>
    <div id="mydiv">倒计时</div>
  </body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助


  分享到:  
0.2624s