ホームページ > 記事 > ウェブフロントエンド > JavaScriptを使用してタイプライター効果を実現する方法の詳細な説明

JavaScriptを使用してタイプライター効果を実現する方法の詳細な説明

伊谢尔伦オリジナル: 2017-07-25 15:22:301861ブラウズ

JavaScript タイプライター効果
例 1

<html>
<title>JavaScript 打字机</title>
<head>
<style type="text/css">
 body{
  font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
  margin-top:0px;
  background-image:url(&#39;../../images/heading3.gif&#39;);
  background-repeat:no-repeat;
  padding-top:100px;
 }
 #myContent, #myContent blink{
  width:500px;
  height:200px;
  background:black;
  color: #00FF00;
  font-family:courier;
 } 
 blink{
  display:inline;
  
 }
 </style>
 <script type="text/javascript">
 var charIndex = -1;
 var stringLength = 0;
 var inputText;
 function writeContent(init){
  if(init){
   inputText = document.getElementById(&#39;contentToWrite&#39;).innerHTML;
  }
  if(charIndex==-1){
   charIndex = 0;
   stringLength = inputText.length;
  }
  var initString = document.getElementById(&#39;myContent&#39;).innerHTML;
  initStringinitString = initString.replace(/<SPAN.*$/gi,"");
    
  var theChar = inputText.charAt(charIndex);
  var nextFourChars = inputText.substr(charIndex,4);
  if(nextFourChars==&#39;<BR>&#39; || nextFourChars==&#39;<br>&#39;){
   theChar = &#39;<BR>&#39;;
   charIndex+=3;
  }
  initStringinitString = initString + theChar + "<SPAN id=&#39;blink&#39;>_</SPAN>";
  document.getElementById(&#39;myContent&#39;).innerHTML = initString;
  
  charIndexcharIndex = charIndex/1 +1;
  if(charIndex%2==1){
    document.getElementById(&#39;blink&#39;).style.display=&#39;none&#39;;
  }else{
    document.getElementById(&#39;blink&#39;).style.display=&#39;inline&#39;;
  }
      
  if(charIndex<=stringLength){
   setTimeout(&#39;writeContent(false)&#39;,150);
  }else{
   blinkSpan();
  }
 }
   
 var currentStyle = &#39;inline&#39;;
 function blinkSpan(){
  if(currentStyle==&#39;inline&#39;){
   currentStyle=&#39;none&#39;;
  }else{
   currentStyle=&#39;inline&#39;;
  }
  document.getElementById(&#39;blink&#39;).style.display = currentStyle;
  setTimeout(&#39;blinkSpan()&#39;,500);
    
 }
 </script>
  
<body>
  
<div id="myContent">
</div>
<div id="contentToWrite" style="display:none">
 <!-- Put the typewriter content here-->
 sharejs.com
 Login : username<br>
 password : ******<br>
 Access is granted<br>
 <!-- End typewriter content -->
 </div>
 <script type="text/javascript">
 writeContent(true);
</script>
  
  
</body>
</html>

例 2 (IE、FX と互換性あり)

<html>
<head>
<title>打字效果的带链接的新闻标题</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
body{font-size:14px;font-weight:bold;}
</style>
</head>
<body>
最新内容：<a id="HotNews" href="" target="_blank"></a>
<script language="JavaScript">
var NewsTime = 2000; //每条新闻的停留时间
var TextTime = 50; //新闻标题文字出现等待时间，越小越快
  
var newsi = 0;
var txti = 0;
var txttimer;
var newstimer;
  
var newnewstitle = new Array(); //新闻标题
var newnewshref = new Array(); //新闻链接
  
newstitle[0] = "javascript常用函数";
newshref[0] = "http://www.jb51.net/article/74365.htm";
  
newstitle[1] = "http://www.jb51.net/";
newshref[1] = "http://www.jb51.net/";
  
function shownew()
{
 var endstr = "_";
 hwnewstr = newstitle[newsi];
 newslink = newshref[newsi];
 if(txti==(hwnewstr.length-1)){endstr="";}
 if(txti>=hwnewstr.length){
 clearInterval(txttimer);
 clearInterval(newstimer);
 newsi++;
 if(newsi>=newstitle.length){
 newsi = 0
 }
 newstimer = setInterval("shownew()",NewsTime);
 txti = 0;
 return;
 }
 clearInterval(txttimer);
 document.getElementById("HotNews").href=newslink;
 document.getElementById("HotNews").innerHTML = hwnewstr.substring(0,txti+1)+endstr;
 txti++;
 txttimer = setInterval("shownew()",TextTime);
}
shownew();
</script>
</body>
</html>

以上がJavaScriptを使用してタイプライター効果を実現する方法の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：JavaScriptがCookieを有効にするかどうかを判断し、Cookieコードを操作する方法の詳細な説明次の記事：JavaScriptがCookieを有効にするかどうかを判断し、Cookieコードを操作する方法の詳細な説明

続きを見る