您好,登錄后才能下訂單哦!
今天就跟大家聊聊有關(guān)JavaScript中如何實(shí)現(xiàn)限時(shí)秒殺和定時(shí)跳轉(zhuǎn)以及改變盒子大小,可能很多人都不太了解,為了讓大家更加了解,小編給大家總結(jié)了以下內(nèi)容,希望大家根據(jù)這篇文章可以有所收獲。
前言
今天來給大家盤點(diǎn)三個(gè)JavaScript案例,分別是實(shí)現(xiàn)限時(shí)秒殺、定時(shí)跳轉(zhuǎn)、改變盒子大小案例,一起來看看吧!
1.在淘寶網(wǎng)中,商家為了促銷經(jīng)常搞一些活動(dòng),例如限時(shí)秒殺是常見的一種活動(dòng),來增加消費(fèi)者購(gòu)買商品。
2.實(shí)現(xiàn)限時(shí)秒殺案例,具體代碼如下所示:
<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ù)。
*{ 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表示中間。
//設(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í)間是否到期,如果沒到期,計(jì)算剩余天數(shù)、小時(shí)、分鐘、秒數(shù)。如果到期清除計(jì)時(shí)器。
使用document.getElementById()方法根據(jù)指定的Id對(duì)象插入相應(yīng)的內(nèi)容。
效果圖如下所示:
1.在現(xiàn)實(shí)生活中,用戶付款成功后,頁(yè)面停留幾秒鐘顯示信息,之后,返回到首頁(yè)。小編帶大家一起來學(xué)習(xí)利用定時(shí)器實(shí)現(xiàn)跳轉(zhuǎn)的效果!
2.實(shí)現(xiàn)定時(shí)跳轉(zhuǎn)案例,具體代碼如下所示:
<div style="text-align: center;"> <h2>定時(shí)跳轉(zhuǎn)</h2> <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è)面布局,h2標(biāo)簽表示大標(biāo)題,a標(biāo)簽表示定義超鏈接,span是行內(nèi)元素。
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è)面。
效果圖如下所示:
1.在Web項(xiàng)目開發(fā)中,用戶根據(jù)不同操作修改顯示的內(nèi)容、CSS樣式是最常見的功能。小編帶大家一起來學(xué)習(xí)一個(gè)改變盒子大小的案例!
2.實(shí)現(xiàn)改變盒子大小的案例,具體代碼如下所示:
<div id="box" style="width:100px;height:100px;background:burlywood;">點(diǎn)我發(fā)生變化</div>
在上面代碼中,實(shí)現(xiàn)一個(gè)寬和高為100px的div,id為box。
//獲取指定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用來存儲(chǔ)點(diǎn)擊的次數(shù),為box添加點(diǎn)擊事件并處理,如果num的值為偶數(shù),盒子變小。如果num的值為奇數(shù),盒子變大。
在JavaScript中,實(shí)現(xiàn)限時(shí)秒殺、定時(shí)跳轉(zhuǎn)案例主要幫助理解定時(shí)器的使用,改變盒子大小案例主要是幫助理解如何去修改顯示的內(nèi)容、CSS樣式操作。
看完上述內(nèi)容,你們對(duì)JavaScript中如何實(shí)現(xiàn)限時(shí)秒殺和定時(shí)跳轉(zhuǎn)以及改變盒子大小有進(jìn)一步的了解嗎?如果還想了解更多知識(shí)或者相關(guān)內(nèi)容,請(qǐng)關(guān)注億速云行業(yè)資訊頻道,感謝大家的支持。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。