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

2015-5-13 Jon js+jquery+ajax

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

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

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

js打字机在表单中的使用

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

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

轮番替换的js打字效果

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

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

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

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>可以改变字体颜色的js打字效果</title>
    <style>
      a{text-decoration: none}
    </style>
  </head>
  <body>
    <div id="newsticker"><span id="tickertitle"></span>
      <a id="typewriter" href="#"></a>
    </div>
    <script type="text/javascript">
      var current = 0
      var x = 0
      var speed = 70
      var speed2 = 2000
      function initArray(n) {
        this.length = n;
        for (var i = 1; i <= n; i++) {
          this[i] = ' '
        }
      }

      typ = new initArray();
      //第一个值是链接，第二个是字体颜色，第三个是显示的字


        // typ[0] = "001.html:#000:伫倚危楼风细细，望极春愁，黯黯生天际。草色烟光残照里，无言谁会凭栏意。<br>拟把疏狂图一醉，对酒当歌，强乐还无味。衣带渐宽终不悔，为伊消得人憔悴。<br>纤云弄巧，飞星传恨，银汉迢迢暗度。金风玉露一相逢，便胜却、人间无数。<br>柔情似水，佳期如梦，忍顾鹊桥归路！两情若是久长时，又岂在、朝朝暮暮！";
      typ[0] = "001.html:red:伫倚危楼风细细，望极春愁，黯黯生天际。草色烟光残照里，无言谁会凭栏意。";//可以设置 <br> 使其换行
      typ[1] = "002.html:blue:拟把疏狂图一醉，对酒当歌，强乐还无味。衣带渐宽终不悔，为伊消得人憔悴。";
      typ[2] = "003.html:green:纤云弄巧，飞星传恨，银汉迢迢暗度。金风玉露一相逢，便胜却、人间无数。";
      typ[3] = "004.html:#000:柔情似水，佳期如梦，忍顾鹊桥归路！两情若是久长时，又岂在、朝朝暮暮！";
      typ[4] = "005.html:blue:行行重行行，与君生别离。相去万余里，各在天一涯。";
      typ[5] = "006.html:green:道路阻且长，会面安可知。胡马依北风，越鸟巢南枝。";
      typ[6] = "007.html:red:相去日已远，衣带日已缓。浮云蔽白日，游子不顾返。 ";
      typ[7] = "008.html:green:思君令人老，岁月忽已晚。弃捐勿复道，努力加餐饭。";

      function typewrite() {
              var m = typ[current];
              document.getElementById("typewriter").href =m.substring(0, m.indexOf(':'));
              m = m.substring(m.indexOf(':') + 1);
              document.getElementById("typewriter").style.color = m.substring(0, m.indexOf(':'));
              m = m.substring(m.indexOf(':') + 1);
              m = m.replace("&", "and");
              document.getElementById("typewriter").innerHTML = m.substring(0, x++) + "_";

              if (x == m.length + 1) {
                  x = 0;
                  current++
                  if (current > typ.length - 1) {
                      current = 0
                  }
                  setTimeout(typewrite, speed2)
              } else {
                  setTimeout(typewrite, speed)
              }
          }
      typewrite()
    </script>
  </body>
  </html>

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

标签: js打字机 js动态显示文字

分享这篇文章

赞助鼓励：如果觉得内容对您有所帮助，您可以支付宝(左)或微信(右)：

声明：如无特殊注明，所有博客文章版权皆属于作者，转载使用时请注明出处。谢谢！

下一篇js，jquery分别实现各种拖拽
上一篇jquery实现下拉菜单和选项卡相结合的效果

发表评论：

知向前端

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

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

js打字机在表单中的使用

轮番替换的js打字效果

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

声明：如无特殊注明，所有博客文章版权皆属于作者，转载使用时请注明出处。谢谢！

搜索

日历

最新微语

最新评论

分类

随机文章

最新文章

热门文章

存档