原生JS简易计算器
图片演示:
原生JS简易计算器
代码演示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>简单计算器 - NiceHan</title>
<style type="text/css">
* {
border: 0;
}
body {
background-color: rgba(100, 149, 237, 0.8);
}
h1 {
color: white;
text-align: center;
font-family: 'Microsoft YaHei';
font-size: 56px;
font-weight: bold;
text-shadow: 0px 0px 0 rgb(148, 148, 148), 1px 1px 0 rgb(125, 125, 125), 2px 2px 0 rgb(103, 103, 103), 3px 3px 0 rgb(80, 80, 80), 4px 4px 0 rgb(57, 57, 57), 5px 5px 0 rgb(34, 34, 34), 6px 6px 0 rgb(11, 11, 11), 7px 7px 6px rgba(0, 0, 0, 0.75), 7px 7px 1px rgba(0, 0, 0, 0.5), 0px 0px 6px rgba(0, 0, 0, .2);
}
input {
margin: 6px;
background-color: white;
}
.btnstyle {
background-color: orange;
}
input:hover {
background-color: #C0C0C0;
}
input[type=button] {
height: 36px;
width: 36px;
}
input[type=text] {
height: 36px;
width: 190px;
}
</style>
<script type="text/javascript">
function num(val) {
switch (val) {
case "=":
document.getElementById('texton').value = eval(document.getElementById('texton').value);
break;
case "AC":
document.getElementById('texton').value = "";
break;
default:
document.getElementById('texton').value = document.getElementById('texton').value + val;
document.getElementById('texton').value = document.getElementById('texton').value;
}
}
</script>
</head>
<body>
<h1>简单计算器 - NiceHan</h1>
<div style="width: 208px;margin: auto;background-color: black;">
<input type="text" name="texton" id="texton" value=""
style="text-align: center;font-size: 16px;background-color: lightyellow;" />
<br />
<input type="button" name="btn1" id="btnac" value="AC" onclick="num(this.value)" style="width: 141px;" />
<input type="button" name="btn1" id="btn+" value="+" onclick="num(this.value)" class="btnstyle" />
<br />
<input type="button" name="btn1" id="btn1" value="1" onclick="num(this.value)" />
<input type="button" name="btn1" id="btn2" value="2" onclick="num(this.value)" />
<input type="button" name="btn1" id="btn3" value="3" onclick="num(this.value)" />
<input type="button" name="btn1" id="btn-" value="-" onclick="num(this.value)" class="btnstyle" />
<br />
<input type="button" name="btn1" id="btn4" value="4" onclick="num(this.value)" />
<input type="button" name="btn1" id="btn5" value="5" onclick="num(this.value)" />
<input type="button" name="btn1" id="btn6" value="6" onclick="num(this.value)" />
<input type="button" name="btn1" id="*" value="×" onclick="num(this.id)" class="btnstyle" />
<br />
<input type="button" name="btn1" id="btn7" value="7" onclick="num(this.value)" />
<input type="button" name="btn1" id="btn8" value="8" onclick="num(this.value)" />
<input type="button" name="btn1" id="btn9" value="9" onclick="num(this.value)" />
<input type="button" name="btn1" id="/" value="÷" onclick="num(this.id)" class="btnstyle" />
<br />
<input type="button" name="btn0" id="btn0" value="0" onclick="num(this.value)" style="width: 90px;" />
<input type="button" name="btn1" id="btn." value="." onclick="num(this.value)" />
<input type="button" name="btn1" id="btn=" value="=" onclick="num(this.value)" class="btnstyle" />
</div>
</body>
</html>本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2019-03-21，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
