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>

时间: 2024-10-12 20:48:28

js实现网页标签内容的自删自增的相关文章

js 替换 script 标签内容,包括 换行符

这几天在做项目的时候需要用到js替换 script 标签内的内容 用自己写的字符串去匹配都能成功,但是一旦将大串的DOM内容去匹配的时候 却一直提示失败. 上网查了很多资料,一直匹配不了,调试了很久 郁闷的时候,灵光一闪,难不成是换行的问题,一测试,果然如此 var str = 'lkjkjk' +'<SCRIPT type=text/html> abc </SCRIPT>' var reg = /<script.*>.*<\/script>/gi aler

js + css 实现标签内容切换功能

先附上效果图和代码: html 文档: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script type="text/javascript" src="../js/tabs_function.js"&

js 打印网页指定内容

1 function doPrint() { 2 setTimeout(function() { 3 bdhtml=window.document.body.innerHTML; 4 sprnstr="<!--startprint-->"; 5 eprnstr="<!--endprint-->"; 6 7 prnhtml=bdhtml.substr(bdhtml.indexOf(sprnstr)+17); 8 prnhtml=prnhtml.

转:js,jQuery 排序的实现,网页标签排序的实现,标签排序

js,jQuery 排序的实现: 重点: 想要实现排序,最简单的方法就是 先把标签用jQuery读进对象数组 用js排序好对象数组 (针对对象数组进行排序, 不要试图直接对网页的内容进行直接更改) 用对象数组内容覆盖网页上的标签数组; //排序从文字短的到长的 var arr_a=new Array(); var i=0; $(".type_list_txt > span:contains('T恤')").parent().children("a").each

prism.js——让网页中的代码更好看

粗放的代码展示 有时候,网页中会插入代码.直接把代码放入<pre></pre>标签和<code></code>标签里,也算是可以在页面中显示出来. 比如下面这样的: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>直接写代码</title> </hea

DOM操作 、js获取id的内容 和修改原来的内容(innerHTML)

js获取id的内容(getElementById) 和修改原来的内容(innerHTML) 1.通过ID获取元素 学过HTML/CSS样式,都知道,网页由标签将信息组织起来,而标签的id属性值是唯一的,就像是每人有一个身份证号一样,只要通过身份证号就可以找到相对应的人.那么在网页中,我们通过id先找到标签,然后进行操作. 语法: document.getElementById(“id”)   看看下面代码: 结果:null或[object HTMLParagraphElement] 注:获取的元

140914●HTML网页标签

HTML 内容(Hyper Text Markup Language,超文本标记语言) CSS 网页美化 Javascript 脚本语言 <html>    --开始标签 <head> 网页上的控制信息 </head> <body> 页面显示的内容 </body> </html>    --结束标签 <title></title>    --页面标题 <!--被注释掉的内容-->    --注释 一

JS获取网页中HTML元素的几种方法分析

getElementById getElementsByName getElementsByTagName 大概介绍 getElementById ,getElementsByName ,getElementsByTagName ###adv### 后两个是得到集合,byid只是得到单个对象 getElementById 的用法 举个例子: <a id="link1" name="link1" href=http://homepage.yesky.com>

使用JS对HTML标签进行增删改查

以下为通过JS对li标签进行简单的增删改查: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <script typ