常熟人家blog头像

javascript定时器_dom节点操作_选项卡案例

时间:16-03-11 栏目:javascript 楼主:鲁智深 评论:0 点击: 1,861 次

一、定时器

1、setTimeout("fun()",time);

fun()//调用方法函数名

time//间隔多久执行一次fun(),用毫秒表示1000毫秒等于1秒

注意:只执行一次

clearTimeout();//清除setTimeout

2、setInterval("fun()",time);

fun()//调用方法函数名

time//间隔多久执行一次fun(),用毫秒表示1000毫秒等于1秒

注意:循环执行

clearInterval();//清除setInterval

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
//定时器案例
<body>
    <div id="clock"></div>
    <p>
         <input type="button" value="结束!" onclick="clearTimeout(t)"/>
         <input type="button" value="开始!" onclick="clock()"/>
    </p>
</body>
    <script type="text/javascript">
    var t;
      function clock(){
        var div = document.getElementById("clock");
        var date = new Date();
        div.innerHTML = "当前时间:"+date.getFullYear()+"年"+(date.getMonth()+1)+"月"+date.getDate()+"日"+date.getHours()+"时"+date.getMinutes()+"分"+date.getSeconds()+"秒";
       t = setTimeout("clock()",1000);
      }
      t = setTimeout("clock()",1000);
     /*
    clock();
    function clock(){
        var div = document.getElementById("clock");
        var date = new Date();
        div.innerHTML = "当前时间:"+date.getFullYear()+"年"+(date.getMonth()+1)+"月"+date.getDate()+"日"+date.getHours()+"时"+date.getMinutes()+"分"+date.getSeconds()+"秒";
      }
     var t = setInterval("clock()",1000);
     */

    </script>  
    <script>
         function titledemo(){
             document.title = "更得标题";
             alert(document.title);
         }
    </script>
    <input type="button" value="更换标题" onclick="titledemo()"/>
   
    <script>
         function colordemo(){
             document.bgColor = "red";
         }
         function clearcolor(){
             document.bgColor = "";
         }
    </script>
    <input type="button" value="更换背景色" onclick="colordemo()"/>
    <input type="button" value="清除背景色" onclick="clearcolor()"/>
</html>

二、对节点的操作

1、document节点对象

我们用js操作dom对象,操作无非是增删改查,操作之前先查找节点。

document属性:

document.title;//修改title标签

document.bgColor;//修改背景色

document方法:

document.write(string);

document.createElement(tag)//创建标签节点

document.createTextNode(string)//创建文本节点

document.getElementById(id)//通过标签id找节点

document.getElementsByTagName(tag)//通过标签名找节点,反馈数组

document.getElementByName(name)//通过标签中name属性属性找节点(往往用来查找input元素)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
//javascript-dom节点案例
<body>
     <input type="button" value="fun1" onclick="fun1()"/>
     <input type="button" value="fun2" onclick="fun2()"/>
     <input type="button" value="fun3" onclick="fun3()"/>
     <h1 id="id3">pcontent</h1>
     <div name="div1" id="id1">
         <div id="son">son</div>
     </div>
     <p>pcontent</p>
</body>
     <script>
         function fun1(){
             var h = document.getElementById("id3");//找到节点
             var obp = document.createElement("p");//创建标签
             var obt = document.createTextNode("我是新创建的节点");//创建文本
             obp.appendChild(obt);//将文本插入标签中
             h.appendChild(obp);//将标签插入节点中
         }
         function fun2(){
             var d = document.getElementsByTagName("div")[0];
             //alert(d[0].innerHTML);//取出的是数组,用下标[0]可以取第一个div标签
             var son = document.getElementById("son");
             d.removeChild(son);
         }
         function fun3(){
             var d = document.getElementById("id1");
             //alert(d.innerHTML);
             alert(d.innerText);
         }
     </script>

2、标签节点对象属性和方法

属性:

innerHTML;//获取该对象的文本标签所包含html,文本内容

innerText;//获取该对象的文本内容

方法:

appendChild(子节点);//在父节点中添加子节点

renoveChild(子节点);//在父节点中删除子节点

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
///选项卡案例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>javascript-选项卡</title>
<style>
     #div1,#div2,#div3,#div4{width:500px;height:100px;border:1px solid red;}
     a{font-weight:bold;font-size:30px;}
     a:hover{background:red;}
</style>
</head>

<body>
     <a id = "a1" href="javascript:show(1)" style="background:red;">国内</a>
     <a id = "a2" href="javascript:show(2)">体育</a>
     <a id = "a3" href="javascript:show(3)">游戏</a>
     <a id = "a4" href="javascript:show(4)">娱乐</a>
     <div id ="father">
         <div id = "div1" style="display:block;">
             <ul>
                 <li>11111</li>
                 <li>11111</li>
                 <li>11111</li>
                 <li>11111</li>
             </ul>
         </div>
         <div id = "div2" style="display:none;">
             <ul>
                 <li>22222</li>
                 <li>22222</li>
                 <li>22222</li>
                 <li>22222</li>
             </ul>
         </div>
         <div id = "div3" style="display:none;">
             <ul>
                 <li>33333</li>
                 <li>33333</li>
                 <li>33333</li>
                 <li>33333</li>
             </ul>
         </div>
         <div id = "div4" style="display:none;">
             <ul>
                 <li>44444</li>
                 <li>44444</li>
                 <li>44444</li>
                 <li>44444</li>
             </ul>
         </div>
     </div>
</body>
     <script>
         function show(num){
             for(var i=1;i<=4;i++){
                  var a = document.getElementById("a"+i);
                  var div = document.getElementById("div"+i);
                 if(i == num){
                 //当前节点操作
                     a.style.background = "red";
                     div.style.display= "block";
                 }else{
                 //非当前的其他元素
                     a.style.background = "";
                     div.style.display = "none";
                 }
             }
         }
     </script>
</html>

收藏本页

    声明:  如有关于wordpress代码问题请留言即可...!

------====== 本页公告 ======------
   建站程序也叫开源程序,建站程序都是免费的,现在国内比较流行的建站程序有个人博客(wordpress,zblog),门户(dedecms),商城(shopex),论坛(discuz!)本博就是用wordpress作为基础搭建起来的网站。