js實現(xiàn)倒計時秒殺效果
更新時間：2020年03月25日 14:22:46 作者：菜菜無涯
這篇文章主要為大家詳細介紹了js實現(xiàn)倒計時秒殺效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
實際項目中，需求一個倒計時秒殺功能，每天下午6點后，計算距離第二天上午10點的小時、分鐘、秒數(shù)，計時到第二天上午10點后開啟搶購功能；代碼如下：
<!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()); //計算剩余的毫秒數(shù)
var days = parseInt(leftTime / 1000 / 60 / 60 / 24 , 10); //計算剩余的天數(shù)
var hours = parseInt(leftTime / 1000 / 60 / 60 % 24 , 10); //計算剩余的小時
var minutes = parseInt(leftTime / 1000 / 60 % 60, 10);//計算剩余的分鐘
var seconds = parseInt(leftTime / 1000 % 60, 10);//計算剩余的秒數(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ù)為指定的日期和時間，計時就開啟了！
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
大家平時在開發(fā)的時候有沒被new?Date()折磨過，反正我是踩過很多坑，今天小編通過本文給大家詳細講解下new?date()方法應用思考，感興趣的朋友一起看看吧2023-04-04
JavaScript和Vue分別實現(xiàn)逐字彈出(打字機)效果
這篇文章主要為大家詳細介紹了如何通過CSS、JavaScript和Vue分別實現(xiàn)逐字彈出(打字機)效果,文中的示例代碼講解詳細,需要的小伙伴可以參考一下2024-01-01
這篇文章主要介紹了JavaScript中的變量提升和函數(shù)提升，在js中對變量進行操作后打印值經(jīng)常會出現(xiàn)undefined的現(xiàn)象。其實原因是因為js中有一個叫做變量提升的功能2022-07-07
tabBar相對而言用的還是比較多的,但是用起來并沒有難,下面這篇文章主要給大家介紹了關(guān)于微信小程序全局配置之tabBar的相關(guān)資料,文中通過圖文以及示例代碼介紹的非常詳細,需要的朋友可以參考下2023-02-02
前端使用JS內(nèi)置Blob實現(xiàn)下載各種形式的文件實例
通過使用JavaScript我們可以很方便地實現(xiàn)文件的下載功能,這篇文章主要給大家介紹了關(guān)于前端使用JS內(nèi)置Blob實現(xiàn)下載各種形式文件的相關(guān)資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-06-06
xmlplus組件設計系列之分隔框（DividedBox)（8）
xmlplus 是一個JavaScript框架，用于快速開發(fā)前后端項目。這篇文章主要介紹了xmlplus布局類組件之分隔框，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
layui2.0使用table+laypage實現(xiàn)真分頁
這篇文章主要為大家詳細介紹了layui2.0使用table+laypage實現(xiàn)真分頁，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-07-07
js獲取某月的最后一天日期的簡單實例，需要的朋友可以參考一下2013-06-06
TypeScript在Vuex4中使用TS實戰(zhàn)分享
這篇文章主要介紹了TypeScript在Vuex4中使用TS實戰(zhàn)分享，vuex4類型?Api分析和vuex4實戰(zhàn)兩部分講述，需要的小伙伴可以參考一下2022-06-06
本篇文章主要是對簡體中文轉(zhuǎn)換繁體中文的實現(xiàn)代碼進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12