ホームページ > 記事 > ウェブフロントエンド > jsスレッドの場合 - ランダム速度のタイプライター効果の実現
目次
目次
ランダムスピードタイプライターエフェクト
エフェクト
コード
引用された知識ポイント
タイミングを使用する イベントトリガースレッド
は、イベントを使用してスレッドをトリガーします
スレッド
乱数
クイックリンク
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シングルスレッド(シングルスレッド)と非同期(非同期)ですが、互いに矛盾しません、jsホスト環境 (ブラウザ、ノードなど) はマルチスレッドであり、ホスト環境は何らかの方法で js に非同期プロパティを持たせます。
setTimeout(function(){ console.log(time is out); },50);
タイマー setTimeout
と setinterval
の違いについて質問する人もいます: 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()
setTimeout (テーブル遅延時間) は、実行時にロード後に遅延します 指定された時間が経過すると、
と setInterval (テーブルの対話時間) は異なります。ロード後、
(欠点: 異なるイベントをバインドすることで、異なるコールバック関数を実装できます。このメソッドを使用すると多すぎるため、プログラムを読みにくくなります)rrreee乱数
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 中国語 Web サイトの他の関連記事を参照してください。