JavaScript 倒計時（截止某日期的倒計時和截止每晚12點的倒計時以及固定時間倒計時）
阿新 • • 發佈：2017-09-13
ado get font tint utf-8 body 本地 day shadow
截止某日期的倒計時和截止每晚12點倒計時：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> </head> <body> <h1 id="divTime"></h1> </body> <script type="text/javascript"> //距離某日的倒計時 // var endTime=new Date(‘2017-9-13‘); // 距離今晚24:0:0的倒計時 varendYear=new Date().getFullYear(); var endMonth=new Date().getMonth()+1; var endDay=new Date().getDate(); var endTime=new Date(endYear,endMonth,endDay); function leftDiv (){ var Time = endTime-(new Date().getTime()); var Hours = addNumber(Math.floor(Time/1000/60/60%24));var Minutes = addNumber(Math.floor(Time/1000/60%60)); var Seconds = addNumber(Math.floor(Time/1000%60)); if(Time>0){ setTimeout(function(){ leftDiv(); },1000); }else{ clearTimeout(leftDiv()) } document.getElementById("divTime").innerText="距離截至日期還有"+Hours+"時"+Minutes+"分"+Seconds+"秒"; } leftDiv(); function addNumber(num){ var num=(num>9)?num:(‘0‘+num); return num; } </script> </html>
固定時間倒計時：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>jquery版的網頁倒計時效果</title> <meta http-equiv="Content-type" content="text/html;charset=UTF-8" /> <meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" name="viewport" id="viewport"> <meta name="format-detection" content="telephone=no" /> <meta content="yes" name="apple-mobile-web-app-capable" /> <meta content="black" name="apple-mobile-web-app-status-bar-style" /> <style type="text/css"> .time-item strong { background: #C71C60; color: #fff; line-height: 49px; font-size: 36px; font-family: Arial; padding: 0 10px; margin-right: 10px; border-radius: 5px; box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2); } #day_show { float: left; line-height: 49px; color: #c71c60; font-size: 32px; margin: 0 10px; font-family: Arial, Helvetica, sans-serif; } .item-title .unit { background: none; line-height: 49px; font-size: 24px; padding: 0 10px; float: left; } </style> <script type="text/javascript" src="./js/jquery-1.8.3.min.js"></script> <script type="text/javascript"> var intDiff = parseInt(500000); //倒計時總秒數量 function timer(intDiff) { window.setInterval(function() { var day = 0, hour = 0, minute = 0, second = 0; //時間默認值 if (intDiff > 0) { day = Math.floor(intDiff / (60 * 60 * 24)); hour = Math.floor(intDiff / (60 * 60)) - (day * 24); minute = Math.floor(intDiff / 60) - (day * 24 * 60) - (hour * 60); second = Math.floor(intDiff) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60); } if (minute <= 9) minute = ‘0‘ + minute; if (second <= 9) second = ‘0‘ + second; $(‘#day_show‘).html(day + "天"); $(‘#hour_show‘).html(‘<s id="h"></s>‘ + hour + ‘時‘); $(‘#minute_show‘).html(‘<s></s>‘ + minute + ‘分‘); $(‘#second_show‘).html(‘<s></s>‘ + second + ‘秒‘); intDiff--; }, 1000); } $(function() { timer(intDiff); }); </script> </head> <body> <div class="time-item"> <span id="day_show">0天</span> <strong id="hour_show">0時</strong> <strong id="minute_show">0分</strong> <strong id="second_show">0秒</strong> </div> <!--倒計時模塊--> </body> </html>
指定日期倒計時：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <span class="timespan"></span> <script src="./js/jquery-1.8.3.min.js"></script> <script> var starttime = new Date("2017/11/20"); setInterval(function () { var nowtime = new Date(); var time = starttime - nowtime; var day = parseInt(time / 1000 / 60 / 60 / 24); var hour = parseInt(time / 1000 / 60 / 60 % 24); var minute = parseInt(time / 1000 / 60 % 60); var seconds = parseInt(time / 1000 % 60); $(‘.timespan‘).html(day + "天" + hour + "小時" + minute + "分鐘" + seconds + "秒"); }, 1000); </script> </body> </html>
聲明：本文所用的jQuery文件引入方式為本地絕對路徑引入。要看效果需要自行引入jQuery文件。也可使用jQuery在線鏈接！
友情贈送jQuery在線鏈接如下：
jQuery：
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
jQuery mobile：
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
jQuery UI：
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
JavaScript 倒計時（截止某日期的倒計時和截止每晚12點的倒計時以及固定時間倒計時）