前端ABC<!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代码段—打字机效果