js教程

js线程的案例— —实现随机速度的打字机效果

php是最好的语言

Aug 02, 2018 am 09:29 AM

打字机效果

目录
随机速度的打字机效果

效果
代码

引用到的知识点

利用定时器触发线程
利用事件触发线程
线程
随机数

快捷链接

随机速度的打字机效果

效果

代码

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(&#39;custom&#39;,f2);  //这里绑定事件以jQuery写法为例function f1(){setTimeout(function(){
    // f1的代码
    $f1.trigger(&#39;custom&#39;);
},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实现的打字机效果示例代码

相关视频：

实现全屏切换效果实战视频教程

以上是js线程的案例— —实现随机速度的打字机效果的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

JavaScript数据类型：浏览器和nodejs之间是否有区别？May 14, 2025 am 12:15 AM

JavaScript核心数据类型在浏览器和Node.js中一致，但处理方式和额外类型有所不同。1)全局对象在浏览器中为window，在Node.js中为global。2)Node.js独有Buffer对象，用于处理二进制数据。3)性能和时间处理在两者间也有差异，需根据环境调整代码。

JavaScript评论：使用//和 / * * / * / * /May 13, 2025 pm 03:49 PM

JavaScriptusestwotypesofcomments:single-line(//)andmulti-line(//).1)Use//forquicknotesorsingle-lineexplanations.2)Use//forlongerexplanationsorcommentingoutblocksofcode.Commentsshouldexplainthe'why',notthe'what',andbeplacedabovetherelevantcodeforclari

Python vs. JavaScript：开发人员的比较分析May 09, 2025 am 12:22 AM

Python和JavaScript的主要区别在于类型系统和应用场景。1.Python使用动态类型，适合科学计算和数据分析。2.JavaScript采用弱类型，广泛用于前端和全栈开发。两者在异步编程和性能优化上各有优势，选择时应根据项目需求决定。

Python vs. JavaScript：选择合适的工具May 08, 2025 am 12:10 AM

选择Python还是JavaScript取决于项目类型：1)数据科学和自动化任务选择Python；2)前端和全栈开发选择JavaScript。Python因其在数据处理和自动化方面的强大库而备受青睐，而JavaScript则因其在网页交互和全栈开发中的优势而不可或缺。

Python和JavaScript：了解每个的优势May 06, 2025 am 12:15 AM

Python和JavaScript各有优势，选择取决于项目需求和个人偏好。1.Python易学，语法简洁，适用于数据科学和后端开发，但执行速度较慢。2.JavaScript在前端开发中无处不在，异步编程能力强，Node.js使其适用于全栈开发，但语法可能复杂且易出错。

JavaScript的核心：它是在C还是C上构建的？May 05, 2025 am 12:07 AM

javascriptisnotbuiltoncorc; saninterpretedlanguagethatrunsonenginesoftenwritteninc.1）javascriptwasdesignedAsalightweight，解释edganguageforwebbrowsers.2）Enginesevolvedfromsimpleterterterpretpreterterterpretertestojitcompilerers，典型地提示。

JavaScript应用程序：从前端到后端May 04, 2025 am 12:12 AM

JavaScript可用于前端和后端开发。前端通过DOM操作增强用户体验，后端通过Node.js处理服务器任务。1.前端示例：改变网页文本内容。2.后端示例：创建Node.js服务器。

Python vs. JavaScript：您应该学到哪种语言？May 03, 2025 am 12:10 AM

选择Python还是JavaScript应基于职业发展、学习曲线和生态系统：1)职业发展：Python适合数据科学和后端开发，JavaScript适合前端和全栈开发。2)学习曲线：Python语法简洁，适合初学者；JavaScript语法灵活。3)生态系统：Python有丰富的科学计算库，JavaScript有强大的前端框架。

See all articles