发表于： 2022-12-28 19:49:35
0 323
今天的js知识点：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BOM概述</title>
</head>
<body>
<script>
// window.onload 是窗口（页面）加载事件 当文档内容完全加载完成会触发该事件，就可以调用的处理函数
//1、有了 window.onload 就可以把JS 代码写到页面元素的上方 因为onload会等页面全部加载完毕
//2、但是 window.onload 传统注册事件只能写一次 如果有多个，会以最后一个 window.onload 为准
//3、addEventListener 则没有限制
// window.onload = function () {
// var btn = document.querySelector('button');
// btn.addEventListener('click', function () {
// alert('点击');
// })
// }
window.addEventListener('load', function () {
var btn = document.querySelector('button');
btn.addEventListener('click', function () {
alert('点击');
})
})
window.addEventListener('load', function () {
alert('22');
})
document.addEventListener('DOMContentLoaded', function () {
alert('33');
})
// load 等页面内容全部加载完毕，包含页面dom元素 图片 flash css 等等
// DOMContentLoaded 是DOM加载完毕 ，不包含图片 flash css 等就可以执行 加载输的比 load更快一些
</script>
<button>点击</button>
<script>
// window 对象是浏览器的顶级对象
//1、它是 JS 访问浏览器的一个接口
//2、它是一个全局对象，定义在全局作用域的变量、函数都会变成 window 对象的属性和方法
console.dir(window); //window中所含的属性
//window 下的一个特殊属性 name
// var btn = document.querySelector('button');
// btn.addEventListener('click', function () {
// alert('点击');
// })
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定时器</title>
<style>
/*div {*/
/* width: 200px;*/
/* height: 200px;*/
/* margin: 100px auto;*/
/* background-color: red;*/
/*}*/
div {
width: 200px;
height: 200px;
background-color: #fff;
margin: 100px auto;
text-align: center;
}
.hour {
background-color: #333;
color: #fff;
font-size: 14px;
line-height: 40px;
padding: 10px;
}
.minute {
background-color: #333;
color: #fff;
font-size: 14px;
line-height: 40px;
padding: 10px;
}
.second {
background-color: #333;
color: #fff;
font-size: 14px;
line-height: 40px;
padding: 10px;
}
</style>
</head>
<body>
<!-- <div>盒子</div>-->
<!-- <button>点击</button>-->
<div>
<span class="hour">1</span>
<span class="minute">2</span>
<span class="second">3</span>
</div>
<script>
//setTimeout
//1、语法规范 ：window.setTimeout(调用函数 , 延时时间);
//2、这个延时时间单武是毫秒 但是可以省略，如果省略默的是0
//3、这个调用函数可以直接写函数 还可以写 函数名 还有一个写法 '函数名()'
//4、页面中可能有很多的定时器，我们经常给定时器加标识符（名字）
// setTimeout(function () {
// console.log('时间到了')
// },2000)
//setTimeout() 这个调用我们也称为 回调函数 callback
// function callback() {
// console.log('爆炸了')
// }
// var time1 = setTimeout(callback, 3000);
// var time2 = setTimeout(callback, 5000);
// setTimeout('callback()',3000); //我们不提倡这种写法
//盒子五秒钟之后隐藏的小练习
// var div = document.querySelector('div');
//
// setTimeout(function () {
// div.style.display = 'none';
// },5000)
//----------------------------------------------------------------------------------
//停止定时器 语法规范 window.clearTimeout(timeoutID); timeoutID 指的是定时器的名字
//1、window可以省略
//2、里面的参数是定时器的标识符 （定时器的名字）
// var btn = document.querySelector('button');
// var timer = setTimeout(function () {
// console.log('时间到了')
// },5000);
// btn.addEventListener('click', function (){
// clearTimeout(timer);
// })
//----------------------------------------------------------------------------------
// setInterval() 定时器
//window.setInterval() 方法 重复调用一个函数。每隔这个时间，就会去调用一次回调函数。
//1、window可以省略
//2、这个延时时间单武是毫秒 但是可以省略，如果省略默的是0
//3、这个调用函数可以直接写函数 还可以写 函数名 还有一个写法 '函数名()'
//4、页面中可能有很多的定时器，我们经常给定时器加标识符（名字）
// setInterval(function () {
// console.log('执行了');
// },1000)
//setTimeout 延时时间到了，就去调用这个回调函数，只调用一次，就结束了这个定时器
//setInterval 每隔这个延时时间。就去调用这个回调函数，会调用很多次，重复调用这个函数
//----------------------------------------------------------------------------------
//京东秒杀倒计时案例
//1、获得元素
var hour = document.querySelector('.hour'); //小时的黑色盒子
var minute = document.querySelector('.minute'); //分钟的黑色盒子
var second = document.querySelector('.second'); //秒数的黑色盒子
var inputTime = +new Date('2022-12-28 19:00:00'); //返回的是用户输入时间总的毫秒数
countDown(); //我们先调用一次这个函数 防止第一次刷新出现空白
//2、开启定时器
setInterval(countDown,1000);
function countDown() {
var nowTime = +new Date(); //返回的是当前时间总的毫秒数
var times = (inputTime - nowTime) / 1000; //times是剩余时间的总秒数
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;
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>窗口大小事件</title>
<style>
div {
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<script>
//window.onresize 是窗口大小加载事件 当触发时就调用的处理函数
//1、只要窗口大小发生像素变化，就会触发这个事件
//2、我们经常利用这个事件完成响应式布局。 window.innerWidth 当前屏幕的宽度
window.addEventListener('load',function () {
var div = document.querySelector('div');
window.addEventListener('resize',function () {
console.log(window.innerWidth);
console.log('变化了');
if(window.innerWidth <= 800) {
div.style.display = 'none';
} else {
div.style.display = 'block';
}
})
})
</script>
<div></div>
</body>
</html>
返回列表
评论