【Web API】BOM小案例

 

 

❶ 倒计时

<div class="box">
    <div class="hour">div>
    <div class="minute">div>
    <div class="second">div>
div>

<script>
    var hour = document.querySelector('.hour');
    var minute = document.querySelector('.minute');
    var second = document.querySelector('.second');
    var planTime = +new Date('2022-6-10 00:00:00');
    
    countDown(); // 一个小细节：打开页面的第一秒计时器函数未给盒子写入任何数字，我们先提前调用一次函数弥补这个空窗期
    var timer = setInterval(countDown, 1000);
   
    function countDown() { 							//倒计时函数
        var nowTime = +new Date();
        var times = (planTime - nowTime) / 1000; 	// times是剩余时间的秒数
        var h = parseInt(times / 60 / 60 % 24);
        var m = parseInt(times / 60 % 60);
        var s = parseInt(times % 60);
        h = h < 10 ? '0' + h : h; 					// 这三行操作为了给只有个位的数补零
        m = m < 10 ? '0' + m : m;
        s = s < 10 ? '0' + s : s;
        hour.innerHTML = h; 						// 写入盒子
        minute.innerHTML = m;
        second.innerHTML = s;
    }
script>

 

❷ 验证码发送

<div class="box">
    <input type="text">
    <button>发送验证码button>
div>

<script>
    var btn = document.querySelector('button');
    var sec = 60;									// 这个全局变量的设置尤其关键
    btn.addEventListener('click', countDown); 		// 按钮按下，触发回调函数countDowm
    
    function countDown() {
        btn.disabled = true;
        var timer = setInterval(function() {	   // 间隔为1s的setInterval计时器
            if (sec == 0) {						   // 如果计时到0，就复原全局变量sec和按钮，停止计时器
                clearInterval(timer);
                btn.disabled = false;
                btn.innerHTML = '发送';
                time = 60;
            } else {
                btn.innerHTML = '还剩下' + (sec--) + '秒可再次发送'
            }
        }, 1000);
    }
script>

 

❸ 页面不见了！5秒后自动跳转

var box = document.querySelector('.box');
var t = 5;
var timer = setInterval(function() {
    if (t == 0) {
        clearInterval(timer);
        location.href = 'http://www.baidu.com';		// 利用了location.href的可读可写
    } else {
        box.innerHTML = '页面不见了!' + (t--) + '秒后自动跳回首页';
    }
}, 1000);

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 
☀ Loli & JS

♫ Suki