js實(shí)現(xiàn)倒計(jì)時(shí)秒殺效果

更新時(shí)間：2020年03月25日 14:22:46 作者：菜菜無(wú)涯

這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)倒計(jì)時(shí)秒殺效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

實(shí)際項(xiàng)目中，需求一個(gè)倒計(jì)時(shí)秒殺功能，每天下午6點(diǎn)后，計(jì)算距離第二天上午10點(diǎn)的小時(shí)、分鐘、秒數(shù)，計(jì)時(shí)到第二天上午10點(diǎn)后開(kāi)啟搶購(gòu)功能；代碼如下：

<!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ì)算剩余的小時(shí) 
 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("開(kāi)始搶購(gòu)");
 } 
 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ù)為指定的日期和時(shí)間，計(jì)時(shí)就開(kāi)啟了！

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

一文掌握new?Date()?方法
大家平時(shí)在開(kāi)發(fā)的時(shí)候有沒(méi)被new?Date()折磨過(guò)，反正我是踩過(guò)很多坑，今天小編通過(guò)本文給大家詳細(xì)講解下new?date()方法應(yīng)用思考，感興趣的朋友一起看看吧
2023-04-04
JavaScript和Vue分別實(shí)現(xiàn)逐字彈出(打字機(jī))效果
這篇文章主要為大家詳細(xì)介紹了如何通過(guò)CSS、JavaScript和Vue分別實(shí)現(xiàn)逐字彈出(打字機(jī))效果,文中的示例代碼講解詳細(xì),需要的小伙伴可以參考一下
2024-01-01
JavaScript中的變量提升和函數(shù)提升
這篇文章主要介紹了JavaScript中的變量提升和函數(shù)提升，在js中對(duì)變量進(jìn)行操作后打印值經(jīng)常會(huì)出現(xiàn)undefined的現(xiàn)象。其實(shí)原因是因?yàn)閖s中有一個(gè)叫做變量提升的功能
2022-07-07
微信小程序自定義tabbar欄實(shí)現(xiàn)過(guò)程講解
tabBar相對(duì)而言用的還是比較多的,但是用起來(lái)并沒(méi)有難,下面這篇文章主要給大家介紹了關(guān)于微信小程序全局配置之tabBar的相關(guān)資料,文中通過(guò)圖文以及示例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-02-02
前端使用JS內(nèi)置Blob實(shí)現(xiàn)下載各種形式的文件實(shí)例
通過(guò)使用JavaScript我們可以很方便地實(shí)現(xiàn)文件的下載功能,這篇文章主要給大家介紹了關(guān)于前端使用JS內(nèi)置Blob實(shí)現(xiàn)下載各種形式文件的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下
2024-06-06
xmlplus組件設(shè)計(jì)系列之分隔框（DividedBox)（8）
xmlplus 是一個(gè)JavaScript框架，用于快速開(kāi)發(fā)前后端項(xiàng)目。這篇文章主要介紹了xmlplus布局類組件之分隔框，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-05-05
layui2.0使用table+laypage實(shí)現(xiàn)真分頁(yè)
這篇文章主要為大家詳細(xì)介紹了layui2.0使用table+laypage實(shí)現(xiàn)真分頁(yè)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-07-07
js獲取某月的最后一天日期的簡(jiǎn)單實(shí)例
js獲取某月的最后一天日期的簡(jiǎn)單實(shí)例，需要的朋友可以參考一下
2013-06-06
TypeScript在Vuex4中使用TS實(shí)戰(zhàn)分享
這篇文章主要介紹了TypeScript在Vuex4中使用TS實(shí)戰(zhàn)分享，vuex4類型?Api分析和vuex4實(shí)戰(zhàn)兩部分講述，需要的小伙伴可以參考一下
2022-06-06
簡(jiǎn)體中文轉(zhuǎn)換繁體中文(實(shí)現(xiàn)代碼)
本篇文章主要是對(duì)簡(jiǎn)體中文轉(zhuǎn)換繁體中文的實(shí)現(xiàn)代碼進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助
2013-12-12