同一种功能两种方法:
1 <script type='text/javascript'>
2 <!--
3
4 var tag = document.creatElement("a");
5 tag.href = 'http://www.baidu.com';
6 tag.innerText = '点我啊';
7
8 var id1 = document.getElementById('t1');
9 id1.appendChild(tag);
10
11
12 -->
13
14 var tag = '<a href="http://baidu.com">zouni</a>'
15 var id1=document.getElementById('t1')
16 id1.appendChild(tag)
17 </script>
上述方法可以使用html的很多操作,例如css的属性可以通过此方式修改,标签可以插入,标签的属性修改,标签的内容可以插入。
1 <body>
2
3
4
5 <form id='f1' action='https://www.sogou.com/web?' method='GET'>
6
7 <input id='query' type='text' name='query'/> //在服务器端一般都是通过name来获取我要发送的值,name就类似于key
8 <!--<input type='submit' value='提交'>--> //这个是默认就会提交
9 <input type='button' value=‘伪提交' onclick='foo();'/> //这个是利用button来提交,这个一般没有什么效果,所以在foo()函数中使用提交,在foo()函数中可以定义我需要识别内容,可以让这个函数内部检查我是否输入正确,是否输入合适的字符。
10
11 </form>
12
13
14 <script type='text/javascript'>
15
16 function foo(){
17
18 document.getElementById('f1').submit();
19
20 }
21
22
23 </script>
24
25
26 <script type='text/javascript'>alert('bill');</script>
27 </body>
搜索框实例:
1 <html>
2 <head>
3 <meta http-equiv=“content-type” content=“text/html;charset=utf-8”>
4 <style>
5 .black{
6 color:black;
7 }
8 .gray{
9 color:gray;
10 }
11 </style>
12 </head>
13
14 <body>
18 <input type='text' class='gray' id='tip' value='请输入关键字' onfocus='enter();' onblur='leave();'/> //但鼠标落在框里与框外的区别
21 <script type='text/javascript'>
22
23 function enter(){
24
25 var id = document.getElementById('tip');;
26
27 id.className = 'black';
28
29 if(id.value=='请输入关键字'|| id.value.trim()==''){ //trim()用于消除字符串两端的空白字符
30
31 id.value='';
32 }
33 }
34
35 function leave(){
36
37 var id = document.getElementById('tip')
38
39 var val = id.value;
40
41 if (val.length==0 || id.value.trim()==''){
42
43 id.value='请输入关键字';
44 id.className='gray';
45
46 }else{
48 id.className='black';
49 }
52 }
55 </script>
59 </body>
62 </html>
滚动条:
1<div style='width:500px;background-color:red;'>
2 <div id='nima' style='width:10%;background-color:green;height:10px;'></div>
3</div>
6
7<script type='text/javascript'>
9
10 tmp=10;
11 function foo(){
13 var id = document.getElementById('nima');
14 tmp=tmp+10;
15 if(tmp>100){
17 clearInterval(interval);
18 }else{
20 id.style.width=tmp+'%';
22 }
23 }
24 interval=setInterval('foo()',500); //每半秒钟执行一次,setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
26</script>
如果此时我将setInterval改成setTimeout,此时就变成0.5秒后再执行一次就不执行了。