1.BOM简介
BOM(Browser Object Model)浏览器对象模型,它提供了独立于内容,与浏览器窗口进行交互的对象,核心对象是Window
2.DOM与BOM
3.BOM的构成
4.倒计时效果
<style>
span {
display: inline-block;
width: 50px;
height: 50px;
text-align: center;
line-height: 50px;
background-color: aquamarine;
color: blueviolet;
}
</style>
<div>
<span class="hour">00</span>
<span class="minute">00</span>
<span class="second">00</span>
</div>
<script>
var hour = document.querySelector('.hour');
var minute = document.querySelector('.minute');
var second = document.querySelector('.second');
//用户输入的时间
var inputTime = +new Date('2022-05-28 14:28:40');
//防止第一次刷新页面有空白,先调用一次
countDown();
//开启定时器
var setI=setInterval(countDown, 1000);
//计算倒计时时间函数
function countDown() {
// new Date() 返回的是当前时间 ,+new Date() 返回的是当前时间的总毫秒数
var nowTime = +new Date();
// console.log(nowTime);
// 剩余时间的总秒数
var times = (inputTime - nowTime) / 1000
if (times <= 0) {
clearInterval(setI);
return;
}
//小时
var h = parseInt(times / 60 / 60 % 24);
h = h < 10 ? '0' + h : h;
hour.innerHTML = h;
//分钟
var m = parseInt(times / 60 % 60);
m = m < 10 ? '0' + m : m;
minute.innerHTML = m;
//秒
var s = parseInt(times % 60);
s = s < 10 ? '0' + s : s;
second.innerHTML = s;
}