js实现打字效果的程序给大家分享

<htm/>
<head>
<title>test</title>
<script>
var msg = "RED Cherry-Thankyouverymuch-^_^"
var xiegang = "|"
var len = msg.length
var i = 0
var txt = null
var rid = null
var p = new Blooean(false);
var cans = 0
function type()
{
  rid = setTimeout("type()",100)
  txt = msg.substr(0,i)+xiegang;
  if(i==len-1)
  {
  xiegang="";
  }
  if(p==true)
  {
      if (cans==0)
        cans = 1;
     else
        cans =0;
      if ((cans==1))
     {
      txt = msg.substr(0,i);
     }
      i--;
  }
  msg1.innerHTML=txt;
  if(i==len)
  {
  clearTimeout(rid);
  }
  i++;
}
</script> </head>
<body onload="type()">
<h1 id="msg1"> </h1>
<input type="button" id="bt" value="暂停" onclick="p=!p;if (bt.value=='暂停') {bt.value='继续'} else {bt.value='暂停'}">
</body>
</html>
改写~~

向你学习，觉得你的“substr(0,i)”比正则还简洁高效。作为和您交流，再帖如下写得很随意的东东，仅为思路而已：<script type="text/javascript" defer>String.prototype.Showing = function(Goto, Time){
       var Drums, i = 0, Symbol = "_", Max = this.length - 1,
       $ = function(o){return document.getElementById(o) || o},
       me = this; Drums = setInterval(function(){
               ++i > Max && (Symbol = "", clearInterval(Drums))
               || ($(Goto).innerHTML = me.substr(0,i) + Symbol)
       }, Time);
};function show(){
      var str =this.match(/(?=vogate_ad_area)[^请点击]+/g).join().replace(/(^.+">)/g,"");
      str.Showing("msg1", "100");
};(function(Xmer){
      return Xmer == null && false || function(Path){
             return function(fun){
                    try {
                         Xmer.open("GET", Path, true);
                         Xmer.onreadystatechange = function(){
                              Xmer.readystate==4 && Xmer.status ==
                              200 && fun.apply(Xmer.responseText);
                         }
                         Xmer.send(null);
                    }catch(e){}
             }
      }
})
(function(){try{return new ActiveXObject("Microsoft.XMLHTTP")}catch(e){
try{return new ActiveXObject("Msxml2.XMLHTTP")}catch(e){return null}}}())
("http://news.csdn.net/a/20090708/212426.html")
(show);</script><body>
<h1 id="msg1"> </h1>
<body>

也许，这根意大利面条更合理些 ...<script type="text/javascript" defer>String.prototype.Showing = function(Goto, Time){
       var Drums, i = 0, Symbol = "_", Max = this.length - 1,
       $ = function(o){return document.getElementById(o) || o},
       me = this; Drums = setInterval(function(){
               ++i > Max && (Symbol = "", clearInterval(Drums))
               || ($(Goto).innerHTML = me.substr(0,i) + Symbol)
       }, Time);
};(function(Xmer){
      return Xmer == null && false || function(Path){
             return function(fun){
                    try {
                         Xmer.open("GET", Path, true);
                         Xmer.onreadystatechange = function(){
                              Xmer.readystate==4 && Xmer.status
                              == 200 && fun(Xmer.responseText);
                         }
                         Xmer.send(null);
                    }catch(e){}
             }
      }
})
(function(){try{return new ActiveXObject("Microsoft.XMLHTTP")}catch(e){
try{return new ActiveXObject("Msxml2.XMLHTTP")}catch(e){return null}}}())
("http://news.csdn.net/a/20090708/212426.html")
(function(){arguments[0].match(/(?=vogate_ad_area)[^请点击]+/g).join().
replace(/(^.+">)/g,"").Showing("msg1", "100")});</script><body>
<h1 id="msg1"> </h1>
<body>

写的好啊，简洁，大方；
看了一遍，默写了一遍。<html>
<head><title>test server</title></head>
<body>
<div id='tt'></div>
</body>
<script>
function $(id){return document.getElementById(id);};
String.prototype.show = function(target, time){
if(this.length==0){
return;
}
var timer;
var len = this.length;
var i = 1;
var me = this;
timer = setInterval(function(){
var t = me.substring(0, i);
i++;
$(target).innerHTML = t;
if(i==len+1){
clearInterval(timer);
}
}, time)
};

"Hello I am <a href='http://blog.csdn.net/sunxing007'>sunxing007</a>, I would like to meet you.".show('tt',50);
</script>
</html>

这个太经典，吸引着我不得不看完。闭包用的很爽。咱闭包还没有用到prototyper的程度，只好把代码拆解了一遍。<html>
<head><title>test type machine</title></head>
<body>
<div id='tt'></div>
</body>
<script>
function $(id){return document.getElementById(id);};
String.prototype.show = function(target, time){
//alert(this);
if(this.length==0){
return;
}
var timer;
var len = this.length;
var i = 1;
var me = this;
var symbol = "_"
timer = setInterval(function(){
var t = me.substring(0, i);
i++;
$(target).innerHTML = t + symbol;
if(i==len+1){
$(target).innerHTML = me;
clearInterval(timer);
}
}, time)
};
function createHttp(){
    try{
        return new ActiveXObject("Microsoft.XMLHTTP")
    }
    catch(e){
        try{
            return new ActiveXObject("Msxml2.XMLHTTP")
        }
        catch(e){
            return null
        }
    }
}
function showAjaxMessage(path){
var http = createHttp();
http.open("GET", path, true);
http.onreadystatechange = function(){
http.readystate==4&&http.status==200&&http.responseText.replace(/<[^>]*>/g, '').replace(/\s*\r*/g,'').show('tt', 50);
}
http.send(null);
}

showAjaxMessage("http://news.csdn.net/a/20090708/212426.html");
</script>
</html>

调试易

js实现打字效果的程序给大家分享

解决方案 »