❶ 倒计时
<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