BOM 操作学习案例
Posted GoldenaArcher
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了BOM 操作学习案例相关的知识,希望对你有一定的参考价值。
BOM 操作学习案例
还是 JavaScript 基础语法-dom-bom-js es6 新语法-jQuery-数据可视化 echarts 黑马程序员 pink 老师前端入门视频教程(500 多集课程) 的学习案例。
主要是定时器(setInterval, setTimeOut),以及重定向部分的学习案例。
定时器案例
setTimeOut
和 setInterval
两个方法的使用。
setTimeOut
因为 setTimeOut
有一个 延时性+一次性 的特性,所以用的比较多的案例应该是配合着关闭广告:
使用 clearTimeout()
也可以取消 setTimeOut
的效果,点击 停止定时器 按钮后的对比,广告就不关闭了:
完整代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.commercial {
width: 500px;
height: 300px;
margin: 0 auto;
background: url("https://aecpm.alicdn.com/simba/img/TB1JNHwKFXXXXafXVXXSutbFXXX.jpg")
no-repeat center;
}
</style>
</head>
<body>
<div class="commercial"></div>
<button>点击停止定时器</button>
<script>
// 到了 2s 后就去调用这个函数
// setTimeout(function () {}, 2000);
// 案例:5s后自动关闭广告
const commercial = document.querySelector(".commercial");
const btn = document.querySelector("button");
const closeCommercial = setTimeout(() => {
commercial.style.display = "none";
}, 5000);
btn.addEventListener("click", function () {
clearTimeout(closeCommercial);
});
</script>
</body>
</html>
setInterval
setInterval
的案例有两个,一个是常见的倒计时,这种在秒杀比较常见。另外一个是模拟发送手机号后禁止短时间内继续发送手机号。
案例 1,倒计时
案例中的日期我写死了,效果图:
源码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
span {
display: inline-block;
width: 40px;
height: 40px;
background-color: #111;
color: #eee;
text-align: center;
line-height: 40px;
}
</style>
</head>
<body>
<div class="timer">
<span class="hour"></span>
<span class="minute"></span>
<span class="second"></span>
</div>
<script>
const timer = document.querySelector(".timer");
const hour = timer.querySelector(".hour");
const minute = timer.querySelector(".minute");
const second = timer.querySelector(".second");
const inputTime = +new Date("2021-5-14 9:00:00");
// 第一次调用,防止页面空白
countDown();
function countDown() {
const now = +new Date();
const timeDiff = (inputTime - now) / 1000;
const hours = parseInt((timeDiff / 3600) % 24);
hour.textContent = hours < 10 ? `0${hours}` : hours;
const minutes = parseInt((timeDiff / 60) % 60);
minute.textContent = minutes < 10 ? `0${minutes}` : minutes;
const seconds = parseInt(timeDiff % 60);
second.textContent = seconds < 10 ? `0${seconds}` : seconds;
}
setInterval(countDown, 1000);
</script>
</body>
</html>
案例 2,禁止按钮点击事件
为了演示效果我只禁用了 5 秒,效果图:
源码部分:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
手机号: <input type="tel" name="" id="" />
<input type="button" value="发送" />
<script>
const btn = document.querySelector("input[type='button']");
let countDown = 5;
btn.addEventListener("click", function () {
btn.disabled = true;
btn.value = `还剩下${countDown--}秒`;
const timer = setInterval(function () {
if (countDown === 0) {
clearInterval(timer);
btn.disabled = false;
countDown = 5;
btn.value = "发送";
} else {
btn.value = `还剩下${countDown--}秒`;
}
}, 1000);
});
</script>
</body>
</html>
javascript 同步与异步
这个其实只是为了加深理解的,单看这个案例可能需要把 setTimeOut
里面的值改成 0 配合比较好:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script>
console.log(1);
setTimeout(() => {
console.log(3);
}, 10000);
console.log(2);
</script>
</body>
</html>
因为 JavaScript 是先执行同步代码,再执行异步的代码,所以就算将 setTimeOut
里面等待的时间改为 0,console 输出的结果还是 1 > 2 > 3
实现页面跳转功能
这个也是 location 搭配着 setInterval
完成的功能,倒计时后跳转页面或是关闭页面的实现:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<!-- 实现 5s后自动重定向 的功能 -->
<div>自动重定向跳转</div>
<script>
const div = document.querySelector("div");
let countdown = 5;
setInterval(function () {
if (countdown === 0) {
location.href = "https://www.baidu.com";
} else if (countdown > 0) {
div.textContent = `${countdown--}秒后自动跳转`;
}
}, 1000);
</script>
</body>
</html>
使用 location 重定向页面并且传参
不像其他的案例,这个案例是跨页面实现的:
第一个有用户名的页面是 login
页面,第二个页面是 homepage
,这也是第一次实现和完成 跨页面+传信息 的功能。
登录,login
页面:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<form action="homepage.html">
用户名:<input type="text" name="username" />
<input type="submit" value="提交" />
</form>
</body>
</html>
信息展示,homepage
页面:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div></div>
<script>
const div = document.querySelector("div");
const { search } = location;
const queries = search.substr(1, search.length).split("=");
console.log(queries);
div.textContent = `${queries[1]}你好`;
</script>
</body>
</html>
以上是关于BOM 操作学习案例的主要内容,如果未能解决你的问题,请参考以下文章
web前端练习29----Bom中,Navigator,loaction,history ,Screen,window及案例(滚动,刷新加载,传参)
web前端练习29----Bom中,Navigator,loaction,history ,Screen,window及案例(滚动,刷新加载,传参)