js实现页面打字机，动态显示文字

2015-5-13 Jon

最简洁的js简单打印机效果代码

<br />
  <!DOCTYPE html><br />
  <html lang="en"><br />
  <head><br />
    <meta charset="UTF-8"><br />
    <title>最简洁的js简单打印机效果代码</title><br />
    <!--<br />
      注：在js中，innerHTML 可以在里面写入html代码，比如 <br> 会解析成换行，而不会显示<br />
              innerText 只能在里面写入文本，比如 <br> 会显示为 <br>，而不会解析为换行<br />
     --><br />
  </head><br />
  <body><br />
    <div id="dazi" style="font-size: 20px; color: fuchsia"></div><br />
    <script><br />
      window.onload=function(){<br />
        var dazi=document.getElementById('dazi');<br />
        var msg="昨夜星辰昨夜风，画楼西畔桂堂东。<br>身无彩凤双飞翼，心有灵犀一点通。";<br />
        var len=msg.length;<br />
        var seq=0;<br />
        var speed=200;<br />
        var timeId=null;<br />
        function daziStart(){<br />
          dazi.innerHTML=msg.substring(0,seq)+'_';<br />
          if(seq<=len){<br />
            seq++;<br />
            timeId=setTimeout(daziStart,speed);<br />
          }else{<br />
            setTimeout(function() {<br />
              dazi.innerHTML=msg.substring(0,seq);<br />
            }, 800);<br />
          }<br />
        }<br />
        daziStart();<br />
      }<br />
    </script><br />
  </body><br />
  </html><br />

您可以修改框中代码后运行查看

js打字机在表单中的使用

<br />
  <!DOCTYPE html><br />
  <html lang="en"><br />
  <head><br />
    <meta charset="UTF-8"><br />
    <title>js打字机在表单中的使用</title><br />
  </head><br />
  <body><br />
    <body><br />
    <form name="show"><br />
      <input wrap="virtual" name="marquee1" style="width:1200px;height:30px;"><br />
    </form><br />
    <script><br />
      window.onload=function(){<br />
        var i = 0;<br />
        var showString= "怅望浮生急景，凄凉宝瑟馀音。楚客多情偏怨别，碧山远水登临。目送连天衰草，夜阑几处疏砧。黄叶无风自落，秋云不雨长阴。天若有情天亦老，摇摇幽恨难禁。惆怅旧欢如梦，觉来无处追寻。";<br />
        function marquee(){<br />
          var stringLength= showString.length;<br />
          document.show.marquee1.value= document.show.marquee1.value + showString.charAt(i);<br />
          i++;<br />
          var timeID= setTimeout(marquee,100);<br />
          if (i >= stringLength){<br />
            clearTimeout(timeID);<br />
            // i=0;<br />
            // location.href="http://yuanqiao.ss.ma"<br />
          }<br />
          console.log(i);<br />
        }<br />
        marquee();<br />
      }<br />
    </script><br />
  </body><br />
  </html><br />

您可以修改框中代码后运行查看

轮番替换的js打字效果

<br />
  <!DOCTYPE html><br />
  <html lang="en"><br />
  <head><br />
    <meta charset="UTF-8"><br />
    <title>轮番替换的js打字效果</title><br />
  </head><br />
  <body><br />
    <body><br />
      《离思》：<br />
      <a id="HotNews" href="" _fcksavedurl="" target="_blank"></a><br />
      <script><br />
        var NewsTime = 2000; //每条诗句的停留时间<br />
        var TextTime = 200; //诗句标题文字出现等待时间，越小越快<br />
        var newsi = 0;<br />
        var txti = 0;<br />
        var txttimer;<br />
        var newstimer;<br />
        var newstitle = new Array(); //诗句<br />
        var newshref = new Array(); //诗句链接<br />
        newstitle[0] = "曾经沧海难为水";<br />
        newshref[0] = "http://yuanqiao.ss.ma";<br />
        newstitle[1] = "除却巫山不是云";<br />
        newshref[1] = "http://yuanqiao.ss.ma";<br />
        newstitle[2] = "取次花丛懒回顾";<br />
        newshref[2] = "http://yuanqiao.ss.ma";<br />
        newstitle[3] = "半缘修道半缘君";<br />
        newshref[3] = "http://yuanqiao.ss.ma";<br />
        function shownew() {<br />
            var endstr = "_"<br />
            hwnewstr = newstitle[newsi];<br />
            newslink = newshref[newsi];<br />
            if (txti == (hwnewstr.length - 1)) {<br />
                endstr = "";<br />
            }<br />
            if (txti >= hwnewstr.length) {<br />
                clearInterval(txttimer);<br />
                clearInterval(newstimer);<br />
                newsi++;<br />
                if (newsi >= newstitle.length) {<br />
                    newsi = 0<br />
                }<br />
                newstimer = setInterval("shownew()", NewsTime);<br />
                txti = 0;<br />
                return;<br />
            }<br />
            clearInterval(txttimer);<br />
            document.getElementById("HotNews").href = newslink;<br />
            document.getElementById("HotNews").innerHTML = hwnewstr.substring(0, txti + 1) + endstr;<br />
            txti++;<br />
            txttimer = setInterval("shownew()", TextTime);<br />
        }<br />
        shownew();<br />
      </script><br />
    </body><br />
  </body><br />
  </html><br />

