javascript實作自動輸出文本-js教程-PHP中文網

首頁

web前端

js教程

javascript實作自動輸出文本

高洛峰

Feb 06, 2017 am 11:07 AM

主要利用了setTimeout(),遞歸和String.substring();

做出的效果就像是有一個打字員在打字.

<!doctype html>
<html>
<head>
 <meta charset="UTF-8">
 <meta name="Generator" content="EditPlus®">
 <meta name="Author" content="">
 <meta name="Keywords" content="">
 <meta name="Description" content="">
 <title>Document</title>
</head>
<body bgcolor="#ccc" onload="printer();">
  <h2 id="文本自动输出">文本自动输出</h2>
  <br>
  <br>
  <hr width="400" color="black">
  <br>
 <form>
  <textarea cols="50" rows="30" id="text" style="background-color:#FF99CC; color: #330033; cursor: default; font-family: Arial; font-size: 18px" wrap=virtual></textarea>
 </form>
</body>
<script type="text/javascript">
 
  //获取textarea对象
  var text=document.getElementById("text");
  //要输出的内容
  var str="  传统的HTML语言不能开发交互式的动态网页，而JavaScript却能很好的做到这一点。JavaScript是一门相当简单易学的网络化编程语言，通过把她和HTML语言相互结合起来，能够实现实时的动态网页特效，这给网页浏览者在浏览网页的同时也提供了某些乐趣。";
  var pos=0;
  //利用递归和setTimeout()实现文字输出
  function printer(){
    text.value=str.substring(0,pos)+"|";
    //判断是否到达结尾.如果是则一秒后再来一遍.
    if(pos++>str.length){
      pos=0;
      setTimeout("printer()",1000);
    }else{
      setTimeout("printer()",50);
    }
  }
</script>
</html>

方法二：JavaScript實現打字電腦打字效果

<span id="demo"></span>
<script defer>
var text="JavaScript实现的打字效果"  //预定文字
var delay=200             //文字出现的时间间隔
var i=0                //初始化变量 i
function scrollit(){
//设置 id 为 demo 的对象内的文字为从变量 text 的 0 开始到 i 间的文字加"_"
demo.innerText=text.slice(0,i++)+"_" 
if(i>text.length){       //当 i 大于 text 的文本长度时
  i=0              //重设 i 为 0，使文字重新从第一个文字出现
//延时执行scrollit()函数,delay*10是为了让显示完整文字的时间长一点
  setTimeout("scrollit()",delay*10) 
}
  //否则在delay毫秒后再次执行scrollit()函数
else setTimeout("scrollit()",delay)       
}
scrollit() //调用scrollit()函数
</script>

方法三：方法二：JavaScript實現打字電腦打字效果

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
  <title>标题页</title>
 <script language=javascript>
var layers =document.layers;
var style=document.all;
var both=layers||style;
var idme=908601;
if(layers)
{ layerRef=&#39;document.layers&#39;;styleRef =&#39;&#39;;}
if(style)
{ layerRef=&#39;document.all&#39;;styleRef = &#39;.style&#39;;}
//开始参数的定义
function writeOnText(obj,str)
{
if(layers)with(document[obj])
{ document.open();document.write(str);document.close();}
if(style)eval(obj+&#39;.innerHTML=str&#39;); 
}
var dispStr=new Array("证监会称将严查利用内幕信息牟取不当利益行为!"); //要出现的文本
var overMe=0;
//逐字显示的方法
function txtTyper(str,idx,objId,objStyle,color1,color2,delay,plysnd)
{
var mystr=&#39;&#39;,strchar=&#39;&#39;;
var skip=200;
if (both && idx<=str.length) {
if (str.charAt(idx)==&#39;<&#39;){ while(str.charAt(idx)!=&#39;>&#39;) idx++;}
if (str.charAt(idx)==&#39;&&#39;&&str.charAt(idx+1)!=&#39; &#39;){ while (str.charAt(idx)!= &#39;;&#39;)idx++;}
mystr = str.slice(0,idx);  //返回数组从开始到指定位置的字符串
strchar = 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(objId, "<span class="+objStyle+"><font color=&#39;"+color1+"&#39;>"+mystr+"</font><font color=&#39;"+color2
+"&#39;>"+strchar+"</font></span>");
setTimeout("txtTyper(&#39;"+str+"&#39;, "+idx+", &#39;"+objId+"&#39;, &#39;"+objStyle+"&#39;, &#39;"+color1+"&#39;, &#39;"+color2+"&#39;, "+delay+" ,"+plysnd+")",delay);}}
function init()
{txtTyper(dispStr[0], 0, &#39;div1&#39;, &#39;style1&#39;, &#39;#66CCBB&#39;, &#39;#000000&#39;, 400, 0);}
</script>
<BODY onload=init()>
<DIV class=style1 id=div1></DIV>
</BODY>
</html>

方法三：方法二：JavaScript實現打字電腦打字效果

rrreee🎜方法三：方法二：JavaScript實現打字電腦打字效果🎜rrreee🎜方法三： 🎜rrreee🎜更多javascript實現自動輸出文字相關文章請關注PHP中文網！ 🎜

陳述

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

JavaScript在行動中：現實世界中的示例和項目Apr 19, 2025 am 12:13 AM

JavaScript在現實世界中的應用包括前端和後端開發。 1)通過構建TODO列表應用展示前端應用，涉及DOM操作和事件處理。 2)通過Node.js和Express構建RESTfulAPI展示後端應用。

JavaScript和Web：核心功能和用例Apr 18, 2025 am 12:19 AM

JavaScript在Web開發中的主要用途包括客戶端交互、表單驗證和異步通信。 1)通過DOM操作實現動態內容更新和用戶交互；2)在用戶提交數據前進行客戶端驗證，提高用戶體驗；3)通過AJAX技術實現與服務器的無刷新通信。

了解JavaScript引擎：實施詳細信息Apr 17, 2025 am 12:05 AM

理解JavaScript引擎內部工作原理對開發者重要，因為它能幫助編寫更高效的代碼並理解性能瓶頸和優化策略。 1)引擎的工作流程包括解析、編譯和執行三個階段；2)執行過程中，引擎會進行動態優化，如內聯緩存和隱藏類；3)最佳實踐包括避免全局變量、優化循環、使用const和let，以及避免過度使用閉包。

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使用類型推斷系統，導致在相同代碼上的性能表現不同。