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>
运行:
单击按钮后: