JavaScript模擬實現(xiàn)"雙11"限時秒殺效果
【案例】限時秒殺
代碼實現(xiàn)思路：
① 設(shè)計限時秒殺頁面。
② 指定限時秒殺的結(jié)束時間，及其對應(yīng)的毫秒數(shù)。
③ 獲取當(dāng)前時間的毫秒數(shù)。
④ 計算當(dāng)前與秒殺結(jié)束的時間差，大于0，計算剩余的天時分秒；否則結(jié)束秒殺。
⑤ 利用定時器完成秒殺的倒計時功能。
⑥ 利用兩位數(shù)字顯示秒殺的時間。
代碼實現(xiàn)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>限時秒殺</title>
<style>
.box{margin:0 auto;position:relative;background:url(images/flash_sale.png);width:702px;height:378px;}
.box div{float:left;width:50px;height:50px;border:1px solid #ccc;margin-left:5px;line-height:50px;text-align: center;color:red;position:relative;top:260px;left:305px;}
</style>
</head>
<body>
<div class="box">
<div id="d"></div> <!-- 剩余的天數(shù) -->
<div id="h"></div> <!-- 剩余的小時 -->
<div id="m"></div> <!-- 剩余的分鐘 -->
<div id="s"></div> <!-- 剩余的秒數(shù) -->
</div>
<script>
// 設(shè)置秒殺結(jié)束時間
// var endtime = new Date('2017-11-10 18:51:00'), endseconds = endtime.getTime();
// 設(shè)置據(jù)當(dāng)前時間開始，秒殺的結(jié)束時間
var endtime = new Date(), endseconds = endtime.getTime() + 60 * 1000;
// 聲明變量保存剩余的時間
var d = h = m = s = 0;
// 設(shè)置定時器，實現(xiàn)限時秒殺效果
var id = setInterval(seckill, 1000);
function seckill() {
var nowtime = new Date(); // 獲取當(dāng)前時間
// 獲取時間差，單位秒
var remaining = parseInt((endseconds - nowtime.getTime()) / 1000);
// 判斷秒殺是否過期
if (remaining > 0) {
d = parseInt(remaining / 86400); // 計算剩余天數(shù)（除以60*60*24取整，獲取剩余的天數(shù)）
h = parseInt((remaining / 3600) % 24); // 計算剩余小時（除以60*60轉(zhuǎn)換為小時，與24取模，獲取剩余的小時）
m = parseInt((remaining / 60) % 60); // 計算剩余分鐘（除以60轉(zhuǎn)為分鐘，與60取模，獲取剩余的分鐘）
s = parseInt(remaining % 60); // 計算剩余秒（與60取模，獲取剩余的秒數(shù)）
// 統(tǒng)一利用兩位數(shù)表示剩余的天、小時、分鐘、秒
d = d < 10 ? '0' + d : d;
h = h < 10 ? '0' + h : h;
m = m < 10 ? '0' + m : m;
s = s < 10 ? '0' + s : s;
} else {
clearInterval(id); // 秒殺過期，取消定時器
d = h = m = s = '00';
}
// 將剩余的天、小時、分鐘和秒顯示到指定的網(wǎng)頁中
document.getElementById('d').innerHTML = d + '天';
document.getElementById('h').innerHTML = h + '時';
document.getElementById('m').innerHTML = m + '分';
document.getElementById('s').innerHTML = s + '秒';
}
</script>
</body>
</html>
一、全局作用域
window對象：是BOM中所有對象的核心，同時也是BOM中所有對象的父對象。
定義在全局作用域中的變量、函數(shù)以及JavaScript中的內(nèi)置函數(shù)都可以被window對象調(diào)用。
定義在全局作用域中的getArea()函數(shù)，函數(shù)體內(nèi)的this關(guān)鍵字指向window對象。
對于window對象的屬性和方法在調(diào)用時可以省略window，直接訪問其屬性和方法即可。
注意
在JavaScript中直接使用一個未聲明的變量會報語法錯誤，但是使用“window.變量名”的方式則不會報錯，而是獲得一個undefined結(jié)果。除此之外，delete關(guān)鍵字僅能刪除window對象自身的屬性，對于定義在全局作用域下的變量不起作用。
二、彈出對話框和窗口
window對象中除了前面提過的alert()和prompt()方法外，還提供了很多彈出對話框和窗口的方法，以及相關(guān)的操作屬性。
所有的屬性和方法在常見的瀏覽器（如IE、Chrome等）中全部支持。
prompt()方法
作用：用于生成用戶輸入的對話框。
第1個參數(shù)：用于設(shè)置用戶輸入的提示信息。
第2個參數(shù)：用于設(shè)置輸入框中的默認信息。
代碼實現(xiàn)
confirm()方法
作用：彈出一個確認對話框，該對話框中包含提示消息以及確認和取消按鈕。
參數(shù)：用于設(shè)置確認的提示信息。
返回值：點擊“確定”按鈕，返回true。點擊“取消”按鈕，返回false。
open()方法
作用：用于打開一個新的瀏覽器窗口，或查找一個已命名的窗口。
語法：open(URL, name, specs, replace)。
第1個參數(shù)：打開指定頁面的URL地址，若沒有指定，則打開一個新的空白窗口。
第2個參數(shù)：指定target屬性或窗口的名稱。
第3個參數(shù)：用于設(shè)置瀏覽器窗口的特征（如大小、位置、滾動條等），多個特征之間使用逗號分隔。
第4個參數(shù)：設(shè)置為true，表示替換瀏覽歷史中的當(dāng)前條目，設(shè)置false（默認值），表示在瀏覽歷史中創(chuàng)建新的條目。
注意
與open()方法功能相反的是close()方法，用于關(guān)閉瀏覽器窗口，調(diào)用該方法的對象就是需要關(guān)閉的窗口對象。
舉個例子
代碼實現(xiàn)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>打開和關(guān)閉窗口</title>
</head>
<body>
<p><input type="button" value="打開窗口" onclick="openWin()"></p>
<p><input type="button" value="關(guān)閉窗口" onclick="closeWin()"></p>
<p><input type="button" value="檢測窗口是否關(guān)閉" onclick="checkWin()"></p>
<p id="msg"></p>
<script>
var myWindow;
function openWin() {
myWindow = window.open('', 'newWin', 'width=400,height=200,left=200');
myWindow.document.write('<p>窗口名稱為：' + myWindow.name + '</p>');
myWindow.document.write('<p>當(dāng)前窗口的父窗口地址：' + window.parent.location + '</p>');
}
function closeWin() {
myWindow.close();
}
function checkWin() {
if (myWindow) {
var str = myWindow.closed ? '窗口已關(guān)閉！' : '窗口未關(guān)閉！';
} else {
var str = '窗口沒有被打開!';
}
document.getElementById('msg').innerHTML = str;
}
</script>
</body>
</html>
三、窗口位置和大小
BOM中用來獲取或更改window窗口位置，窗口高度與寬度，文檔區(qū)域高度與寬度的相關(guān)屬性和方法有很多。
目前只有window.open()方法打開的的窗口和選項卡（Tab），F(xiàn)ireFox和Chrome瀏覽器才支持口位置和大小的調(diào)整。
舉個例子
代碼實現(xiàn)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>窗口位置和大小</title>
</head>
<body>
<input type="button" value="打開窗口" onclick="openWin()">
<input type="button" value="調(diào)整窗口位置和大小" onclick="changeWin()">
<input type="button" value="再調(diào)整窗口位置和大小" onclick="changeWin1()">
<script>
var myWindow;
function openWin() {
myWindow = window.open('', 'newWin', 'width=250,height=300');
getPosSize(); // 獲取窗口信息
}
function changeWin() {
myWindow.moveBy(250, 250); // 將newWin窗口下移250像素，右移250像素
myWindow.focus(); // 獲取移動后newWin窗口的焦點
myWindow.resizeTo(500, 350); // 修改newWin窗口的寬度為500，高度為350
getPosSize(); // 獲取窗口信息
}
function changeWin1() {
myWindow.moveTo(250, 250); // 將newWin窗口下移250像素，右移250像素
myWindow.focus(); // 獲取移動后newWin窗口的焦點
myWindow.resizeBy(500, 350); // 修改newWin窗口的寬度為500，高度為350
getPosSize(); // 獲取窗口信息
}
function getPosSize() {
// 獲取相對于屏幕窗口的坐標(biāo)
var x = myWindow.screenLeft, y = myWindow.screenTop;
// 獲取窗口和文檔的高度和寬度
var inH = myWindow.innerHeight, inW = myWindow.innerWidth;
var outH = myWindow.outerHeight, outW = myWindow.outerWidth;
myWindow.document.write('<p>相對屏幕窗口的坐標(biāo)：(' + x + ',' + y + ')</p>');
myWindow.document.write('<p>文檔的高度和寬度：' + inH + ',' + inW + '</p>');
myWindow.document.write('<p>窗口的高度和寬度：' + outH + ',' + outW + '</p><hr>');
}
</script>
</body>
</html>
四、框架操作
window對象提供的frames屬性可通過集合的方式，獲取HTML頁面中所有的框架，length屬性就可以獲取當(dāng)前窗口中frames的數(shù)量。
除此之外，還可以利用parent獲取當(dāng)前window對象所在的父窗口。
五、定時器
JavaScript中可通過window對象提供的方法實現(xiàn)在指定時間后執(zhí)行特定操作，也可以讓程序代碼每隔一段時間執(zhí)行一次，實現(xiàn)間歇操作。
setTimeout()和setInterval()方法區(qū)別：
相同點：都可以在一個固定時間段內(nèi)執(zhí)行JavaScript程序代碼。
不同點：setTimeout()只執(zhí)行一次代碼，setInterval()會在指定的時間后，自動重復(fù)執(zhí)行代碼。
提示
setTimeout()方法在執(zhí)行一次后即停止了操作；setInterval()方法一旦開始執(zhí)行，在不加干涉的情況下，間歇調(diào)用將會一直執(zhí)行到頁面關(guān)閉為止。
若要在定時器啟動后，取消該操作，可以將setTimeout()的返回值（定時器ID）傳遞給clearTimeout()方法；或?qū)etInterval()的返回值傳遞給clearInterval()方法。
舉個例子
代碼實現(xiàn)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>計數(shù)器</title>
</head>
<body>
<input type="button" value="開始計數(shù)" onclick="startCount()">
<input id="num" type="text">
<input type="button" value="停止計數(shù)" onclick="stopCount()">
<script>
var timer = null, c = 0;
function timedCount() { // 在文本框中顯示數(shù)據(jù)
document.getElementById('num').value = c;
++c; // 顯示數(shù)據(jù)加1
}
function startCount() { // 開始間歇調(diào)用
timer = setInterval(timedCount, 1000);
}
function stopCount() { // 清除間歇調(diào)用
clearInterval(timer);
}
</script>
</body>
</html>以上就是JavaScript模擬實現(xiàn)"雙11"限時秒殺效果的詳細內(nèi)容，更多關(guān)于JavaScript限時秒殺的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
uniapp微信小程序底部動態(tài)tabBar的解決方案(自定義tabBar導(dǎo)航)
tabBar如果應(yīng)用是一個多tab應(yīng)用,可以通過tabBar配置項指定tab欄的表現(xiàn),以及tab切換時顯示的對應(yīng)頁,下面這篇文章主要給大家介紹了關(guān)于uniapp微信小程序底部動態(tài)tabBar的解決方案,需要的朋友可以參考下2022-04-04
這篇文章主要介紹了通過實例講解JS如何防抖動，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，,需要的朋友可以參考下2019-06-06
javascript 實現(xiàn)子父窗體互相傳值的簡單實例
本篇文章主要是對javascript 實現(xiàn)子父窗體互相傳值的簡單實例進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-02-02
這篇文章主要為大家詳細介紹了基于Bootstrap的簡單輪播圖的手機實現(xiàn),具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-10-10
本篇文章主要分享了js封裝tab標(biāo)簽頁的示例代碼，具有很好的參考價值，需要的朋友一起來看下吧2016-12-12
微信小程序?qū)崿F(xiàn)頂部固定 底部分頁滾動效果
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)頂部固定底部分頁滾動效果，本文大概給大家分享三種解決方案，每種方案給大家詳細剖析通過代碼解析哪種方案更適合，感興趣的朋友跟隨小編一起看看吧2022-10-10
JavaScript DSL 流暢接口(使用鏈式調(diào)用)實例
這篇文章主要介紹了JavaScript DSL 流暢接口(使用鏈式調(diào)用)實例,本文講解了DSL 流暢接口、DSL 表達式生成器等內(nèi)容,需要的朋友可以參考下2015-03-03
這篇文章主要為大家詳細介紹了微信小程序云開發(fā)之使用云數(shù)據(jù)庫，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-05-05
這篇文章主要介紹了js如何實現(xiàn)連個數(shù)字相加而不是拼接,需要的朋友可以參考下2014-02-02
本篇文章通過js和css結(jié)合實現(xiàn)簡單的吞噬效果，代碼簡單易懂，需要的朋友可以參考下本文2015-09-09