商城倒计时代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>商城倒計(jì)時(shí)</title><style>*{margin: 0px;padding: 0px}body{width: 100%;height: 100%;background: #333;}.box{width:200px;height:280px;margin: 0 auto;background: url("../image/countdownBg.png") no-repeat center;background-size: 100% 100%;margin-top:100px}.countDown{padding:20px 0}.countDown .title{font-size:34px;color: #ffffff;text-align: center}.countDown .titleEn{font-size: 20px;text-align: center;color: rgba(255,255,255,0.3);}.countDown .bolt{width: 20px;height: 35px;background: url(../image/bolt.png) no-repeat center;margin: 20px auto;}.countDown .countDownOver{font-size: 16px; text-align: center;color: #ffffff;}.countDown .countDownTime {width: 175px;height: 40px;background: url(../image/countDownTime.png) no-repeat center; margin: 20px auto 0 auto;}.countDown .countDownTime p { font-size: 26px;color: #ffffff;font-weight: bold; float: left;width: 40px;height: 40px;text-align: center;line-height: 40px;margin-right: 5px;}.countDown .countDownTime p:last-child{margin-right: 0px}</style>
</head>
<body>
<div class="box"><div class="countDown"><h1 class="title">陽光采購(gòu)</h1><p class="titleEn">FLASH DEALS</p><div class="bolt"></div><p class="countDownOver"></p><div class="countDownTime clearfix"></div></div>
</div>
</body>
<script src="../js/jquery-2.2.4.min.js"></script>
<script>
// 注意的坑
// 1.當(dāng)前的時(shí)間獲取一次,是一個(gè)定值，必須使用定時(shí)器才能時(shí)刻變化當(dāng)前的時(shí)間。所以要以參數(shù)的形式傳進(jìn)去
// 2.給出的時(shí)間格式 參數(shù)有5種//new Date("month dd,yyyy hh:mm:ss");//new Date("month dd,yyyy");//new Date(yyyy,mth,dd,hh,mm,ss);//new Date(yyyy,mth,dd);//new Date(ms);
// 3.從后臺(tái)拿到的數(shù)據(jù)一般為字符串，時(shí)間格式不支持
// 1.如果是時(shí)間戳的話，可以使用 number和parseInt進(jìn)行轉(zhuǎn)換
// 2.如果是2009-6-28 15:23格式，可以使用正則進(jìn)行轉(zhuǎn)換，str.replace(/-/g,"/") <解釋：/-/g 是正則表達(dá)式表示將所有短橫線-替換為斜杠/其中g(shù)表示全局替換>
// 4.veracityTime 時(shí)間差，如果想要精確的時(shí)間控制，是不能依賴于JavaScript的setTimeout或者setInterval函數(shù)的
// 5.setInterval()是在每隔指定的毫秒數(shù)循環(huán)調(diào)用函數(shù)或表達(dá)式，直到clearInterval把它清除，所以當(dāng)我們定時(shí)器設(shè)置之后，當(dāng)不需要進(jìn)行定時(shí)器的時(shí)候，則用clear進(jìn)行清空定時(shí)器。$(function () {var start_time=new Date("2018","7","8","14"); //開始的時(shí)間 月份只有0-11，所以要減一；var end_time=new Date("2018","7","8","14"); //結(jié)束的時(shí)間function lastTime(times,nowTime) { //將時(shí)間進(jìn)行換算 times指的是時(shí)間開始時(shí)間或結(jié)束時(shí)間，nowTime只的是當(dāng)前的時(shí)間var differenceTime=-480-nowTime.getTimezoneOffset(); //北京時(shí)間和地區(qū)的時(shí)間差，一般為0var leftTime=(times.getTime()-nowTime.getTime()+differenceTime*60000); //相差的時(shí)間戳var day=Math.floor(leftTime/(1000*60*60*24));var hour = Math.floor(leftTime / (1000 * 3600)) - (day * 24);var minute = Math.floor(leftTime / (1000 * 60)) - (day * 24 * 60) - (hour * 60);var second = Math.floor(leftTime / (1000)) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60);$('.countDownTime').html('<p class="day">'+(day<10?"0"+day:day)+'</p><p class="hour">'+(hour<10?"0"+hour:hour)+'</p><p class="minute">'+(minute<10?"0"+minute:minute)+'</p><p class="second">'+(second<10?"0"+second:second)+'</p>')}function setLeftTime() {
// 開始時(shí)間肯定比結(jié)束時(shí)間小 所以就沒做判斷var now_Time=new Date(); //當(dāng)前時(shí)間應(yīng)該隨時(shí)變化，用定時(shí)器進(jìn)行刷新var veracityTime=now_Time.getMinutes() + ':' + now_Time.getSeconds() + ':' + now_Time.getMilliseconds();console.log(veracityTime);//使用定時(shí)器計(jì)算毫秒數(shù) 驗(yàn)證js的準(zhǔn)確性if(now_Time<start_time){ //當(dāng)現(xiàn)在的時(shí)間小于開始的時(shí)間$('.countDownOver').html("距離抽獎(jiǎng)還有");lastTime(start_time,now_Time)}else if(now_Time<end_time){//當(dāng)現(xiàn)在的時(shí)間大于開始的時(shí)間小于現(xiàn)在結(jié)尾的時(shí)間$('.countDownOver').html("距離抽獎(jiǎng)結(jié)束還有");lastTime(end_time,now_Time)}else { //當(dāng)現(xiàn)在的時(shí)間大于結(jié)束的時(shí)間，說明活動(dòng)結(jié)束。$('.countDownOver').html("敬請(qǐng)期待");lastTime(now_Time,now_Time);clearInterval(i);}}setLeftTime();var i=setInterval(setLeftTime,1000)});
</script>
</html>
對(duì)應(yīng)的背景圖片：
總結(jié)
- 上一篇： flash 实例教程
- 下一篇： xp系统怎么开启usb服务器,windo