程序员的知识教程库

网站首页 > 教程分享 正文

打字效果的文字制作（打字效果视频）

henian88 2024-09-10 14:11:59 教程分享 53 ℃ 0 评论

看

了以前书里面的一个例子；没有什么太大的技术含量，大致就是运用递归，然后定义两个定时器单个文字和单行文字。

效果图：

代码：

<!DOCTYPE html>
<html>
	<head>
		<title>测试</title>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<style>
			body {
				font-weight: bold;
			}
			a {
				text-decoration:none;
				letter-spacing:2px;
			}
		</style>
	</head>
	<body>
		松花水月最新微博消息：<a id="HotNews" target="_blank"></a>
		<script type="text/javascript">
			let newsTime = 2000 // 每条微博的停留时间
			let textTime = 200 // 微博文字出现等待时间, 越小越快
			let newsi = 0
			let txti = 0
			let txttimer = null
			let newstimer = null
			
			let newstitle = [
				'健康是生命的本钱',
				'关心身体，就是关心自己',
				'去西藏旅游了',
				'大雨倾盆，很大呀'
			]
			let newshref = ['#','#','#','#'] // 微博链接
			function shownew () {
				let endStr = '_'
				hwnewstr = newstitle[newsi]
				newslink = newshref[newsi]
				if (txti === (hwnewstr.length -1)) endStr = ''
				if (txti >= hwnewstr.length) {
					clearInterval(txttimer)
					clearInterval(newstimer)
					newsi ++
					if (newsi >= newstitle.length) newsi = 0
					newstimer = setInterval('shownew()', newsTime)
					txti = 0
					return
				}
				clearInterval(txttimer)
				HotNews.href = newslink
				HotNews.innerHTML = hwnewstr.substring(0, txti+1) + endStr
				txti++
				txttimer = setInterval('shownew()', textTime)
			}
			shownew()
		</script>
	</body>
</html>

Tags：

猜你喜欢

本文暂时没有评论，来添加一个吧(●'◡'●)

欢迎 你 发表评论:

最近发表
标签列表