设计一个火箭发射的动画设计，能显示火箭升空效果，倒计时效果，滚屏显示效果

具体步骤如下：

1 .先给出文字说明 和  右下角的火箭图片

2.调整文字和火箭的位置 

3.给出倒计时效果

4.让火箭不断升空

5.升到顶部时，显示滚屏祝福信息

6. 滚屏时，注意只显示部分图片

# 1 .先给出文字说明 和  右下角的火箭图片
![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/d613e71386a01bb7416c26b5e6ae2991.image.webp)


```
<p>离火箭发射还有<span>5</span>秒</p>
    <div>
        <img src="img/1.jpg" alt="">
    </div>
```
效果如下

![](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/2e9c872d8c8a29bff8ef109fd699b7c4.image.webp)


# 2. 调整文字和火箭的位置 


![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/3828d9608ade51f6af700ad4ac2ad0f1.image.webp)
```
<style>
        p{
           margin-top: 50px;
           font-size: 30px;
           font-weight: bold; 
        }
        span{
            color:red;
        }
        div{
            border: 1px  dotted  red;   
            /* 显示边界测试效果 */
            position: relative;
            margin-left: 300px;
            height: 500px;
            width: 500px;
            /* overflow: hidden; */
        }
        div img{
            position: absolute;
            top:300px;
        }
    </style>
```

![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/415ba24044f7c1f41b00a0203a2ce8e7.image.webp)

效果图如下：

![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/8cbd97db1e1d240d604f7dd1aff3cde7.image.webp)

# 3. 给出倒计时效果  

```
<script>
        var time = document.getElementById("timer");
        var i=5;
        console.log(time);
        function timer(){            
            if(i<=0)  i=0;
            document.getElementById("timer").innerHTML = i;
            i =  i-1;
            setTimeout("timer()",1000);
        }
        timer();
    </script>
```


```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>火箭发射动画</title>
    <style>
        /* 1.调整火箭初始位置，通过css实现 */
        div{
            position: absolute;
            left:500px;
            top:500px;
        }
        #rocket{
            top:500px;
        }
        
    </style>
</head>
<body>
    <h2>倒计时<span id="time" style="color:red"> </span>秒</h2>
    <div id="img">
        <img src="img/1.jpg" alt="" id="rocket">
    </div>
    
    <input type="button" value="change" onclick="change()">
    <script>
        var time=5;
        var rocket = document.getElementById("img");
        var initTop = 500;  
        // 2.倒计时5秒，通过js代码实现 
        function timer(){            
            document.getElementById("time").innerText= time;
            if(time<=0) time=1;
            console.log(time);
            time--;
        }

        setInterval(timer,1000);
        function moveUp() {//移动函数
            rocket.style.top = initTop+"px";
            initTop -= 100;
            if(initTop<=000) {
                initTop = 100;
                document.getElementById("rocket").src = "img/5.png";
            }              
        }
        setInterval(moveUp,1000);
        function change(){
            rocket.style.top = 300+"px";
        }
		
    </script>
</body>
</html>
```

```
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>北斗三号卫星发射动画</title>
	<style type="text/css">
		p {
			width: 200px;
			height: 100px;
			margin-top: 100px;
			margin-left: 50px;
			font-size: 40px;
			float: left;
		}

		#time {
			color: red;
			font-size: 40px;
			font-weight: bold;
		}

		div {
			width: 700px;
			height: 500px;
			margin-left: 300px;
			position: relative;
			overflow: hidden;
		}

		div #rocket {
			position: absolute;
			left: 0px;
			top: 300px;
		}
	</style>
</head>

<body>
	<p>倒计时<span id="time"></span>秒</p>
	<div>
		<img src="img/1.jpg" id="rocket">
	</div>
	<script type="text/javascript">
		var time = document.getElementById("time");//获取
		var init = 5;//初始倒计时时间
		var rocket = document.getElementById("rocket");//获取火箭
		var inittop = 300;//盒子初始位置
		var timeId2 = null;
		count();
		var timeId1 = setInterval(count, 1000);
		function count() {//减1
			if (init == 0) {
				clearInterval(timeId1);
				//启动火箭定时器
				timeId2 = setInterval(move, 200);
			}
			else {
				time.innerHTML = init;
				init--;
			}
		}

		function move() {//移动函数
			if (inittop <= 0) {
				clearInterval(timeId2);
				setInterval(move1, 200);
			}
			else {
				rocket.style.top = inittop + "px";//修改top属性
				inittop = inittop - 30;//火箭每次向上移动20
			}
		}
		var initleft = 0;
		function move1() {//变化函数
			rocket.src = "img/5.png";
			rocket.style = "top:50px";
			if (initleft == -1294)
				initleft = 0;
			else {
				rocket.style.left = initleft + "px";
				initleft = initleft - 647;
				time.innerHTML=0;
			}
		}
	</script>
</body>

</html>
```

实训7 火箭发射动画设计 

Document对象是指文档对象，表示在浏览器窗口中显示的页面文档。Document对象既属于BOM对象，也属于DOM对象。Document对象的属性/方法如表所示。


![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/479970588052ffc5b8a3e7c7a6114e80.image.webp)


![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/0c6a50868f3624256cedc0e42f18e178.image.webp)


![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/a5cf126dfe44ec331a77948406ddb29f.image.webp)

效果图

![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/d3cd38d6300e342faf9537b2fc757ffe.image.webp)

