倒计时效果-蒲公英云

倒计时效果

知识点

JavaScript Date （日期对象）

Date() 返回当前的日期和时间
getDate() 查看date对象并返回日期（1-31）
getDay() 返回星期（0-6）
getHours() 返回小时数（0-23）
getMinutes() 返回分钟数（0-59）
getMonth() 返回月份值（0-11，当前月份+1）
getSeconds() 返回秒数
getTime() 返回毫秒数
getYear() 返回年份，获取年份的时候用
getFullYear() 方法操作

一、获取系统时间

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>当前系统时间显示</title>
</head>
<body>
<div id="show">显示时间的位置</div>
<script> window.onload = function () { showTime(); } //如果分数和秒数是单个数字的话，前面加个0，格式整洁 function checkTime(i){ if(i<10){ i = "0"+i; } return i; } function showTime(){ var myDate = new Date(); var year = myDate.getFullYear(); var month = myDate.getMonth(); var date = myDate.getDate(); var day = myDate.getDay(); //将获取到的数字转成字符串格式 var weekday = new Array(7); weekday[0] = "星期日"; weekday[1] = "星期一"; weekday[2] = "星期二"; weekday[3] = "星期三"; weekday[4] = "星期四"; weekday[5] = "星期五"; weekday[6] = "星期六"; var hour = myDate.getHours(); var minute = myDate.getMinutes(); var seconds = myDate.getSeconds(); minute = checkTime(minute); seconds = checkTime(seconds); document.getElementById("show").innerHTML = year+"年"+month+"月"+date+"日 "+weekday[day]+" "+hour+":"+minute+":"+seconds; setTimeout(showTime, 500); } </script>
</body>
</html>

二、倒计时时差

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>倒计时时差</title>
</head>
<body>
  <div>距离2018年元旦还有 <span id="showTime">时间差</span> 天</div>
  <script> window.onload = function(){ var nowtime = new Date(); var endtime = new Date("2018,1,1"); var lefttime = Math.ceil((endtime.getTime()-nowtime.getTime())/(24*60*60*1000)); document.getElementById("showTime").innerHTML = lefttime; } </script>
</body>
</html>

（1）Math.ceil()

执行的是向上取整计算，返回的是大于或等于函数参数，并且与之最接近的整数。

（2）逻辑

结束时间 - 当前时间 = 时间差
时间差：毫秒差，向上取整计算

三、限时抢

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>限时抢购</title>
</head>
<body>
<div>还剩<span id="showTime">最后抢购时间</span></div>
<script> window.onload = function(){ showTime(); } function showTime(){ var nowtime = new Date(); var endtime = new Date("2017/6/27,18:00:00"); //parseInt() 取整 var lefttime = parseInt((endtime.getTime()-nowtime.getTime())/1000); var d = parseInt(lefttime/(24*60*60)); var h = parseInt(lefttime/(60*60)%24); var m = parseInt(lefttime/60%60); var s = parseInt(lefttime%60); var st = document.getElementById("showTime"); st.innerHTML = d+"天"+h+"小时"+m+"分"+s+"秒"; if (endtime<=0){ st.innerHTML = "抢购结束！"; } setTimeout(showTime, 500); } </script>
</body>
</html>