js实现网页标签内容的自删自增

<!DOCTYPE html>

<html>

  <head>

     <meta charset="UTF-8">

     <title></title>

  </head>

  <span id="s1"></span>

  <span style="color:red;">|</span>

  <body>

  </body>

  <script type="text/javascript">

     var s=document.getElementById("s1");//获取span标签

     var str="hello world";//初始标签内容

    var st1="wellcome to beijing";

     var st2="that sounds good";

     var st3="what' your name";

     s.innerHTML=str;//初始化标签内容

     change=0;//增删控制器,当其值为0时执行删函数,其值为1时执行增函数

     function del(){

       str=str.split("");

       if(str.length>=0){

         str.pop();

         str=str.join("");

         s.innerHTML=str;//一直用str覆盖span标签的原内容

       }

       if(str.length==0){

         change=1;//change==1main函数判断后会执行增加函数

       }

     }

     var i=0;//i是待插入的字符串数组的下标

     var z=0;//zadd参数选择器,0是第一个,1是第二个,2是第三个

     function add(st1,st2,str3){

       str=str.split("");

       var str2=arguments[z];//定义了用于函数add接收参数的变量str2

       if(str.length<str2.length){

         str.push(str2[i]);

         i++;

         str=str.join("");

         s.innerHTML=str;

       }

       if(str.length==str2.length){

         change=0;//change==0时,在main函数判断后会执行删除函数

         i=0;//一个字符串加完了,将下标清零,等待下一次加载

         if(z<2){

            z++;

         }

         else{

            z=0;

         }

       }

      

     }

     function main(){

       if(change==0){

         del();//减字

       }

       else{

         add(st1,st2,st3);//加字

       }

       setTimeout(function(){main()},200);

     }

     main()

  </script>

</html>

 

 

 

转载于:https://www.cnblogs.com/yangerfan/p/7600663.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值