介紹一個javascript 實現文字打字效果的特效實例-js教程-PHP中文網

首頁

web前端

js教程

介紹一個javascript 實現文字打字效果的特效實例

伊谢尔伦

Apr 29, 2017 pm 02:53 PM

本章節主要介紹在瀏覽網頁的時候也常常能看到文字實現打字的效果，本節程式碼主要使用了 onMousedown 事件和 event.button 屬性，主要功能和用法如下。
　　• setTimeout 方法，在執行時是在載入後延遲指定時間後，去執行一次表達式，只執行一次。
　　• charAt 方法傳回一個字元值，該字元位於指定索引位置。字串中的第一個字元的索引為0，第二個的索引為1，等等。超出有效範圍的索引值傳回空字串。

<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 id="打字效果的文字特效">打字效果的文字特效</h1> 
<hr /> 
 
<div class="ttll" id="tt10"></div> 
</center> 
</body> 
</html>

執行程式後，頁面出現一個提示訊息，然後逐一出現字元。如此逐一出現字元後，等待全部列印完畢即可停止列印。

原始程式解讀
　　（1）程式首先建立了一個層，其 ID 為 ttl0，以便於以後呼叫。這個層用來顯示列印的文字。
　　（2）程式在

元素上新增 onLoad 事件，當整個頁面載入完成以後，該事件被觸發，呼叫 init() 事件處理函數，對該事件進行處理。
　　（3）在函數 txtTyper() 中，使用 charAt 方法得到字串中的某個字元。使用 if 條件語句判斷該字元是否滿足盡頭。滿足條件後列印在頁面上。
　　（4）在 if 語句中，也可使用任意合法的 Javascript 語句，完成更複雜的操作。

以上是介紹一個javascript 實現文字打字效果的特效實例的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

Python vs. JavaScript：學習曲線和易用性Apr 16, 2025 am 12:12 AM

Python更適合初學者，學習曲線平緩，語法簡潔；JavaScript適合前端開發，學習曲線較陡，語法靈活。 1.Python語法直觀，適用於數據科學和後端開發。 2.JavaScript靈活，廣泛用於前端和服務器端編程。

Python vs. JavaScript：社區，圖書館和資源Apr 15, 2025 am 12:16 AM

Python和JavaScript在社區、庫和資源方面的對比各有優劣。 1)Python社區友好，適合初學者，但前端開發資源不如JavaScript豐富。 2)Python在數據科學和機器學習庫方面強大，JavaScript則在前端開發庫和框架上更勝一籌。 3)兩者的學習資源都豐富，但Python適合從官方文檔開始，JavaScript則以MDNWebDocs為佳。選擇應基於項目需求和個人興趣。

從C/C到JavaScript：所有工作方式Apr 14, 2025 am 12:05 AM

從C/C 轉向JavaScript需要適應動態類型、垃圾回收和異步編程等特點。 1）C/C 是靜態類型語言，需手動管理內存，而JavaScript是動態類型，垃圾回收自動處理。 2）C/C 需編譯成機器碼，JavaScript則為解釋型語言。 3）JavaScript引入閉包、原型鍊和Promise等概念，增強了靈活性和異步編程能力。

JavaScript引擎：比較實施Apr 13, 2025 am 12:05 AM

不同JavaScript引擎在解析和執行JavaScript代碼時，效果會有所不同，因為每個引擎的實現原理和優化策略各有差異。 1.詞法分析：將源碼轉換為詞法單元。 2.語法分析：生成抽象語法樹。 3.優化和編譯：通過JIT編譯器生成機器碼。 4.執行：運行機器碼。 V8引擎通過即時編譯和隱藏類優化，SpiderMonkey使用類型推斷系統，導致在相同代碼上的性能表現不同。

超越瀏覽器：現實世界中的JavaScriptApr 12, 2025 am 12:06 AM

JavaScript在現實世界中的應用包括服務器端編程、移動應用開發和物聯網控制：1.通過Node.js實現服務器端編程，適用於高並發請求處理。 2.通過ReactNative進行移動應用開發，支持跨平台部署。 3.通過Johnny-Five庫用於物聯網設備控制，適用於硬件交互。

使用Next.js（後端集成）構建多租戶SaaS應用程序Apr 11, 2025 am 08:23 AM

我使用您的日常技術工具構建了功能性的多租戶SaaS應用程序（一個Edtech應用程序），您可以做同樣的事情。首先，什麼是多租戶SaaS應用程序？多租戶SaaS應用程序可讓您從唱歌中為多個客戶提供服務

如何使用Next.js（前端集成）構建多租戶SaaS應用程序Apr 11, 2025 am 08:22 AM

本文展示了與許可證確保的後端的前端集成，並使用Next.js構建功能性Edtech SaaS應用程序。前端獲取用戶權限以控制UI的可見性並確保API要求遵守角色庫

JavaScript：探索網絡語言的多功能性Apr 11, 2025 am 12:01 AM

JavaScript是現代Web開發的核心語言，因其多樣性和靈活性而廣泛應用。 1)前端開發：通過DOM操作和現代框架（如React、Vue.js、Angular）構建動態網頁和單頁面應用。 2)服務器端開發：Node.js利用非阻塞I/O模型處理高並發和實時應用。 3)移動和桌面應用開發：通過ReactNative和Electron實現跨平台開發，提高開發效率。

See all articles