js實(shí)現(xiàn)倒計(jì)時秒殺效果
實(shí)際項(xiàng)目中,需求一個倒計(jì)時秒殺功能,每天下午6點(diǎn)后,計(jì)算距離第二天上午10點(diǎn)的小時、分鐘、秒數(shù),計(jì)時到第二天上午10點(diǎn)后開啟搶購功能;代碼如下:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="js/jquery-1.11.1.min.js"></script> </head> <body οnlοad="leftTimer();"> <p class="tit_right" style=""> <span id="h" style="">00</span> <span id="m" style="">00</span> <span id="s" style="">00</span> </p> <p style="" id="juli"></p> <script> function leftTimer(year,month,day,hour,minute,second){ var newDate = new Date(); var newDate1 = new Date(year,month-1,day,hour,minute,second); var leftTime = (new Date(year,month-1,day,hour,minute,second)) - (new Date()); //計(jì)算剩余的毫秒數(shù) var days = parseInt(leftTime / 1000 / 60 / 60 / 24 , 10); //計(jì)算剩余的天數(shù) var hours = parseInt(leftTime / 1000 / 60 / 60 % 24 , 10); //計(jì)算剩余的小時 var minutes = parseInt(leftTime / 1000 / 60 % 60, 10);//計(jì)算剩余的分鐘 var seconds = parseInt(leftTime / 1000 % 60, 10);//計(jì)算剩余的秒數(shù) if (seconds<0) { $(".tit_right").css('display', 'none'); $("#juli").text("開始搶購"); } else{ days = fix(days,2); hours = fix(hours,2); minutes = fix(minutes,2); seconds = fix(seconds,2); setTimeout("leftTimer(2017,2,21,11,0,0)",1000); document.getElementById("h").innerHTML=hours; document.getElementB yId("m").innerHTML=minutes; document.getElementById("s").innerHTML=seconds; } } //fix函數(shù):將1~9的1位數(shù)轉(zhuǎn)換成01~09的格式 function fix(num, length) { return ('' + num).length < length ? ((new Array(length + 1)).join('0') + num).slice(-length) : '' + num; } </script> </body> </html>
以上,在leftTimer() 函數(shù)里傳參,參數(shù)為指定的日期和時間,計(jì)時就開啟了!
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- JavaScript實(shí)現(xiàn)秒殺時鐘倒計(jì)時
- JS秒殺倒計(jì)時功能完整實(shí)例【使用jQuery3.1.1】
- js實(shí)現(xiàn)京東秒殺倒計(jì)時功能
- PHP+JS實(shí)現(xiàn)的商品秒殺倒計(jì)時用法示例
- javascript時間排序算法實(shí)現(xiàn)活動秒殺倒計(jì)時效果
- Javascript實(shí)現(xiàn)商品秒殺倒計(jì)時(時間與服務(wù)器時間同步)
- C#結(jié)合JavaScript實(shí)現(xiàn)秒殺倒計(jì)時的方法
- javascript 實(shí)現(xiàn) 秒殺,團(tuán)購 倒計(jì)時展示的記錄 分享
相關(guān)文章
js實(shí)現(xiàn)使用輸入input和改變change事件模擬手動輸入
聚焦于JavaScript中的輸入模擬技術(shù),本指南將帶你探索如何使用input和change事件來創(chuàng)造逼真的手動輸入效果,通過簡單的代碼實(shí)現(xiàn),你將掌握這一實(shí)用的技巧,為你的Web應(yīng)用增添交互的樂趣,需要的朋友可以參考下2024-03-03如何用JS/HTML將時間戳轉(zhuǎn)換為“xx天前”的形式
如果我們有一份過去時間戳,如何使用JS/HTML將時間戳轉(zhuǎn)換為“xx天前”的形式呢?很多朋友都覺得解決辦法有點(diǎn)困難,其實(shí)很簡單的,下面小編給大家分享完整的實(shí)現(xiàn)代碼,一起看看吧2017-02-02Bootstrap組件學(xué)習(xí)之導(dǎo)航、標(biāo)簽、面包屑導(dǎo)航(精品)
這篇文章主要介紹了Bootstrap組件學(xué)習(xí)之導(dǎo)航、標(biāo)簽、面包屑導(dǎo)航(精品)的相關(guān)資料,需要的朋友可以參考下2016-05-05擴(kuò)展IE中一些不兼容的方法如contains、startWith等等
擴(kuò)展IE中一些不兼容的方法如contains方法、startWith方法等等,下面是具體的實(shí)現(xiàn)代碼,喜歡的朋友可以參考下2014-01-01JavaScript數(shù)字和字符串轉(zhuǎn)換示例
這篇文章主要介紹了JavaScript數(shù)字和字符串轉(zhuǎn)換的應(yīng)用,需要的朋友可以參考下2014-03-03js使用棧來實(shí)現(xiàn)10進(jìn)制轉(zhuǎn)8進(jìn)制與取除數(shù)及余數(shù)
這篇文章主要介紹了js使用棧來實(shí)現(xiàn)10進(jìn)制轉(zhuǎn)8進(jìn)制、js取除數(shù)、余數(shù),需要的朋友可以參考下2014-06-06