动态打字机网页效果的实现

Lonelycity

2024-10-13

前端

实现一个HTML5的动态打字机效果

一、项目流程

创建基本的HTML结构
使用CSS美化网页
添加JavaScript交互效果
测试和优化网页的效果

二、实现步骤

1. 创建基本的HTML结构

首先，我们需要一个简单的HTML文件，来搭建页面的骨架。

这里我们定义了网页的结构，包含标题、按钮并引入了CSS、JavaScript文件和背景图片。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>超炫网页效果</title>
    <link rel="stylesheet" href="styles.css"> <!-- 引入CSS文件 -->
</head>
<body>
    <div class="dzj">
	<img src="img/text.png" /><!-- 引入图片 -->
	<div class="text" id="text"></div>
    </div>
    <script src="script.js"></script> <!-- 引入JS文件 -->
</body>
</html>

2.使用CSS美化网页

我们需要创建一个外部的CSS文件 styles.css，用来编辑设置样式。

.dzj{
	width:721px;
	height: 513px;
	border: 2px solid darkgrey;
	margin: 0px auto;
	position: relative;
	top: 0px;
	left: 0px;
	margin-top:20px;
}
.dzj img{
	position: absolute;
}
.text{
	width: 451px;
	height: 235px;
	position:absolute;
	top: 113px;
	left: 124px;
	color: white;
	font-size: 18px;
}

3.添加JavaScript代码实现动态打字机效果

我们需要创建一个外部的JS文件 script.js，用来编辑设置动态打字机的操作。

window.onload = black;
	function black(){
		var text = document.getElementById("text");
		var wen = "JavaScript的由来中，我们就知道JavaScript由网景公司的布兰登·艾奇开发出来的，一年后，微软又模仿JavaScript开发出了一种编程语言叫JScript,再后来，陆续又有别的商家推出JavaScript的不同实现语言。这就导致JavaScript的语法和特性日益混乱，其标准化问题被提上日程。最终由欧洲计算机制造商协会（ECMA）以JavaScript1.1为蓝本，制定了【ECMA-262】标准，并由此标准定义了一种新脚本语言ECMAScript。随后，ISO也采用ECMAScript作为标准，各浏览器厂商便纷纷开始将ECMAScript作为各自JavaScript实现的基础。";
		var timer = 0;
		var i=0;
		console.log(wen.length);
		function sj(){
			if( i <=wen.length){
				text.innerText = wen.slice(0,i++) + "_";
				timer = setTimeout(sj,200)
			}else{
				text.innerText = wen;
				clearTimeout(timer);
				}
			}
			sj();
	}

4. 测试和优化

完成以上步骤后，务必确保在不同设备和浏览器上测试你的页面，查看响应式设计是否有效，并对代码进行优化。例如，确保CSS选择器高效，避免过多的DOM操作等