div和span
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style type="text/css"> #div1{ background-color: aquamarine; border: 1px red solid; height: 100px; width: 300px; } </style> <script type="text/javascript"> window.onload= function(){ document.getElementById("divbutton").onclick=function(){ document.getElementById("div1").innerHTML="<font color='red'>哈哈哈</font>" //document.getElementById("div1").innerText="<font color='red'>哈哈哈</font>" } document.getElementById("spanbutton").onclick=function(){ document.getElementById("span1").innerText="<font color='red'>哈哈哈</font>" } } </script> </head> <body> <button id="divbutton" >向DIV中添加</button> <button id="spanbutton" >向SPAN中添加</button> <div id="div1"></div> <span id="span1"></span> </body> </html>
运行后点击了两个按钮的结果为：
innerHTML是作为页面元素来插入
innerText是作为文本插入
多选框
假设现有这样的的需求：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script type="text/javascript"> window.onload=function(){ var ckall= document.getElementById("ckall"); var aihaos=document.getElementsByName("aihao"); ckall.onclick=function(){ for(var i = 0;i<aihaos.length;i++){ console.log(aihaos[i].checked=ckall.checked); } } for(var i = 0;i<aihaos.length;i++){ aihaos[i].onclick=function(){ ckall.checked=aihaos[0].checked&&aihaos[1].checked&&aihaos[2].checked } } } </script> </head> <body> <input type="checkbox" id="ckall"/><br> <input type="checkbox" name="aihao" value="one"/>1<br> <input type="checkbox" name="aihao" value="two"/>2<br> <input type="checkbox" name="aihao" value="three"/>3<br> </body> </html>
下拉列表select的value
运行结果
函数的周期调用setInterval
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <script type="text/javascript"> function getnowtime(){ var date=new Date(); document.getElementById("timeDiv").innerText = date.toLocaleString(); } window.onload=function(){ v=window.setInterval("getnowtime()",1000); } function zwld(){ window.clearInterval(v); } </script> <body> <button type="button" onclick="zwld()">砸瓦鲁多</button> <div id="timeDiv"></div> </body> </html>
效果为页面显示当前时间，当点击按钮后时间不再刷新
window.open 打开窗口 window.close 关闭窗口
效果与超链接类似，使用close可以关闭窗口
confirm 确认框
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <button onclick="del()">删除</button> </body> <script type="text/javascript"> function del(){ var a=confirm("确认吗"); if(a){ alert("确认"); }else{ alert("取消"); } } </script> </html>
单击按钮后会弹出
单击确定会弹出确定
点取消会弹出取消
将当前窗口设为*
创建文件t1.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <iframe src="t2.html" style="height: 500px; width: 500px;"></iframe> </body> </html>
创建t2
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <h1>T2</h1> <button onclick="btn()">设为*</button> </body> <script type="text/javascript"> function btn(){ if(window.top!=window.self){ console.log("adsasa") window.top.location = window.self.location } } </script> </html>
运行：
单击按钮后：