使用JS实现一个打字机字符输出效果

发布网友发布时间：2022-04-29 21:17

我来回答

共2个回答

懂视网时间：2022-05-14 21:25

随机速度的打字机效果

效果

代码

引用到的知识点

利用定时器触发线程

利用事件触发线程

线程

随机数

快捷链接

随机速度的打字机效果

效果

代码

html部分

<!DOCTYPE html><html lang="en"><head>
 <meta charset="UTF-8">
 <title>typeWriter</title>
 <style type="text/css">
 h2,h5,#tooltipMsg,p{  white-space: nowrap; }
 td{  border: 1px solid #ccc;  height: 50px;  text-align: center;  font-size: 10pt;  padding: 2px; }
 </style></head><body>
 <h2>实现打字机效果</h2>
 <p id="typeWriterEffect"></p>
 <p id="typeWriterEffect2"></p>
 <script type="text/javascript" src="typeWriter.js"></script></body></html>

js部分

window.onload=function(){
 var twArr = [],//打字的数据库队列
 twing = false,//用于判断打字机的线程是否开启
 twID = [],//打字机线程ID
 twTime = 10,//用于定时调用的时间
 obj1 = document.getElementById("typeWriterEffect"),
 obj2 = document.getElementById("typeWriterEffect2"),
 twEffect = function(e,str){//添加显示的元素
  twArr.push({  "context":e,//目标元素上下文
  "str":str,//显示的元素
  "lening":0,//截取的进度
  "maxL":str.length//最大的进度
  })
 },
 closeTw = function(){//关闭定时调用
  clearTimeout(twID);//关闭线程
  twing = true;
 },
 twUi = function(){//定时调用
  var i = 0,
  L = twArr.length,
  eing = null;  for (var i = 0; i < L; i++) {
   eing = twArr[i]//效果同时加载多对象数组
   eing.lening++;   if (eing.lening>eing.maxL) {//不设置关闭线程则打字效果循环
   eing.lening = 0;
   }
   eing.context.innerHTML = eing.str.substring(0,eing.lening)+"_";
  }  var num = Math.floor(Math.random()*50+1);//1-50个随机数
  console.log(num);
  twID = setTimeout(twUi,num*twTime);//开启线程
  if(twID==eing.maxL){//到达最后关闭线程
   closeTw();
  }
 }, //开启定时调用，参数为设置定时调用的时间
 startTw = function (twTime) {
  if (!twing) {//如果没有开启才开启
  twTime = twTime;
  twUi();//开始定时调用
  }
 }; //设置内容对象数组
 twEffect(obj1,"这就是打字机效果,打字速度随机哦！！！！！"); //开始调用线程
 startTw(twTime);
}

引用到的知识点

线程

js的单线程（single threaded）和异步（asynchronous）的，但是并不互相矛盾，js的宿主环境（比如浏览器，Node）是多线程的，宿主环境通过某种方式使得js具备了异步的属性。

setTimeout(function(){
 console.log(time is out);
}，50）;

有的人就会问到定时器setTimeout和setinterval 的区别：
setTimeout(表延时时间)在执行时,是在载入后延迟指定时间后只去执行一次表达式,
而setInterval(表交互时间)则不一样,它从载入后,每隔指定的时间就执行一次表达式

利用定时器触发线程

（缺点：耦合度高）

function f1(callback){setTimeout(function(){
 // f1 的代码
 callback();
},0);
}
f1(f2);

利用事件触发线程

（缺点：可以通过绑定不同的事件，实现不同的回调函数，如果应用这种方法过多，不利于阅读程序）

$f1.on('custom',f2); //这里绑定事件以jQuery写法为例function f1(){setTimeout(function(){
 // f1的代码
 $f1.trigger('custom');
},0);
}

随机数

Math.random()取0-1随机数
同理拓展例子：
Math.random()*10取0-10随机数（包括一大堆小数点）
Math.random()*10+1取1-10随机数
Math.random()*10+2取2-10随机数
Math.random()*899+100取100-999随机数
其中常用：Math.floor(）只取随机数整数部分

JS实现的打字机效果完整实例

JS实现的打字机效果示例代码