Introducing a special effect example using javascript to achieve text typing effect-JS Tutorial-php.cn

Introducing a special effect example using javascript to achieve text typing effect

伊谢尔伦

Release： 2017-04-29 14:53:08

Original

1916 people have browsed it

This chapter mainly introduces the typing effect that can often be seen when browsing the web. The code in this section mainly uses the onMousedown event and the event.button attribute. The main functions and usage are as follows.
　• The setTimeout method, when executed, executes the expression once and only once after delaying the specified time after loading.
　• The charAt method returns a character value that is located at the specified index position. The first character in the string has index 0, the second has index 1, and so on. Index values outside the valid range return an empty string.

<html> 
<head> 
<title>打字效果的文字特效</title> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<script language="Javascript"> 
var layers = document.layers; 
var style = document.all; 
var both = layers || style; 
var idme = 908601; 
if(layers) //如果不是ie浏览器 
{ 
layerRef = &#39;document.layers&#39;; 
styleRef = &#39;&#39;; 
} 
if(style) //如果是ie浏览器 
{ 
layerRef = &#39;document.all&#39;; 
styleRef = &#39;.style&#39;; 
} 
function writeOnText(obj, str) { //函数在页面上打印字符串 
if(layers) { 
with(document[obj]) { 
document.open(); 
document.write(str); //write方法打印字符串 
document.close(); 
} 
} 
if(style) eval(obj+&#39;.innerHTML = str&#39;); //使用innerHTML属性显示字符串 
} 
var dispStr = new Array("phpcn"); //字符串数组 
var overMe = 0; 
function txtTyper(str, idx, idObj, spObj, clr1,clr2, delay, plysnd) //函数:实现打字效果 
{ 
var tmp0 = tmp1 = &#39;&#39;, skip = 100; 
if(both && idx <= str.length) { 
if(str.charAt(idx) == &#39;<&#39;) { 
while(str.charAt(idx) != &#39;>&#39;) idx++; 
idx++; 
} 
if(str.charAt(idx) == &#39;&&#39; && str.charAt(idx+1) != &#39;&#39;) { 
while(str.charAt(idx) != &#39;;&#39;) idx++; 
idx++; 
} 
tmp0 = str.slice(0, idx); 
tmp1 = str.charAt(idx++); 
if(overMe==0 && plysnd==1) { 
if(navigator.plugins[0]) { 
if(navigator.plugins["LiveAudio"][0].type == "audio/basic" && navigator.javaEnabled()) { 
document.embeds[0].stop(); 
setTimeout("document.embeds[0].play(false)", 100); 
} 
} else if(document.all) { 
ding.Stop(); 
setTimeout("ding.Run()", 100); 
} 
overMe = 1; 
} else { 
overMe = 0; 
} 
writeOnText(idObj, "<span class="+spObj+"><font color=&#39;"+clr1+"&#39;>"+tmp0+"</font><font color=&#39;"+clr2+"&#39;>"+tmp1+"</font></span>"); 
//调用writeOnText函数将字符显示在网页上 
setTimeout("txtTyper(&#39;"+str+"&#39;, "+idx+", &#39;"+idObj+"&#39;, &#39;"+spObj+"&#39;, &#39;"+clr1+"&#39;, &#39;"+clr2+"&#39;, "+delay+", "+plysnd+")", delay); 
} 
} 
function init() 
{ 
txtTyper(dispStr[0], 0, &#39;tt10&#39;, &#39;ttll&#39;, &#39;#339933&#39;, &#39;#99FF33&#39;, 300, 0);　//调用txtTyper函数开始打字 
} 
</script> 
</head> 
<body onLoad="init();"> 
<center> 
<h1>打字效果的文字特效</h1> 
<hr /> 
  
<div class="ttll" id="tt10"></div> 
</center> 
</body> 
</html>

Copy after login

After running the program, a prompt message appears on the page, and then characters appear one by one. After characters appear one by one in this way, wait until all printing is completed to stop printing.

Source program interpretation
　(1) The program first creates a layer with an ID of ttl0 for easy calling later. This layer is used to display printed text.
　(2) The program adds an onLoad event to the element. When the entire page is loaded, the event is triggered and the init() event handling function is called to process the event.
　 (3) In the function txtTyper(), use the charAt method to get a certain character in the string. Use the if conditional statement to determine whether the character meets the end. Printed on the page after the conditions are met.
　(4) In the if statement, you can also use any legal Javascript statement to complete more complex operations.

The above is the detailed content of Introducing a special effect example using javascript to achieve text typing effect. For more information, please follow other related articles on the PHP Chinese website!