首页 > 教程

原生JS简易计算器

slbcun
2025-04-07
1127 ℃

代码演示:

<!DOCTYPE html>
<html>
<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: 700;
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, 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)" />
<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)" />
<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)" />
<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)" />
<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)" />
</div>
</body>
</html>

原生JS简易计算器