JavaScriptの初心者最近では、簡単な電卓を書くためにそれを使用します
レンダリング：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>简易计算器Plus</title>
<style>
.bts {
width: 60px;
height: 60px;
border-color: gray;
border: none;
}
.bts:hover {
background-color: #fff;
}
.bts:active {
background-color: lightblue;
}
.bts_c {
width: 60px;
height: 60px;
background-color: #FF6C5C;
border: none;
}
.bts_c:hover {
background-color: #A3F6FF;
}
.bts_c:active {
background-color: lightblue;
}
#content {
border-radius: 10px 5px;
padding: 10px;
text-align: center;
margin: auto;
border: 1px solid grey;
width: 300px;
}
table {
margin: auto;
border-spacing: 0;
}
td {
padding: 1px;
}
.header {
height: 40px;
}
.header input {
font-size: 20pt;
width: 240px;
}
.title {
font-size: 20pt;
}
</style>
</head>
<script type="text/javascript">
var result = "";
function jisuan(num) {
if (num == "=") {
document.form_cal.text.value = result + "=" + eval(result);
} else if (num == "c") {
location.reload();
} else {
result = result + num;
document.form_cal.text.value = result;
}
}
</script>
<body>
<div id="content">
<span class="title">简易计算器</span>
<form action="#" class="form_cal" name="form_cal">
<div class="header">
<input type="text" id="text" name="text" readonly="true" />
</div>
<table>
<tr>
<td><input class="bts" id="1" type="button" value="1" onClick="jisuan(this.id)" /></td>
<td><input class="bts" id="2" type="button" value="2" onClick="jisuan(this.id)" /></td>
<td><input class="bts" id="3" type="button" value="3" onClick="jisuan(this.id)" /></td>
<td><input class="bts" id="+" type="button" value="+" onClick="jisuan(this.id)" /></td>
</tr>
<tr>
<td><input class="bts" id="4" type="button" value="4" onClick="jisuan(this.id)" /></td>
<td><input class="bts" id="5" type="button" value="5" onClick="jisuan(this.id)" /></td>
<td><input class="bts" id="6" type="button" value="6" onClick="jisuan(this.id)" /></td>
<td><input class="bts" id="-" type="button" value="-" onClick="jisuan(this.id)" /></td>
</tr>
<tr>
<td><input class="bts" id="7" type="button" value="7" onClick="jisuan(this.id)" /></td>
<td><input class="bts" id="8" type="button" value="8" onClick="jisuan(this.id)" /></td>
<td><input class="bts" id="9" type="button" value="9" onClick="jisuan(this.id)" /></td>
<td><input class="bts" id="*" type="button" value="*" onClick="jisuan(this.id)" /></td>
</tr>
<tr>
<td><input class="bts_c" id="c" type="button" value="清屏" onClick="jisuan(this.id)" /></td>
<td><input class="bts" id="0" type="button" value="0" onClick="jisuan(this.id)" /></td>
<td><input class="bts" id="=" type="button" value="=" onClick="jisuan(this.id)" /></td>
<td><input class="bts" id="/" type="button" value="/" onClick="jisuan(this.id)" /></td>
</tr>
</table>
</form>
</div>
</body>
</html>（論文、より多くの欠陥で手にこの電卓を使用しますが、基本的には電卓のすべての基本的な機能を持って、ページのOをリフレッシュするために、実際には（点cボタンを「クリアスクリーン」機能を使用して、バックスペース機能の中が実現されています∩_∩）O〜HA）;
加えて、文、特殊な関数を使用するJavaScriptの計算に：評価（）;
W3schoolについて説明しました。
eval（）関数は、文字列を計算し、JavaScriptコードを実行します。
人気の用語は：この関数は、格納するために使用し、そのような「3 + 3」の内部に格納された変数として、式を実行し、その後評価（）関数呼び出しを：評価（）;この場合、評価（）値は9です