双十一倒计时效果
一、必备基础知识
1.置换元素
我们知道html元素可以分为行内元素和块级元素。在行内元素中，有一些特殊的元素img、input、select、textarea、button、label，它们拥有内在的尺寸，可以设置宽和高，这类元素称作 置换元素
<span style="width:50px;height:50px;border:1px solid gray">Hellospan>在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">Hellospan>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)); 有误之处欢迎指正，谢谢！！！
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！