您的位置：首页 > Web前端 > JavaScript

【Javascript学习笔记】【js线程实战— —实现随机速度的打字机效果】

2018-08-01 16:45 573 查看
版权声明：本文为博主原创文章，未经博主允许不得转载。（github:KuanG97） https://blog.csdn.net/m0_37136491/article/details/81333603

目录

  • 引用到的知识点
  • 随机数
  • 实战代码Download
  • 快捷链接

    • 随机速度的打字机效果

    效果

    代码

    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(）
    只取随机数整数部分

    实战代码Download

    (github：KuanG97) 下载实战代码 ClickHere》

    快捷链接

    全部React学习笔记的目录 Click Here>>
    全部Javascript学习笔记的目录 Click Here>>
    Less学习笔记 Click Here>>
    安利一波前端开发推荐使用的工具 Click Here>>
    github各类实战练习源码下载 Click Here>>
    如果你觉得我的东西能帮到你，无限欢迎给我的github库点个收藏Star~0v 0~

    阅读更多
    内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
    标签： 
    相关文章推荐
    新的分享
    章节导航