前言

今天來給大家盤點三個JavaScript案例，分別是實現(xiàn)限時秒殺、定時跳轉(zhuǎn)、改變盒子大小案例，一起來看看吧！

一、實現(xiàn)限時秒殺案例

1.在淘寶網(wǎng)中，商家為了促銷經(jīng)常搞一些活動，例如限時秒殺是常見的一種活動，來增加消費者購買商品。

2.實現(xiàn)限時秒殺案例，具體代碼如下所示：

HTML

<div class="box"><div style="width:190px">距離5/20號限時秒殺還有</div><div id="day"></div> <div id="hour"></div> <div id="minute"></div><div id="second"></div> </div>

在上面代碼中，id為day、hour、minute、second分別表示剩余的天數(shù)、小時、分鐘、秒數(shù)。

CSS

*{margin: 0;padding: 0;}.box {width: 702px;height: 378px;display: flex;flex-direction: row;align-items: center;justify-content: center;text-align: center;border: 1px solid #000;}.box div {display: flex;color: royalblue;width: 50px;height: 50px;border: 1px solid #ccc;align-items: center;justify-content: center;}

在上面代碼中，使用彈性布局display：flex，用于盒子模型提供很大的一個靈活性。

flex-direction屬性表示控制主軸的方向，row表示水平方向。

justify-content屬性表示項目在主軸上的對齊方式，center表示中間。

align-items屬性表示項目在交叉軸上對齊方式，center表示中間。

JavaScript

//設(shè)置秒殺結(jié)束時間var endTime = new Date('2021', '4', '20'); //指定日期var endSec = endTime.getTime(); //指定日期的毫秒數(shù)// 聲明變量保存剩余的時間var d = h = m = s = 0;// 設(shè)置定時器，實現(xiàn)限時秒殺效果var id = setInterval(show, 1000);function show() {var nowtime = new Date(); // 獲取當(dāng)前時間// 獲取時間差，單位秒var gain = parseInt((endSec - nowtime.getTime()) / 1000);// 判斷秒殺時間是否到期if (gain > 0) {// 計算剩余天數(shù)d = parseInt(gain / (60*60*24)); // 計算剩余小時h = parseInt((gain / (60*60)) % 24); // 計算剩余分鐘m = parseInt((gain / 60) % 60); // 計算剩余秒s = parseInt(gain % 60); } else {clearInterval(id); // 清除定時器d = h = m = s = '00';}// 將剩余的天、小時、分鐘、秒顯示在網(wǎng)頁中document.getElementById('day').innerHTML = d + '天';document.getElementById('hour').innerHTML = h + '時';document.getElementById('minute').innerHTML = m + '分';document.getElementById('second').innerHTML = s + '秒';}

在上面代碼中，首先是創(chuàng)建秒殺結(jié)束時間，利用Date對象的getTime()方法分別獲取結(jié)束秒殺的時間和當(dāng)前時間的毫秒數(shù)。判斷秒殺時間是否到期，如果沒到期，計算剩余天數(shù)、小時、分鐘、秒數(shù)。如果到期清除計時器。

使用document.getElementById()方法根據(jù)指定的Id對象插入相應(yīng)的內(nèi)容。

效果圖如下所示：

二、實現(xiàn)定時跳轉(zhuǎn)案例

1.在現(xiàn)實生活中，用戶付款成功后，頁面停留幾秒鐘顯示信息，之后，返回到首頁。小編帶大家一起來學(xué)習(xí)利用定時器實現(xiàn)跳轉(zhuǎn)的效果！

2.實現(xiàn)定時跳轉(zhuǎn)案例，具體代碼如下所示：

HTML

<div style="text-align: center;"><h1>定時跳轉(zhuǎn)</h1><a href="https://www.baidu.com/"><span id="sec">5</span>秒后自動跳轉(zhuǎn)頁面或點擊鏈接跳轉(zhuǎn)</a> </div>

在上面代碼中，實現(xiàn)簡單的頁面布局，h1標(biāo)簽表示大標(biāo)題，a標(biāo)簽表示定義超鏈接，span是行內(nèi)元素。

JavaScript

function jump(sec,url){var sec=document.getElementById("sec").innerHTML=--sec;if(sec>0){setTimeout('jump('+sec+',\''+url+'\') ',1000)}else{location.href=url;} } jump(5,"https://www.baidu.com/")

在上面代碼中，首先是使用document.getElementById()方法獲取id為sec，將初始化的秒數(shù)減一使用innerHTML方法插入到id為sec位置。

判斷秒數(shù)是否大于0，如果大于0，繼續(xù)計數(shù)。如果小于0，直接跳轉(zhuǎn)到指定的頁面。

效果圖如下所示：

三、實現(xiàn)改變盒子大小案例

1.在Web項目開發(fā)中，用戶根據(jù)不同操作修改顯示的內(nèi)容、CSS樣式是最常見的功能。小編帶大家一起來學(xué)習(xí)一個改變盒子大小的案例！

2.實現(xiàn)改變盒子大小的案例，具體代碼如下所示：

HTML

<div id="box" style="width:100px;height:100px;background:burlywood;">點我發(fā)生變化</div>

在上面代碼中，實現(xiàn)一個寬和高為100px的div，id為box。

JavaScript

//獲取指定Id為box對象var box = document.getElementById('box');//存儲點擊的次數(shù)var num = 0; // 處理點擊事件box.onclick = function() { num++;// 點擊次數(shù)是奇數(shù)，盒子變大if (num % 2) { this.style.width = '250px';this.style.height = '250px';this.innerHTML = '大盒子';} else {// 點擊次數(shù)是偶數(shù)，盒子變小this.style.width = '100px';this.style.height = '100px';this.innerHTML = '小盒子';}};

在上面代碼中，首先是使用document.getElementById()方法獲取id為box，定義一個num用來存儲點擊的次數(shù)，為box添加點擊事件并處理，如果num的值為偶數(shù)，盒子變小。如果num的值為奇數(shù)，盒子變大。

本文案例參考《JavaScript前端開發(fā)案例教程》，黑馬程序員編著

四、總結(jié)

1.本文基于JavaScript基礎(chǔ)，實現(xiàn)限時秒殺、定時跳轉(zhuǎn)、改變盒子大小的功能。對每一個div層進(jìn)行詳解，讓讀者更好的理解。

2.在JavaScript中，實現(xiàn)限時秒殺、定時跳轉(zhuǎn)案例主要幫助理解定時器的使用，改變盒子大小案例主要是幫助理解如何去修改顯示的內(nèi)容、CSS樣式操作。

3.代碼沒有那么復(fù)雜，希望對你有所幫助！

將文中的代碼塊組織在一起，就是給個案例的完整代碼了，小編在這里就不單獨提供代碼文件啦，記得添加小編微信，有問題可以隨時聯(lián)系小編進(jìn)行解決哈~

IT技術(shù)分享社區(qū)

個人博客網(wǎng)站：https://programmerblog.xyz

文章推薦程序員效率：畫流程圖常用的工具程序員效率：整理常用的在線筆記軟件遠(yuǎn)程辦公：常用的遠(yuǎn)程協(xié)助軟件，你都知道嗎？51單片機(jī)程序下載、ISP及串口基礎(chǔ)知識硬件：斷路器、接觸器、繼電器基礎(chǔ)知識

總結(jié)

以上是生活随笔為你收集整理的盘点三个JavaScript案例——实现限时秒杀、定时跳转、改变盒子大小的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。