真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯(lián)網(wǎng)站制作重慶分公司

JavaScript中如何實(shí)現(xiàn)限時(shí)秒殺和定時(shí)跳轉(zhuǎn)以及改變盒子大小

今天就跟大家聊聊有關(guān)JavaScript中如何實(shí)現(xiàn)限時(shí)秒殺和定時(shí)跳轉(zhuǎn)以及改變盒子大小，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

創(chuàng)新互聯(lián)服務(wù)項(xiàng)目包括富平網(wǎng)站建設(shè)、富平網(wǎng)站制作、富平網(wǎng)頁制作以及富平網(wǎng)絡(luò)營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，富平網(wǎng)站推廣取得了明顯的社會(huì)效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到富平省份的部分城市，未來相信會(huì)繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！

前言

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

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

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

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

HTML

             距離5/20號(hào)限時(shí)秒殺還有
             
              
                                     

在上面代碼中，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)目在主軸上的對齊方式，center表示中間。

align-items屬性表示項(xiàng)目在交叉軸上對齊方式，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)頁中                 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對象的getTime()方法分別獲取結(jié)束秒殺的時(shí)間和當(dāng)前時(shí)間的毫秒數(shù)。判斷秒殺時(shí)間是否到期，如果沒到期，計(jì)算剩余天數(shù)、小時(shí)、分鐘、秒數(shù)。如果到期清除計(jì)時(shí)器。

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

效果圖如下所示：

JavaScript中如何實(shí)現(xiàn)限時(shí)秒殺和定時(shí)跳轉(zhuǎn)以及改變盒子大小

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

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

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

HTML

             
定時(shí)跳轉(zhuǎn)
             
在上面代碼中，首先是使用document.getElementById()方法獲取id為sec，將初始化的秒數(shù)減一使用innerHTML方法插入到id為sec位置。
判斷秒數(shù)是否大于0，如果大于0，繼續(xù)計(jì)數(shù)。如果小于0，直接跳轉(zhuǎn)到指定的頁面。
效果圖如下所示：
JavaScript中如何實(shí)現(xiàn)限時(shí)秒殺和定時(shí)跳轉(zhuǎn)以及改變盒子大小
三、實(shí)現(xiàn)改變盒子大小案例
1.在Web項(xiàng)目開發(fā)中，用戶根據(jù)不同操作修改顯示的內(nèi)容、CSS樣式是最常見的功能。小編帶大家一起來學(xué)習(xí)一個(gè)改變盒子大小的案例!
2.實(shí)現(xiàn)改變盒子大小的案例，具體代碼如下所示：
HTML
點(diǎn)我發(fā)生變化
在上面代碼中，實(shí)現(xiàn)一個(gè)寬和高為100px的div，id為box。
JavaScript
//獲取指定Id為box對象     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)以及改變盒子大小
在JavaScript中，實(shí)現(xiàn)限時(shí)秒殺、定時(shí)跳轉(zhuǎn)案例主要幫助理解定時(shí)器的使用，改變盒子大小案例主要是幫助理解如何去修改顯示的內(nèi)容、CSS樣式操作。
看完上述內(nèi)容，你們對JavaScript中如何實(shí)現(xiàn)限時(shí)秒殺和定時(shí)跳轉(zhuǎn)以及改變盒子大小有進(jìn)一步的了解嗎？如果還想了解更多知識(shí)或者相關(guān)內(nèi)容，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝大家的支持。
            
            
                        

            當(dāng)前題目：JavaScript中如何實(shí)現(xiàn)限時(shí)秒殺和定時(shí)跳轉(zhuǎn)以及改變盒子大小            

            網(wǎng)頁路徑：http://weahome.cn/article/ihicio.html
        
    






    

        

            
                
                
在線咨詢

            
        

    

    

        
微信咨詢

        

    

    

        
電話咨詢

        

            
028-86922220（工作日）

            
18980820575（7×24）

        

    

    

        

            
                
提交需求

            
        

    

    

        

            
                
返回頂部