ホームページ > 記事 > ウェブフロントエンド > HTML と JS は単純な計算機を実装します
HTML と JS は単純な計算機を実装します
- 小云云オリジナル
- 2018-03-05 15:09:342070ブラウズ
HTML と JS で計算機関数を実装することも非常に簡単です。この記事では主に HTML と JS で単純な計算機を実装する方法について説明します。
以下はコードです:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<link rel="stylesheet" type="text/css" href="untitled.css">
</head>
<script type="text/javascript">
var result="";
function jisuan(num){
if(num=="="){
document.form1.text.value=eval(result);
}else{
result=result+num;
document.form1.text.value=result;
}
}
</script>
<body>
<p class="box">
<form action="" class="form1" name="form1">
<p class="header">
<input type="text" id="text" name="text" class="text"/>
</p>
<p class="nav">
<table class="table">
<tr>
<td> <input id="1" style="height:55px; width:55px;" type="button" value="1" onClick="jisuan(this.id)"/> </td>
<td> <input id="2" style="height:55px; width:55px;" type="button" value="2" onClick="jisuan(this.id)"/> </td>
<td> <input id="3" style="height:55px; width:55px;" type="button" value="3" onClick="jisuan(this.id)"/> </td>
<td> <input id="+" style="height:55px; width:55px;" type="button" value="+" onClick="jisuan(this.id)"/> </td>
</tr>
<tr>
<td> <input id="4" style="height:55px; width:55px;" type="button" value="4" onClick="jisuan(this.id)"/> </td>
<td> <input id="5" style="height:55px; width:55px;" type="button" value="5" onClick="jisuan(this.id)"/> </td>
<td> <input id="6" style="height:55px; width:55px;" type="button" value="6" onClick="jisuan(this.id)"/> </td>
<td> <input id="-" style="height:55px; width:55px;" type="button" value="-" onClick="jisuan(this.id)"/> </td>
</tr>
<tr>
<td> <input id="7" style="height:55px; width:55px;" type="button" value="7" onClick="jisuan(this.id)"/> </td>
<td> <input id="8" style="height:55px; width:55px;" type="button" value="8" onClick="jisuan(this.id)"/> </td>
<td> <input id="9" style="height:55px; width:55px;" type="button" value="9" onClick="jisuan(this.id)"/> </td>
<td> <input id="*" style="height:55px; width:55px;" type="button" value="*" onClick="jisuan(this.id)"/> </td>
</tr>
<tr>
<td> <input id="/" style="height:55px; width:55px;" type="button" value="/" onClick="jisuan(this.id)"/> </td>
<td> <input id="0" style="height:55px; width:55px;" type="button" value="0" onClick="jisuan(this.id)"/> </td>
<td> <input id="." style="height:55px; width:55px;" type="button" value="." onClick="jisuan(this.id)"/></td>
<td> <input id="=" style="height:55px; width:55px;" type="button" value="=" onClick="jisuan(this.id)"/> </td>
</tr>
</table>
</p>
</form>
</p>
</body>
</html>関連する推奨事項:
HTMLで単純な電卓を実装する方法
以上がHTML と JS は単純な計算機を実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：HTMLの相対パスと絶対パスの違い次の記事：HTMLの相対パスと絶対パスの違い