前端笔记83——自动书写代码效果

最新推荐文章于 2023-11-09 09:57:58 发布

野生杂学家阿博

最新推荐文章于 2023-11-09 09:57:58 发布

阅读量339

点赞数

分类专栏：前端文章标签：前端 JavaScript JS 自动书写代码

本文链接：https://blog.csdn.net/chengxu_kuangrexintu/article/details/93248369

版权

前端专栏收录该内容

93 篇文章 1 订阅

订阅专栏

前言

不知道小伙伴有没有想过程序自动写代码是怎么样的呢？我觉得挺有趣的，因为我是试过让程序自己写代码。开发中可能会遇到自动写一段文字的需求，那么自动写代码的JS程序就可以实现这种需求啦！有兴趣的小伙伴们可以复制下面的代码到编译器当中，运行查看效果。

自动写代码效果

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style id="style-app">
			
		</style>
	</head>

	<body>
		<div id="content">
			<div id="style-text"></div>
			<div id="tooltips" style="display: none;">
				<div id="info">
					<div class="title">信息</div>
					<div class="content" id="content">恭喜你，中奖啦！！！</div>
					<div class="btn">
						<button id="confirm">确定</button>
					</div>
				</div>
			</div>
		</div>
		<script type="text/javascript">
			// es6中定义一个很长的字符串 `
			var style_text = `#style-text{
				width: 300px;
				height: 460px;
				border: 5px solid white;
				background-color: green;
				color: white;
			}
			#tooltips{
				width: 100%;
				height: 100%;
				background-color: agba(0,0,0,0.5);
				position: absolute;
				top: 0;
				z-index: 999;
				display: block !important;
			}
			#info{
				width: 400px;
				height: 200px;
				background-color: white;
				margin: 150px auto;
			}
			#info .title{
				width: 100%;
				height: 40px;
				background-color: #009F95;
				line-height: 40px;
				color: white;
				padding-left: 20px;
				box-sizing: border-box;
			}
			#info .btn button{
				background-color: #009F95;
				color: white;
				outline: none;
				font-size: 10px;
				width: 60px;
				height: 30px;
				margin-left: 300px;
			}
			#info .content{
				height: 120px;
				padding: 20px;
				box-sizing: border-box;
			}` 
			var style_app = document.getElementById("style-app")
			var style_text_obj = document.getElementById("style-text")
			// 表示结束的位置
			var n = 1
			var timer =setInterval(function(){
				//substring字符串截取，第一个参数开始位置，第二个参数结束位置
				style_app.innerHTML = style_text.substring(0,n)
				style_text_obj.innerHTML = style_text.substring(0,n)
				n++
				if(n === style_text.length){
					clearInterval(timer)
					alert("代码书写完成！")
				}
			},100)
		</script>
	</body>
</html>