1、实验目的
1、掌握 JavaScript DOM 中新增标签、查找标签、更改页面内容和样式的应用方法和技巧。
2、掌握 JavaScript 时间的获取、显示和计时器应用方法和技巧。
3、回顾 CSS 动画的实现。
2、实验内容
实现时间走动效果(从 60 秒开始),且有如下效果:
1.当秒数为 5 的倍数时,页面出现爆炸效果。
2.爆炸发生在页面上随机某位置。
3. 爆炸时间持续 1.5 秒,之后消失。
4. 倒计时到 0 秒后停止,且爆炸不会继续发生。
5. 背景色为黑色,且倒计时水平垂直居中页面。
3、实验原理
1.利用 HTML 标签完成页面时间显示结构。
2.利用 DOM 查找对应的时间显示标签。
3.利用计时器让时间显示在页面对应标签中,并走动起来。
4.利用 Math.random 生成随机数。
5.利用 DOM 的 clientWidth 属性值和 clientHeight 获取元素宽高度。
6.利用 DOM 创建 img 标签并填充到页面中。
7.使用 CSS 动画完成爆炸的持续时间以及爆炸的隐藏。
8.使用 CSS 的 position 属性完成定位。
代码实现
项目文件
html部分
<!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">
##这里是引入外部的css文件
<link rel="stylesheet" href="css/public.css">
<title>时间爆炸</title>
</head>
<body>
<div class="wrapper">
<img src="images/12345.gif" alt="" style="display: none" >
<div class="time">00: <span class="timer">60</span></div>
</div>
# 这里是引入外部的js文件
<script src="js/app.js"></script>
</body>
</html>
css 部分
*{
margin: 0;
padding: 0;
}
body{
background-color: #000;
height: 100%;
}
.wrapper{
font-size: 100px;
color: #fff;
text-align: center;
height: 500px;
}
.wrapper .time{
position: absolute ;
left: 45%;
top: 40%;
}
.wrapper img{
position: absolute ;
left: 200px;
top: 200px;
background-color: pink;
}
JavaScript部分 — 在本实验中为主要的部分
let timeNum = document.querySelector('.timer')
function getrandom(m,n){
return Math.floor(Math.random() * (n - m +1)) + m;
}
let img = document.querySelector('img')
let width = window.innerWidth;
let height = window.innerHeight;
function createBoou(){
img.style.left = getrandom(0,width-200).toString()+ 'px';
img.style.top = getrandom(0,height-200) + 'px';
img.style.display = 'block'
setTimeout(function(){
img.style.display = 'none'
}, 1500);
}
let time = Number(timeNum.innerHTML);
let time_set = setInterval(function(){
if (time % 5 == 0){
createBoou()
}
timeNum.innerHTML = time;
time --;
if (time === 0){
clearInterval(time_set);
timeNum.innerHTML = '00';
}
},1000)