[[393515]]

前言

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

一、實現限時秒殺案例

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

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

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分別表示剩余的天數、小時、分鐘、秒數。

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

//設置秒殺結束時間 
            var endTime = new Date('2021', '4', '20'); //指定日期 
            var endSec = endTime.getTime(); //指定日期的毫秒數 
 
            // 聲明變量保存剩余的時間 
            var d = h = m = s = 0; 
            // 設置定時器，實現限時秒殺效果 
            var id = setInterval(show, 1000); 
 
            function show() { 
                var nowtime = new Date(); // 獲取當前時間 
                // 獲取時間差，單位秒 
                var gain = parseInt((endSec - nowtime.getTime()) / 1000); 
                // 判斷秒殺時間是否到期 
                if (gain > 0) { 
                    // 計算剩余天數 
                    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'; 
                } 
                // 將剩余的天、小時、分鐘、秒顯示在網頁中 
                document.getElementById('day').innerHTML = d + '天'; 
                document.getElementById('hour').innerHTML = h + '時'; 
                document.getElementById('minute').innerHTML = m + '分'; 
                document.getElementById('second').innerHTML = s + '秒'; 
            } 

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

使用document.getElementById()方法根據指定的Id對象插入相應的內容。

效果圖如下所示：

二、實現定時跳轉案例

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

2.實現定時跳轉案例，具體代碼如下所示：

HTML

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

在上面代碼中，實現簡單的頁面布局，h1標簽表示大標題，a標簽表示定義超鏈接，span是行內元素。

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，將初始化的秒數減一使用innerHTML方法插入到id為sec位置。

判斷秒數是否大于0，如果大于0，繼續計數。如果小于0，直接跳轉到指定的頁面。

效果圖如下所示：

三、實現改變盒子大小案例

1.在Web項目開發中，用戶根據不同操作修改顯示的內容、CSS樣式是最常見的功能。小編帶大家一起來學習一個改變盒子大小的案例!

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

HTML

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

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

JavaScript

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

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

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

四、總結

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

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

3.代碼沒有那么復雜，希望對你有所幫助!