码代码的冰果果

个人在线笔记

0%

博客个人简介源码

发表于 更新于 分类于 ， 阅读次数： Valine：
本文字数： 5.9k 阅读时长 ≈ 11 分钟

博客个人简介源码，效果展示：传送门。就不拆分介绍了，结合01code案例和打字机效果案例，配合源码中的代码注释很容易理解的。 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
 
<!DOCTYPE html>
<html>
	<head>
		<canvas id="myCanvas" width="2000px" height="1000px"></canvas>
		<meta charset="utf-8" />
		<title>qsdbl</title>
	</head>
	<body>
		<div class="text">
			
		</div>
	</body>
	<style>
		* {
			margin: 0;
			padding: 0;
		}
		body {
			overflow: hidden;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.text {
			position: absolute;
			text-align: left;
			color: white;
			font-size: 25px;
			z-index: 12;
			user-select:none;
			-webkit-user-select:none;
			-moz-user-select:none;
		}
		.text .gbiao {
			margin-left: 5px;
			animation: flash 0.5s linear infinite;
			/*让光标闪烁*/
		}
		@keyframes flash {
			from {
				opacity: 0;
			}
			to {
				opacity: 1;
			}
		}
	</style>
	<script>
		window.onload = function() {
			//1、定义一些数据
			let str = "你好，我是码代码的冰果果！很高兴见到你！";//显示的文本
			let str1 = "请允许我做一个简单的自我介绍！";
			let str2= '性别：男<br/>产地：广东<br/>面貌：五官齐全<br/>年龄：最讨厌别人问我年龄了<br/>身高：比小品演员潘长江高一点<br/>缺点：爱吃肉，管不住嘴迈不开腿<br/>爱好：看电影、逛街、拍照、敲代码<br/>感情：爱情专一却一直处于感情空白期<br/>个性签名：用照片记录生活！<br/><wait><wait/>';
			let str3 = '这就是我，是颜色不一样的烟火！<br/>我感觉我身上有一股倔强劲，不管做什么都会一直坚持做下去，偶尔会因为敲代码会忘记<br/>吃饭、会宅上一天，有时候仅仅是因为想把某个功能做出来。我感觉我的思维很活跃，各<br/>种各样的想法会不停的蹦出来，想的很多做的很少。人们都说好记性不如烂笔头，所以我<br/>想用博客把我各种奇思怪想都记录下来。如果你喜欢我的博客记得评论区留言告诉我，你<br/>的一句夸赞我可能会高兴好几天呢。最后欢迎你的来访！';
			let showtime = 3000;//显示文本的时间
			let textelement;//显示文本的容器
			//2、显示背景动画
			var ua = navigator.userAgent.toLowerCase();
			if (/AppleWebKit.*Mobile/i.test(navigator.userAgent) || (
					/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-|Nokia|SonyEricsson|SIE-|Amoi|Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|ZTE/
					.test(navigator.userAgent)) || ua.match(/MicroMessenger/i) == "micromessenger") {
				var fontSize = 50; //手机字体大小
				var col_show = 0.07; //密集程度
				var textel = document.querySelector(".text");
				textel.style.fontSize = "55px";
				textel.style.paddingLeft ="12.5rem";
				str3 = '这就是我，是颜色不一样的烟火！我感觉我身上有一股倔强劲，不管做什么都会一直坚持做下去，偶尔会因为敲代码会忘记吃饭、会宅上一天，有时候仅仅是因为想把某个功能做出来。我感觉我的思维很活跃，各种各样的想法会不停的蹦出来，想的很多做的很少。人们都说好记性不如烂笔头，所以我想用博客把我各种奇思怪想都记录下来。如果你喜欢我的博客记得评论区留言告诉我，你的一句夸赞我可能会高兴好几天呢。最后欢迎你的来访！';
			} else {
				var fontSize = 20; //pc字体大小
				var col_show = 0.18;
			}
			let c = document.querySelector("#myCanvas"); //获取Canvas元素
			c.width = window.innerWidth; //获取窗口的文档显示区的宽度
			c.height = window.innerHeight; //获取窗口的文档显示区的高度
			let color_01 = "#0f0";
			let pen = c.getContext('2d'); //getContext() 方法返回一个用于在画布上绘图的环境。参数指定了您想要在画布上绘制的类型（目前只支持2d）
			let num = Array(parseInt(c.width / fontSize)).fill(0); //计算显示的文字列数（假设文字大小为20px)。数组初始值设置为0
			setInterval(function() {
				setTimeout(function(){
					color_01 = "rgb(28,227,30,0.4)";
				},showtime);//更改绘制的0、1字符的透明度
				pen.fillStyle = "rgb(0,0,0," + col_show + ")"; //画笔颜色，黑色,透明程度
				pen.fillRect(0, 0, c.width, c.height); //fillRect() 方法绘制"已填充"的矩形。默认的填充颜色是黑色。
				pen.fillStyle = color_01; //设置或返回用于填充绘画的颜色、渐变或模式。
				pen.font = fontSize + "px Calibri";
				num.forEach((y, i) => { //forEach()函数，返回的数据为当前元素、当前元素的索引值、当前元素所属的数组对象。
					//所以数组值（初始值为0） 对应 y ，数组索引 对应 i
					pen.fillText(parseInt(Math.random() + 0.5).toString(), i * fontSize, y); //fillText() 方法在画布上绘制填色的文本。文本的默认颜色是黑色。文本、x坐标、y坐标
					num[i] = Math.random() < 0.05 ? 0 : y + fontSize; //更改y坐标（增加随机数是为了产生错落感）
				})
			}, 60); //定时器让画面动了起来
			
			

			//3、实现打字机效果(正)（封装的函数）
			function showText(elment,str, time, timewait) {//可以只提供显示文本的容器element、要显示的文本str两个参数
				if (time == null) {
					time = 200;
				}
				if (timewait == null) {
					timewait = 2000;
				}
				setTimeout(function() {
					for (let i = 1; i <= str.length; i++) { //正放
						setTimeout(function() { //定时器
							elment.innerHTML = str.substr(0, i);
						}, (i - 1) * time);
					}
				}, timewait); //使用定时器增加等待时间
			}
			//4、实现打字机效果（正+倒）(下边为封装的函数)
			function showText02(element,str, num,time,timewait) {
				//time，每个字符显示的时间，建议200毫秒
				//timewait，正倒放等待时间，建议2000毫秒
				if(time == null){
					time = 200;
				}
				if(timewait == null){
					timewait = 2000;
				}
				if(num == null){
					num = 1;
				}
				for (var i = 0; i < num; i++) {//for循环控制播放次数
					setTimeout(function() {
						positive(element,str, time, timewait);
					}, (str.length * time * 2 + timewait*2) * i);//括号内的时间为一次正加一次倒
				}
			}
			//正放
			function positive(element,str, time, timewait) {
				setTimeout(function() {
					for (let i = 1; i <= str.length; i++) { //正放
						setTimeout(function() { //定时器
							element.innerHTML = str.substr(0, i);
						}, (i - 1) * time);
					}
					setTimeout(function() {
						reverse(element,str, time);
					}, str.length * time + timewait);//正放结束后再开始倒放,使用定时器增加正放时间和结束后的等待时间
				}, timewait);//播放前的等待时间
			}
			//倒放
			function reverse(element,str, time, timewait) {
				setTimeout(function() {
					for (let j = str.length; j >= 0; j--) { //倒放
						setTimeout(function() { //定时器
							element.innerHTML = str.substr(0, j);
						}, (str.length - j) * time);
					}
				}, timewait);//使用定时器增加等待时间
			}
			
			//5、实现显示多条语句
			//暂停程序
			function sleep(millisecond) {
			    return new Promise(resolve => {
			        setTimeout(() => {
			            resolve()
			        }, millisecond)
			    })
			}
			async function mult_show() {
			   showText02(textelement,str);
			   await sleep(str.length*200*2+2000*2);
			   
			   showText02(textelement,str1);
			   await sleep(str1.length*200*2+2000*2);
			   
			   showText(textelement,str2);
			   await sleep(str2.length*200+2000);
			   
			   document.querySelector(".text").style.color = "#0f0";
			   showText(textelement,str3);
			}
			
			
			//6、显示文本（执行全部写好的函数）
			setTimeout(function(){
				document.querySelector(".text").innerHTML = '<span class="word"></span><span class="gbiao">|</span>';
				textelement = document.querySelector(".word");
				mult_show();
			},showtime);
		}
	</script>
</html>

（源码中的第五部分，实现显示多条文本，即打印一段文字后，再打印一段，覆盖前边的内容。可以参考这里的笔记：传送门）（实现显示多条文本，可以使用嵌套的定时器实现，点这里查看）

若图片不能正常显示，请在浏览器中打开

欢迎关注我的其它发布渠道