JS-API第5天-BOM练习题
文章目录
一, 定时器练习
练习1. 3秒后自动关闭广告
<body>
<img src="images/cj.jpg" alt="" class="ad">
<script>
var ad = document.querySelector('.ad');
setTimeout(function() {
ad.style.display = 'none';
}, 5000);
</script>
</body>
练习2. 京东秒杀倒计时牌
实现要点:
-
利用setInterval每隔一秒触发自动变换数字
-
三个黑色盒子里面分别存入时/分/秒
-
给盒子用innerHTML写入时间
-
最后把这三个盒子定位到倒计时牌子里即可
待改进: 超过倒计时停止计时
注意:
- 首次执行时即每次刷新页面时, 时间不会立马显示, 因为函数会在一秒后再被触发
- 解决方式: 0s时, 有两件事同时发送: 调用一次函数 && 定时器开启, 这样0s时函数被调用能防止空白. 即, 把函数在定时器前调用一次
<!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>秒杀倒计时牌子</title>
<style>
/* 特殊样式补充： */
/* CSS3盒子模型 */
* {
box-sizing: border-box;
-webkit-box-sizing: border-box;
}
* {
margin: 0px;
padding: 0px;
}
a {
color: #666;
text-decoration: none;
}
.seckill-countdown {
/* position: relative; */
/* float: left; */
display: block;
width: 190px;
height: 260px;
margin: 100px auto;
color: #fff;
background-color: #e83632;
background-image: url(images/jd_seckill.png);
background-size: contain;
background-repeat: no-repeat;
padding-top: 31px;
overflow: hidden;
border-top: 31px pink;
}
.countdown-title {
/* position: absolute;
top: 31px;
left: 0px; */
width: 100%;
font-size: 30px;
font-weight: 700;
text-align: center;
/* margin-top: 31px; */
}
.countdown-main {
margin: 130px auto auto auto;
width: 130px;
height: 30px;
}
span {
float: left;
width: 40px;
height: 40px;
background-color: #333;
font-size: 20px;
color: #fff;
text-align: center;
line-height: 40px;
}
span:nth-child(n+2) {
margin-left: 5px;
}
</style>
</head>
<body>
<a href="https://miaosha.jd.com/" class="seckill-countdown" aria-label="京东秒杀">
<div class="countdown-title">
京东秒杀
</div>
<div class="countdown-main">
<span class="hour">时</span>
<span class="minute">分</span>
<span class="second">秒</span>
</div>
</a>
<script>
var hour = document.querySelector('.hour');
var minute = document.querySelector('.minute');
var second = document.querySelector('.second');
var inputTime = +new Date('2021-4-15 18:00:00'); //输入标准形式目标时间
// 在刷新页面第一时间显示倒计时
countDown();
// 1. 获取当前时间
// 2. 输入目标时间
// 3. 倒计时=(目标时间毫秒数-当前时间毫秒数)转化为时分秒
// 之前写过小组件: 输入标准时间, 返回与现在时间的差值
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>
二, location练习
1. 登录进的新页面获取用户名(location.search)
重点: location.search 字符串分割
<script>
console.log(location.search); // ?uname=andy
// 1.先去掉？ substr('起始的位置'，截取几个字符);
var params = location.search.substr(1); // uname=andy
console.log(params);
// 2. 利用=把字符串分割为数组 split('=');
var arr = params.split('=');
console.log(arr); // ["uname", "ANDY"]
var div = document.querySelector('div');
// 3.把数据写入div中
div.innerHTML = arr[1] + '欢迎您';
</script>
2. 5s后自动跳转页面(location.href)
<script>
var btn = document.querySelector('button');
var div = document.querySelector('div');
btn.addEventListener('click', function() {
// console.log(location.href);
location.href = 'http://www.itcast.cn';
})
var timer = 5;
setInterval(function() {
if (timer == 0) {
location.href = 'http://www.itcast.cn';
} else {
div.innerHTML = '您将在' + timer + '秒钟之后跳转到首页';
timer--;
}
}, 1000);
</script>