您可以修改框中代码后运行查看

可以改变字体颜色的js打字效果

<br />
  <!DOCTYPE html><br />
  <html lang="en"><br />
  <head><br />
    <meta charset="UTF-8"><br />
    <title>可以改变字体颜色的js打字效果</title><br />
    <style><br />
      a{text-decoration: none}<br />
    </style><br />
  </head><br />
  <body><br />
    <div id="newsticker"><span id="tickertitle"></span><br />
      <a id="typewriter" href="#"></a><br />
    </div><br />
    <script type="text/javascript"><br />
      var current = 0<br />
      var x = 0<br />
      var speed = 70<br />
      var speed2 = 2000<br />
      function initArray(n) {<br />
        this.length = n;<br />
        for (var i = 1; i <= n; i++) {<br />
          this[i] = ' '<br />
        }<br />
      }<br />
<br />
      typ = new initArray();<br />
      //第一个值是链接，第二个是字体颜色，第三个是显示的字<br />
<br />
<br />
        // typ[0] = "001.html:#000:伫倚危楼风细细，望极春愁，黯黯生天际。草色烟光残照里，无言谁会凭栏意。<br>拟把疏狂图一醉，对酒当歌，强乐还无味。衣带渐宽终不悔，为伊消得人憔悴。<br>纤云弄巧，飞星传恨，银汉迢迢暗度。金风玉露一相逢，便胜却、人间无数。<br>柔情似水，佳期如梦，忍顾鹊桥归路！两情若是久长时，又岂在、朝朝暮暮！";<br />
      typ[0] = "001.html:red:伫倚危楼风细细，望极春愁，黯黯生天际。草色烟光残照里，无言谁会凭栏意。";//可以设置 <br> 使其换行<br />
      typ[1] = "002.html:blue:拟把疏狂图一醉，对酒当歌，强乐还无味。衣带渐宽终不悔，为伊消得人憔悴。";<br />
      typ[2] = "003.html:green:纤云弄巧，飞星传恨，银汉迢迢暗度。金风玉露一相逢，便胜却、人间无数。";<br />
      typ[3] = "004.html:#000:柔情似水，佳期如梦，忍顾鹊桥归路！两情若是久长时，又岂在、朝朝暮暮！";<br />
      typ[4] = "005.html:blue:行行重行行，与君生别离。相去万余里，各在天一涯。";<br />
      typ[5] = "006.html:green:道路阻且长，会面安可知。胡马依北风，越鸟巢南枝。";<br />
      typ[6] = "007.html:red:相去日已远，衣带日已缓。浮云蔽白日，游子不顾返。 ";<br />
      typ[7] = "008.html:green:思君令人老，岁月忽已晚。弃捐勿复道，努力加餐饭。";<br />
<br />
      function typewrite() {<br />
              var m = typ[current];<br />
              document.getElementById("typewriter").href =m.substring(0, m.indexOf(':'));<br />
              m = m.substring(m.indexOf(':') + 1);<br />
              document.getElementById("typewriter").style.color = m.substring(0, m.indexOf(':'));<br />
              m = m.substring(m.indexOf(':') + 1);<br />
              m = m.replace("&", "and");<br />
              document.getElementById("typewriter").innerHTML = m.substring(0, x++) + "_";<br />
<br />
              if (x == m.length + 1) {<br />
                  x = 0;<br />
                  current++<br />
                  if (current > typ.length - 1) {<br />
                      current = 0<br />
                  }<br />
                  setTimeout(typewrite, speed2)<br />
              } else {<br />
                  setTimeout(typewrite, speed)<br />
              }<br />
          }<br />
      typewrite()<br />
    </script><br />
  </body><br />
  </html><br />

您可以修改框中代码后运行查看

发表评论：