jQuery實現每日秒殺商品倒計時功能

2019-11-19 10:51:59

字體：大中小

來源：轉載

供稿：網友

html & js：

<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>jQuery每日秒殺倒計時</title><link rel="stylesheet" href="css/zzsc.css" rel="external nofollow" ></head><body><div class="se-kl"> <div class="se-cn">倒計時</div> <div class="se-en">COUNT DOWN</div> <i class="se-io"></i> <div class="se-info">距離結束還剩</div> <div class="se-count"> <div class="se-day"></div> <div class="se-hour"><span class="se-txt">00</span></div> <div class="se-min"><span class="se-txt">00</span></div> <div class="se-sec"><span class="se-txt">00</span></div> </div></div><script src="js/jquery.min.js"></script> <!-- 依賴條件1 --><script type="text/javascript"> $(document).ready(function () { var oDate = new Date(); var nowTime = oDate.getTime(); //現在的毫秒數 oDate.setDate(oDate.getDate() + 1); // 設定截止時間為第二天 var targetDate = new Date(oDate.toLocaleDateString()); run(targetDate); }); function run(enddate) { getDate(enddate); setInterval("getDate('" + enddate + "')", 500); } function getDate(enddate) { var oDate = new Date(); //獲取日期對象 var nowTime = oDate.getTime(); //現在的毫秒數 var enddate = new Date(enddate); var targetTime = enddate.getTime(); // 截止時間的毫秒數 var second = Math.floor((targetTime - nowTime) / 1000); //截止時間距離現在的秒數 var day = Math.floor(second / 24 * 60 * 60); //整數部分代表的是天；一天有24*60*60=86400秒 ； second = second % 86400; //余數代表剩下的秒數； var hour = Math.floor(second / 3600); //整數部分代表小時； second %= 3600; //余數代表 剩下的秒數； var minute = Math.floor(second / 60); second %= 60; var spanH = $('.se-txt')[0]; var spanM = $('.se-txt')[1]; var spanS = $('.se-txt')[2]; spanH.innerHTML = tow(hour); spanM.innerHTML = tow(minute); spanS.innerHTML = tow(second); } function tow(n) { return n >= 0 && n < 10 ? '0' + n : '' + n; }</script></body></html>

css：

(zzsc.cs)* {  margin: 0;  padding: 0;}.se-kl {  width: 190px;  height: 275px;  background-color: #e83632;  margin: 100px auto;  position: relative;}.se-cn {  position: absolute;  top: 42px;  left: 0;  width: 100%;  text-align: center;  font-size: 34px;  color: #fff;}.se-en {  position: absolute;  top: 90px;  left: 0;  width: 100%;  text-align: center;  font-size: 20px;  color: rgba(255, 255, 255, 0.5);}.se-io {  width: 20px;  height: 33px;  position: absolute;  background: url(../imgs/seckill.png) no-repeat;  background-position: -32.5px 0;  background-size: 52.5px 40px;  left: 85px;  top: 126px;  display: block;}.se-info {  position: absolute;  top: 170px;  text-align: center;  width: 100%;  font-size: 16px;  color: #fff;}.se-count {  position: absolute;  top: 212px;  left: 30px;  height: 40px;}.se-day {  display: none;}.se-hour,.se-min,.se-sec {  position: relative;  background-color: #2f3430;  width: 40px;  height: 40px;  float: left;  text-align: center;  line-height: 40px;  margin-right: 5px;}.se-txt {  font-size: 20px;  font-weight: bold;  color: #fff;}.se-txt:before {  content: "";  display: block;  position: absolute;  top: 50%;  left: 0;  width: 100%;  height: 1px;  background-color: #e83632;}

示例圖1：