盤(pán)點(diǎn)三個(gè)JavaScript案例—實(shí)現(xiàn)限時(shí)秒殺、定時(shí)跳轉(zhuǎn)、改變盒子大小
前言
今天來(lái)給大家盤(pán)點(diǎn)三個(gè)JavaScript案例，分別是實(shí)現(xiàn)限時(shí)秒殺、定時(shí)跳轉(zhuǎn)、改變盒子大小案例，一起來(lái)看看吧!
一、實(shí)現(xiàn)限時(shí)秒殺案例
1.在淘寶網(wǎng)中，商家為了促銷(xiāo)經(jīng)常搞一些活動(dòng)，例如限時(shí)秒殺是常見(jiàn)的一種活動(dòng)，來(lái)增加消費(fèi)者購(gòu)買(mǎi)商品。
2.實(shí)現(xiàn)限時(shí)秒殺案例，具體代碼如下所示：
HTML
- <div class="box">
- <div style="width:190px">距離5/20號(hào)限時(shí)秒殺還有</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í)、分鐘、秒數(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，用于盒子模型提供很大的一個(gè)靈活性。
flex-direction屬性表示控制主軸的方向，row表示水平方向。
justify-content屬性表示項(xiàng)目在主軸上的對(duì)齊方式，center表示中間。
align-items屬性表示項(xiàng)目在交叉軸上對(duì)齊方式，center表示中間。
JavaScript
- //設(shè)置秒殺結(jié)束時(shí)間
- var endTime = new Date('2021', '4', '20'); //指定日期
- var endSec = endTime.getTime(); //指定日期的毫秒數(shù)
- // 聲明變量保存剩余的時(shí)間
- var d = h = m = s = 0;
- // 設(shè)置定時(shí)器，實(shí)現(xiàn)限時(shí)秒殺效果
- var id = setInterval(show, 1000);
- function show() {
- var nowtime = new Date(); // 獲取當(dāng)前時(shí)間
- // 獲取時(shí)間差，單位秒
- var gain = parseInt((endSec - nowtime.getTime()) / 1000);
- // 判斷秒殺時(shí)間是否到期
- if (gain > 0) {
- // 計(jì)算剩余天數(shù)
- d = parseInt(gain / (60*60*24));
- // 計(jì)算剩余小時(shí)
- h = parseInt((gain / (60*60)) % 24);
- // 計(jì)算剩余分鐘
- m = parseInt((gain / 60) % 60);
- // 計(jì)算剩余秒
- s = parseInt(gain % 60);
- } else {
- clearInterval(id); // 清除定時(shí)器
- d = h = m = s = '00';
- }
- // 將剩余的天、小時(shí)、分鐘、秒顯示在網(wǎng)頁(yè)中
- document.getElementById('day').innerHTML = d + '天';
- document.getElementById('hour').innerHTML = h + '時(shí)';
- document.getElementById('minute').innerHTML = m + '分';
- document.getElementById('second').innerHTML = s + '秒';
- }
在上面代碼中，首先是創(chuàng)建秒殺結(jié)束時(shí)間，利用Date對(duì)象的getTime()方法分別獲取結(jié)束秒殺的時(shí)間和當(dāng)前時(shí)間的毫秒數(shù)。判斷秒殺時(shí)間是否到期，如果沒(méi)到期，計(jì)算剩余天數(shù)、小時(shí)、分鐘、秒數(shù)。如果到期清除計(jì)時(shí)器。
使用document.getElementById()方法根據(jù)指定的Id對(duì)象插入相應(yīng)的內(nèi)容。
效果圖如下所示：
二、實(shí)現(xiàn)定時(shí)跳轉(zhuǎn)案例
1.在現(xiàn)實(shí)生活中，用戶(hù)付款成功后，頁(yè)面停留幾秒鐘顯示信息，之后，返回到首頁(yè)。小編帶大家一起來(lái)學(xué)習(xí)利用定時(shí)器實(shí)現(xiàn)跳轉(zhuǎn)的效果!
2.實(shí)現(xiàn)定時(shí)跳轉(zhuǎn)案例，具體代碼如下所示：
HTML
- <div style="text-align: center;">
- <h1>定時(shí)跳轉(zhuǎn)</h1>
- <a href="https://www.baidu.com/">
- <span id="sec">5</span>秒后自動(dòng)跳轉(zhuǎn)頁(yè)面或點(diǎn)擊鏈接跳轉(zhuǎn)
- </a>
- </div>
在上面代碼中，實(shí)現(xiàn)簡(jiǎn)單的頁(yè)面布局，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ù)計(jì)數(shù)。如果小于0，直接跳轉(zhuǎn)到指定的頁(yè)面。
效果圖如下所示：
三、實(shí)現(xiàn)改變盒子大小案例
1.在Web項(xiàng)目開(kāi)發(fā)中，用戶(hù)根據(jù)不同操作修改顯示的內(nèi)容、CSS樣式是最常見(jiàn)的功能。小編帶大家一起來(lái)學(xué)習(xí)一個(gè)改變盒子大小的案例!
2.實(shí)現(xiàn)改變盒子大小的案例，具體代碼如下所示：
HTML
- <div id="box" style="width:100px;height:100px;background:burlywood;">點(diǎn)我發(fā)生變化</div>
在上面代碼中，實(shí)現(xiàn)一個(gè)寬和高為100px的div，id為box。
JavaScript
- //獲取指定Id為box對(duì)象
- var box = document.getElementById('box');
- //存儲(chǔ)點(diǎn)擊的次數(shù)
- var num = 0;
- // 處理點(diǎn)擊事件
- box.onclick = function() {
- num++;
- // 點(diǎn)擊次數(shù)是奇數(shù)，盒子變大
- if (num % 2) {
- this.style.width = '250px';
- this.style.height = '250px';
- this.innerHTML = '大盒子';
- } else {
- // 點(diǎn)擊次數(shù)是偶數(shù)，盒子變小
- this.style.width = '100px';
- this.style.height = '100px';
- this.innerHTML = '小盒子';
- }
- };
在上面代碼中，首先是使用document.getElementById()方法獲取id為box，定義一個(gè)num用來(lái)存儲(chǔ)點(diǎn)擊的次數(shù)，為box添加點(diǎn)擊事件并處理，如果num的值為偶數(shù)，盒子變小。如果num的值為奇數(shù)，盒子變大。
本文案例參考《JavaScript前端開(kāi)發(fā)案例教程》，黑馬程序員編著
四、總結(jié)
1.本文基于JavaScript基礎(chǔ)，實(shí)現(xiàn)限時(shí)秒殺、定時(shí)跳轉(zhuǎn)、改變盒子大小的功能。對(duì)每一個(gè)div層進(jìn)行詳解，讓讀者更好的理解。
2.在JavaScript中，實(shí)現(xiàn)限時(shí)秒殺、定時(shí)跳轉(zhuǎn)案例主要幫助理解定時(shí)器的使用，改變盒子大小案例主要是幫助理解如何去修改顯示的內(nèi)容、CSS樣式操作。
3.代碼沒(méi)有那么復(fù)雜，希望對(duì)你有所幫助!
