day11-document 对象 、 事件
1.计算器
1.png
<!DOCTYPE html>
<html>
<head>
<title>计算器</title>
<meta charset="utf-8" />
<style type="text/css">
.panel {
border: 4px solid #ddd;
width: 192px;
margin: 100px auto;
/*border-radius: 6px;*/
}
.panel p, .panel input {
font-family: "微软雅黑";
font-size: 20px;
margin: 4px;
float: left;
/*border-radius: 4px;*/
}
.panel p {
width: 122px;
height: 26px;
border: 1px solid #ddd;
padding: 6px;
overflow: hidden;
}
.panel input {
width: 40px;
height: 40px;
border:1px solid #ddd;
}
</style>
<script>
window.onload = function(){
//给div绑定单击事件
var div = document.getElementById("jsq");
div.onclick = function(e){
//获取事件源
var obj = e.srcElement || e.target;
if(obj.nodeName=="INPUT") {
var p = document.getElementById("screen");
//判断按钮的值
if(obj.value == "C") {
p.innerHTML = "";
} else if(obj.value == "=") {
try {
p.innerHTML = eval(p.innerHTML);
} catch(ex) {
p.innerHTML = "";
}
} else {
p.innerHTML += obj.value;
}
}
}
}
</script>
</head>
<body>
<div class="panel" id="jsq">
<div>
<p id="screen"></p>
<input type="button" value="C">
<div style="clear:both"></div>
</div>
<div>
<input type="button" value="7">
<input type="button" value="8">
<input type="button" value="9">
<input type="button" value="/">
<input type="button" value="4">
<input type="button" value="5">
<input type="button" value="6">
<input type="button" value="*">
<input type="button" value="1">
<input type="button" value="2">
<input type="button" value="3">
<input type="button" value="-">
<input type="button" value="0">
<input type="button" value=".">
<input type="button" value="=">
<input type="button" value="+">
<div style="clear:both"></div>
</div>
</div>
</body>
</html>
冒泡机制
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>冒泡机制</title>
<style>
div {
border: 1px solid red;
width: 300px;
padding: 30px;
}
p {
border: 1px solid red;
padding: 30px;
}
</style>
<script>
function f1(e) {
alert("button");
//取消冒泡
//IE:{"cancelBubble":false}
//其他:{"stopPropagation":function(){}}
if(e.stopPropagation) {
e.stopPropagation();
} else {
e.cancelBubble = true;
}
}
</script>
</head>
<body>
<div onclick="alert('div');">
<p onclick="alert('p')">
<input type="button" value="按钮"
onclick="f1(event);"/>
</p>
</div>
</body>
</html>
