js实现网页标签内容的自删自增
Posted 杨二凡
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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==1时main函数判断后会执行增加函数
}
}
var i=0;//i是待插入的字符串数组的下标
var z=0;//z是add参数选择器，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>
<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==1时main函数判断后会执行增加函数
}
}
var i=0;//i是待插入的字符串数组的下标
var z=0;//z是add参数选择器，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>
以上是关于js实现网页标签内容的自删自增的主要内容，如果未能解决你的问题，请参考以下文章