双十一倒计时效果

最新推荐文章于 2022-09-28 11:45:24 发布

派大星不吃鱼

最新推荐文章于 2022-09-28 11:45:24 发布

阅读量1.2k

点赞数

分类专栏： jquery Html 文章标签： html 双十一

本文链接：https://blog.youkuaiyun.com/Kang_xiong/article/details/52972620

版权

jquery 同时被 2 个专栏收录

4 篇文章

订阅专栏

Html

2 篇文章

订阅专栏

一、必备基础知识

1.置换元素

我们知道html元素可以分为行内元素和块级元素。在行内元素中，有一些特殊的元素img、input、select、textarea、button、label，它们拥有内在的尺寸，可以设置宽和高，这类元素称作 置换元素

<span style="width:50px;height:50px;border:1px solid gray">Hello</span>

在body里面写上一段代码，我们在浏览器查看。可以发现并没有什么效果。因为span元素没有内在的尺寸，我们可以把span元素变成块级元素。下面我们先认识display属性(元素的显示方式)

display:none 可以是把元素隐藏起来，不可见
display:block 块级元素
display:inline 行内元素
display:inline-block 行内元素，同时继承了块级元素的一些属性（比如拥有内在尺寸）

这里只介绍几个display元素常用的值。给span元素添加display属性就可以看到有效果了

<span style="width:50px;height:50px;display:inline-block;border:1px solid gray">Hello</span>

2.setInterval()函数和clearInterval()函数

如果我们想过多少时间去做某件事情，就可以用到setInterval()函数了。这个函数有两个参数，第一个参数是要执行的事情，第二个参数是时间间隔。clearInterval()函数可以清除定时器函数，有一个参数，该参数是定时器函数的名。在html页面添加一个button,点击时控制台将不会输出。
ctrl+shift+i或f12 可以开启开发人员工具调试网页，看到控制台的输出

var sayHello=setInterval(function(){
        for(i=0;i<10;i++){
            console.log(i);
        }
},1000)
$("#stop").click(function(){
    clearInterval(sayHello);
})

3.取模和取余数

10/3表示为10除以3
10%3表示对10除以3取余数
parseInt(expression):对表达式取模，保留整数部分
关于时间的函数这里就不介绍了，可以看日期控件

二、小试牛刀

思路：双十一的时间2016年11月11日00：00减去当前的时间，得到相差的时间戳，然后对这个时间戳进行细节处理。

效果图：

这里写图片描述

css代码：

<style type="text/css">
       #date,#month,#hours,#minutes,#seconds,#rDay,#rHours,#rMinutes,#rSeconds
       {
              width:60px;
              border:1px solid gray;color:black;
              display: inline-block;
              text-align:center;

      }          
      .margin_right{margin-right:-15px;}

      .box1{
                  width:516px;
                  height:35px;
                  font-size:30px;
                }
  </style>

html代码：

<body>
        <h2> 当前时间：</h2><div class='box1'>
                                  <span id='month' ></span><span class="margin_right">月</span>
                                  <span id='date' ></span><span >日</span>
                                  <span id='hours'></span><span class="margin_right">:</span>
                                  <span id='minutes'  ></span><span class="margin_right">:</span>
                                  <span id='seconds'  ></span>
                                  </div>
       <h2>距离双十一还有:</h2><div class="box1">
                                                   <span id="rDay"></span><span class="margin_right">天</span>
                                                    <span id='rHours'></span><span class="margin_right">时</span>
                                                    <span id='rMinutes'></span><span class="margin_right">分</span>
                                                    <span id='rSeconds'></span>
                                               </div>
</body>

script代码：

<script type="text/javascript" src='../JQUERY/js/jquery-2.2.1.js'></script>
<script type="text/javascript">

       $(function(){
              var today=new Date();
              $("#month").text(today.getMonth()+1);
              $("#date").text(today.getDate());
                      var formate=function (type){
                          if(type<10){
                             type='0'+type;
                             return type;
                          }else{
                              return type;
                          }
                      }

            var time=setInterval(function(){
                    now=new Date();
                    hours=now.getHours();
                    minutes=now.getMinutes();
                    seconds=now.getSeconds();
                    // if(seconds<10){
                    //     seconds='0'+seconds;
                    // }
                    //  if(minutes<10){
                    //     minutes='0'+minutes;
                    // }
                    //  if(hours<10){
                    //     hours='0'+hours;
                    // }
                      seconds=formate(seconds);
                      minutes=formate(minutes);
                      hours=formate(hours);
                     $("#hours").text(hours);
                    $("#minutes").text(minutes);
                    $("#seconds").text(seconds);


            },1000);

      var remianTime=setInterval(function(){
                  var now=new Date();
                  var discountDay=new Date('2016-11-11 00:00');
                  var discountDaySeconds=Date.parse(discountDay);
                  var todaySeconds=Date.parse(now);
                  var totalRemainSeconds=discountDaySeconds-todaySeconds;      //剩下的
                  var remainDay=parseInt(totalRemainSeconds/(24*60*60*1000));   //parseInt保留整数部分
                  var dayRemainer=totalRemainSeconds%(24*60*60*1000)
                  var remainHours=parseInt(dayRemainer/(60*60*1000)); 
                  var hoursRemainer=dayRemainer%(60*60*1000);
                  var remianMinutes=parseInt(hoursRemainer/(60*1000));
                  var minutesRemainer=hoursRemainer%(60*1000);
                  var remainSeconds=parseInt(minutesRemainer/1000);
                    remainDay=formate(remainDay);
                    remainHours=formate(remainHours);
                    remianMinutes=formate(remianMinutes);
                    remainSeconds=formate(remainSeconds);

                $("#rDay").text(remainDay);
                $("#rHours").text(remainHours);
                $("#rMinutes").text(remianMinutes);
                $("#rSeconds").text(remainSeconds);

      },1000);

       })
     </script>

分析

1）页面部分可以分为两块，一个是当前的时间，一个距离双十一的时间。对应的javascript部分也分为两个部分。其实就是俩个定时器，因为这里每一秒都要显示时间。
2）第一个定时器部分，就是利用getMonth()等方法获取当前时间的月日和时分秒等，并把取得的值用$(selector).text()传给页面。
3）全局函数formate()的功能是当时、分、秒为个位数时，自动给补一个零。如果有多次实现相同功能时，我们可以尝试封装函数。

 var formate=function (type){
                          if(type<10){
                             type='0'+type;
                             return type;
                          }else{
                              return type;
                          }
                      }

4）第二个定时器部分，首先得到当前时间和双十一相差的时间戳，一天等于24*60*60*1000毫秒，利用parseInt()获取剩余天数。对相差的时间戳进行取余操作得到除了天数之外剩余的时间，然后是对“时”的处理，一小时等于60*60*1000毫秒，利用parseInt() 对天数剩下的时间戳进行处理，获得剩余时数。分、秒也是相同的一级一级往下的操作。

var now=new Date();
                  var discountDay=new Date('2016-11-11 00:00');
                  var discountDaySeconds=Date.parse(discountDay);
                  var todaySeconds=Date.parse(now);
                  var totalRemainSeconds=discountDaySeconds-todaySeconds;      //剩下的
                  var remainDay=parseInt(totalRemainSeconds/(24*60*60*1000));

有误之处欢迎指正，谢谢！！！