<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>倒计时2</title> <style type="text/css"> * { margin: 0; padding: 0; } /*倒计时 模块*/ .count_down { overflow: hidden; background: #fff; padding-bottom: 30px; } .cd_words { color: #fff; font-size: 18px; text-align: center; width: 100%; text-shadow: 0 0 2px #000; padding-top: 10px; } .cd_date { display: inline-block; color: #fff; width: 100%; box-sizing: border-box; padding-top: 5px; text-align: center } .cd_day { color: #f7cf93; width: 100%; text-align: center; } .cd_day span { font-size: 30px; color: #fd9800; font-weight: 700; padding: 0 5px; display: inline-block; } .cd_bottom { font-size: 14px; background-color: #c51216; border-radius: 5px; width: 200px; height: 40px; line-height: 40px; margin: 10px auto; color: #fff; text-align: center; } .cd_time { display: inline-block; vertical-align: top; } .cd_time span { background-color: #fff; border-radius: 3px; color: #6e4200; width: 30px; height: 30px; line-height: 30px; text-align: center; display: inline-block; font-size: 16px; margin: 5px 3px 0; vertical-align: top; } </style> </head> <body> <div class="count_down"> <!-- 取后台字段 --> <!-- <span class="cd_date" id="cd_date" time="{$topic.start_time|date=‘Y/m/d H:i:s‘,###}">({$topic.start_time|date=‘Y.m.d‘,###})</span> --> <p class="cd_day ">还有<span id="t_d ">44</span>天</p> <div class="cd_bottom "> <div class="cd_time "><span id="t_h ">00时</span>时</div> <div class="cd_time "><span id="t_m ">00分</span>分</div> <div class="cd_time "><span id="t_s ">00秒</span>秒</div> </div> </div> <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script> <script type="text/javascript "> $(function() { var app = { //倒计时 coutDown: function() { var timer; function GetRTime() { // var time = $("#cd_date ").attr(‘time‘);//获取自定义属性 // var EndTime= new Date(time); var EndTime = new Date(‘2018/03/20 00:00:00‘); var NowTime = new Date(); var t = EndTime.getTime() - NowTime.getTime(); //判断活动结束后时间显示为0 if (t > 0) { var d = Math.floor(t / 1000 / 60 / 60 / 24); var h = Math.floor(t / 1000 / 60 / 60 % 24); var m = Math.floor(t / 1000 / 60 % 60); var s = Math.floor(t / 1000 % 60); document.getElementById("t_d ").innerHTML = d; document.getElementById("t_h ").innerHTML = h; document.getElementById("t_m ").innerHTML = m; document.getElementById("t_s ").innerHTML = s; } else { document.getElementById("t_d ").innerHTML = ‘0‘; document.getElementById("t_h ").innerHTML = ‘0‘; document.getElementById("t_m ").innerHTML = ‘0‘; document.getElementById("t_s ").innerHTML = ‘0‘; clearInterval(timer); } } setInterval(GetRTime, 0); }, init: function() { var that = this; //倒计时 that.coutDown(); } } app.init(); }) </script> </body> </html>
效果图：
