<!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>计算器</title>
<style type="text/css">
input {
width: 210px;
height: 60px;
}
#app {
border-collapse: collapse;
border-spacing: 0;
}
#txt {
text-align: right;
}
.btn {
margin: 3px;
}
button {
height: 50px;
width: 50px;
}
#btn1,#btn2{
width: 105px;
height: 40px;
}
</style>
<script>
function jsq(e) {
var e = window.event || e;
var obj = e.target || e.srcElement;
// console.log(obj.innerText);
// console.log(obj.nodeName);
if (obj.nodeName != "BUTTON") {
return;
}
var screen = document.getElementById("txt");
var val = obj.innerText;
if(val == "="){
var exp = screen.value;
try {
var result = eval("(" + exp + ")");
screen.value = result;
} catch (error) {
screen.value = error;
}
}else if(val == "归零"){
screen.value = "0";
}else if(val == "清除"){
if (screen.value.length >= 1) {
screen.value = screen.value.slice(0,-1);
}
}
else{
if(screen.value == "0"){
screen.value = "";
}
screen.value += val;
}
}
</script>
</head>
<body>
<div id="app" style="text-align: center;" οnclick="jsq(event)">
<div><input type="text" id="txt" value="0" /></div>
<div>
<button id="btn1">归零</button>
<button id="btn2">清除</button>
</div>
<div class="btn">
<button>+</button>
<button>-</button>
<button>*</button>
<button>/</button>
</div>
<div class="btn">
<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
</div>
<div class="btn">
<button>5</button>
<button>6</button>
<button>7</button>
<button>8</button>
</div>
<div class="btn">
<button>9</button>
<button>0</button>
<button>.</button>
<button>=</button>
</div>
</div>
</body>
</html>
1178
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
