この記事では、JSによって実装されたタイプライター効果について説明します。次のように、参照のために共有してください。
<!doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <! - 常に最新のIEレンダリングエンジン(イントラネットでも)&クロムフレームを使用する場合はこれを削除 - > <メタhttp-equiv = " Typewriter Effect </title> <meta name = "description" content = ""> <meta name = "著者" content = "meta name =" viewport "content =" width = device-width; device-width; {幅:80%;高さ:750px;マージン:自動;パディング:10px;背景:#cfe1ca;境界線:10px冒頭#f9c6aa; Line-Height:30px;色:#9F3C61;フォントサイズ:18px; } p {text-indent:30px; } </style> <script type = "text/javascript"> var typewriter = {msg:function(msg){return msg; }、len:function(){return this.msg.length; }、seq:0、速度:150、//タイピング時間(ms)タイプ:function(){var _this = this; document.getElementById( "main")。innerhtml = _this.msg.substring(0、_this.seq); if(_this.seq == _this.len()){_this.seq = 0; cleartimeout(t); } else {_this.seq ++; var t = setimeout(function(){_ this.type()}、this.speed); }}} window.onload = function(){alert( "Welcome to //www.vevb.com")var msg = "JS TypewRiter効果、原則は非常に単純です。関数getMsg(){return msg; } typewriter.msg = getMSG(MSG); typewriter.type(); } </script> </head> <body> <div id = "main"> </div> </body> </html>JavaScript関連のコンテンツの詳細については、このサイトのトピックをご覧ください:「JavaScriptの切り替え効果とテクニックの要約」、「JavaScript検索アルゴリズムスキルの要約」、「JavaScriptアニメーション効果とテクニックの概要」、「Javascriptエラー、および「Javascriptデータ構造」の概要」の概要の要約の要約をご覧ください。 JavaScriptトラバーサルアルゴリズムとテクニック」、および「JavaScriptの数学的操作の使用法の要約」
この記事がみんなのJavaScriptプログラミングに役立つことを願っています。