一,Window对象中的几种加载区别:
//等全部内容都加载完之后才去执行外面的函数(传统的事件方法)
// window.οnlοad=function(){
// alert('我是第一个网页');
// }
//监听事件,有效的解决多个事件同时产生时不会被停止运行,刷新速度最快,图片或者文档未刷
新出来时就已经展现出来
// document.addEventListener('DOMContentLoaded',function(){
// alert('我是第一个网页');
// })
//调整浏览器的窗口大小
// window.addEventListener('resize',function(){
// alert('调整浏览器窗口的大小');
// })
补充传统事件:
element.οnclick=function(){
}
现在的监听事件:
element.addEventListener('click',function(){
})
注:监听事件中的点击按钮栏中所有事件不能添加on,例如传统事件与现在的监听事件的区别onclick与click的区别。
粉丝福利:(注:如有不明白的地方,粉丝朋友可以私信联系)
二,活动倒计时
<div id="btn"></div>
<!-- 在页面中添加div标签 -->
<script>
// 获取元素
var btn=document.querySelector('#btn');
// 指定目标时间
var date=+new Date("2022-06-30 18:00:00");
// 定时器
setInterval(showText,1000);
// 封装一个函数,内部均是固定的内容
function showText(){
//获取当前的时间
var data=+new Date();
// 用设置指定的时间减去当前的时间除以1000获得毫秒数
var dat=(date-data)/1000;
// 下面是获得日
var day=parseInt(dat/60/60/24);
// 运用三元运算符判断得出是否需要在时间前面加字符0;一下均是
// 同样的类型
day=day<10? '0'+day:day;
var hour=parseInt(dat/60/60%24);
hour=hour<10? '0'+hour:hour;
var mine=parseInt(dat/60%60);
mine=mine<10? '0'+mine:mine;
var swm=parseInt(dat%60);
swm=swm<10? '0'+swm:swm;
var time= day+"日"+hour+"时"+mine+"分"+swm+"秒";
btn.innerHTML=time;
}
下面是展示效果: