超实用的JavaScript代码段—打字机效果

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>实现打字机效果</title>
	<style>
		td {
			border: 1px solid #ccc;
			height: 50px;
			text-align: center;
			font-size: 10px;
			padding: 2px;
		}
		#typewriterEffect2 {
			text-indent: 2rem;
			text-shodow: 0 0 2px gray;
			padding: 5px;
			transition: all 0.3s linear;
			font-weight: bold;
			font-size: 25px;
			width: 500px;
		}
	</style>
</head>
<body>
	<h2>实现打字机效果</h2>
	<p id="typewriterEffect"></p>
	<p id="typewriterEffect2"></p>
	<script>
		window.onload = function(){
			var typewriterArr = [],//打字的数据库队列
				typewritering = false,//打字机的线程是否开启
				typewriterID = -1,//打字机的线程ID
				typewriterTime = 200,//定时调用的时间

				typewriterEffect = function(e,str,color){//增加显示的元素
					typewriterArr.push({
						"context":e,//目标元素上下文
						"str":str,//显示的元素
						"lening":0,//截取的进度
						"maxLength":str.length//最大进度
					});
					e.style.color = color||"#000000";//设置元素颜色
				},
				closeTypewriter = function(){//关闭定时调用
					clearTimeout(typewriterID);//清除线程
					typewritering = false;//改变状态
				},
				typewriterUi = function(){//定时调用显示UI
					var i = 0,
						l = typewriterArr.length,
						eing = null;
					for(;i<1;i++){
						eing = typewriterArr[i];
						/*判断中英文进行+2或+1操作
						递增,获取最新截取的长度*/
						eing.lening++;
						//如果截取的长度超过最大长度,泽截取的长度设置为1
						if(eing.lening>eing.maxLength)eing.lening = 0;
						//显示截取的字符
						eing.context.innerHTML = eing.str.substring(0,eing.lening)+"_";
					}
					typewriterID = setTimeout(typewriterUi,typewriterTime);
				};
				//隔时间调用一次定时器,生成一个随机颜色

    			function time(){
    				console.log(1);
    				setInterval(ran,1000);  

    				function ran() {
      					var x = Math.floor(Math.random() * (255 - 0 + 1) + 0);
      					var y = Math.floor(Math.random() * (255 - 0 + 1) + 0);
      					var z = Math.floor(Math.random() * (255 - 0 + 1) + 0);
      					var color = "rgb(" + x + "," + y + "," + z + ")";     			
      					typewriterEffect2.style.color=color;			   				
    				}
    			};
				//开启定时调用,参数为设置定时器调用的时间
				startTypewriter = function(){

					if (!typewritering) {//如果没有开启,则开启
						typewriterTime = typewriterTime||typewriterTime;
						typewriterUi();//开始定时调用
					}
				};
				typewriterEffect(
					document.getElementById("typewriterEffect2"),"我化尘埃飞扬,追寻赤裸逆翔。
奔去七月刑场,时间烧灼滚烫。回忆撕毁臆想,路上行走匆忙。难能可贵世上,散播留香磁场。我欲乘风破浪,踏遍黄沙海洋。与其误会一场,
也要不负勇往。我愿你是个谎,从未出现南墙。笑是神的伪装,笑是强忍的伤",time()
				);
				startTypewriter(100);
		}
	</script>
</body>
</html>

欢迎分享本文,转载请保留出处:前端ABC » 超实用的JavaScript代码段—打字机效果

分享到:更多 ()

发表评论 0