同一种功能两种方法：
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='500px;background-color:red;'> 2 <div id='nima' style='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秒后再执行一次就不执行了。