```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h2>浏览某页面的时间</h2>
    <hr>
    <form action="" name="time">
        <p>浏览本页面总共用去
            <input type="text" name="timer" id="" size="6" value="0:00">秒
        </p>
    </form>
    <script>
        var entered = new Date();
        function Timetrack(){
            var now = new Date();
            var seconds = Math.floor((now.getTime()-entered.getTime())/1000);
            var minutes = Math.floor(seconds/60);
            var second = seconds%60;
            var minute = minutes%60;
            document.time.timer.value = minute+":"+second;
            // setTimeout("Timetrack()",1000);
        }
        setInterval(Timetrack,1000);        
    </script>
</body>
</html>
```

7.6 使用Document对象

窗口的history属性就会引用History对象，它包含用户（在浏览器窗口中）访问过的 URL。出于安全方面的考虑，开发人员无法获取History对象中的具体信息，但可以控制浏览器实现“前进”和“后退”。History对象常用的属性和方法如表所示。


![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/f2f49b1fbd9f56fcc798e49f0236776b.image.webp)


![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/f40ee5559d8e963e81ef62d22b06a8b4.image.webp)

第一个页面代码 

![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/81b809341d06352c26ac36d95b498bed.image.webp)
```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>前进和后退</title>
</head>
<body>
    第一个页面
    <p><a href="javascript:Forward()">前进</a></p>
    <p><a href="javascript:newPage()">第二个页面</a></p>
    <script>
        function Forward(){
            history.forward();
        }
        function newPage(){
            location.assign("js7-9-1.html");
        }
    </script>
</body>
</html>
```


第二个页面代码 

![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/2114b1a2911f43d068c759a04f14d541.image.webp)
```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>后退</title>
</head>
<body>
    第二个页面
    <p><a href="javascript:Back()">后退</a></p>
    
    <script>
        function Back(){
            history.back();
            history.go(-1);
        }
        
    </script>
</body>
</html>
```

最后能实现2个页面的前进、后退效果

7.5 使用History对象

窗口的location属性就会引用Location对象，它包含有关当前 URL 的信息。在网络中，统一资源定位符（Uniform Resource Locator，URL）是信息资源的一种字符串表示方法，通称网址，格式如下所示：
protocol :// hostname[:port] / path / [;querystring][?query]#fragment
各部分说明如下。
1. ① Protocol表示通信协议方法，比如http、https、ftp等。
2. ② hostname表示主机名，指服务器的域名系统（Domain Name System，DNS）主机名或IP地址。
3. ③ port表示端口，是一个整数，可以省略。当省略时，表示使用对应协议的默认端口，比如http的默认端口是80，https的默认端口是443。
4. ④ path代表访问资源的具体路径，通常表示服务器的目录或者文件地址。
5. ⑤ querystring表示查询字符串，通常用于向动态网页传递参数，将参数使用问号连接在访问资源路径之后，传递的参数使用“名=值”的格式进行传递，如果有多个参数使用“&”连接。
6. ⑥ fragment代表指定资源中的信息片段，比如我们在锚点连接时的连接参数。

![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/09e2b131d9aee96759cb30219918f987.image.webp)

Location对象常用的方法如下表所示：
如果我们想设置浏览器的地址栏，可以使用Location对象的属性和方法进行，具体如下：
-  location.href = "https://www.ryjiaoyu.com/";//设置href属性
-  location.assign("https://www.ryjiaoyu.com/");//使用assign()方法
-  location.replace("https://www.ryjiaoyu.com/");//使用replace()方法


![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/ba6329253a495fa86cd84e7900ae5eb5.image.webp)


![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/85f838cd09ffe82a5abf77892a5ac8d7.image.webp)


![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/6bdb20643a35633372df64b134e3b84f.image.webp)

![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/cde838bbfc2410cb1a89c30375bfebbd.image.webp)


![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/0a0eaaebf4db970833d877422e807ba5.image.webp)


# 课堂练习
任务描述：编写一个简单的网页应用程序，该程序在页面加载完成后，会显示一系列关于用户环境的信息，具体包括：

- 屏幕信息：显示用户的屏幕宽度、高度。
- 当前位置信息：显示当前页面的完整URL以及仅域名部分。
- 浏览器信息：显示用户的浏览器名称、版本。

实现步骤：

- 获取屏幕信息：使用screen对象的属性width, height来获取屏幕尺寸。
- 获取当前位置信息：利用location对象的属性href获取当前页面的完整URL，使用hostname获取当前页面的域名。
- 获取浏览器信息：通过navigator.userAgent解析浏览器名称和版本信息。


![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/f93cb26aad73fa5857c18ca7753bf08b.image.webp)

```
document.write(`屏幕尺寸：宽度${screen.width}，高度${screen.height}<br>`);
document.write("当前页面的完整url："+location.href+"<br>");
document.write("当前网页的域名："+location.hostname+"<br>");
document.write("浏览器名称："+navigator.appName+"<br>");
document.write("浏览器版本："+navigator.appVersion+"<br>");
```

7.4 使用Location对象

使用Navigator对象

 窗口的navigator属性就会引用Navigator对象，它是指浏览器对象，包含浏览器的信息。常用的属性如表所示。
 
 
![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/a8263aaab3dbeed2e05f3d1779373a5c.image.webp)





![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/8f82b5e89652784013a6583410078c26.image.webp)


![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/6f7690e578dba435391ffe4f9bfe0ab9.image.webp)


![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/814fea599e6a041fcdbf36e3509be410.image.webp)


![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/2c2095bbc0cddfc0dfa119497ce3ca56.image.webp)


![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/95c638fc5c6adc3604d9e96e9a156db6.image.webp)




