实验项目 6 基于 DOM 的 JavaScript 编程应用

过往码农

于 2023-06-27 21:43:57 发布

阅读量254

点赞数

分类专栏： JavaScript html css 文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/qq_63730939/article/details/131424302

版权

JavaScript 同时被 3 个专栏收录

1 篇文章 0 订阅

订阅专栏

html

1 篇文章 0 订阅

订阅专栏

css

1 篇文章 0 订阅

订阅专栏

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.opacity = 1
	    img.style.display = 'block' 
	    // 设置定时器
	    setTimeout(function(){
	        // img.style.opacity = 0
	        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';
	    }
	    // console.log(time);
	    
	},1000)