文章目錄

• 前言
• 一、效果圖
• 二、代碼
• • 1.HTML代碼
  • 2.CSS代碼
  • 3.JavaScript代碼
• 總結

---

前言

JavaScript最簡單的方法實現簡易的加減乘除計算器

---

一、效果圖

二、代碼

1.HTML代碼

<form action="" method="get"><input id="box1" type="text" name="" id="" value="" /><div class="box2"><button type="button" onclick="cal('1')">1</button><button type="button" onclick="cal('2')">2</button><button type="button" onclick="cal('3')">3</button><button type="button" onclick="cal('4')">4</button><button type="button" onclick="cal('5')">5</button><button type="button" onclick="cal('6')">6</button><button type="button" onclick="cal('7')">7</button><button type="button" onclick="cal('8')">8</button><button type="button" onclick="cal('9')">9</button><button type="button" onclick="cal('0')">0</button><button type="button" onclick="cal('+')">+</button><button type="button" onclick="cal('-')">-</button><button type="button" onclick="cal('*')">*</button><button type="button" onclick="cal('/')">/</button><input type="reset" name="" id="" value="AC" /><button type="button" onclick="result()">=</button></div></form>

2.CSS代碼

<style type="text/css">form{margin: 0 auto;width: 500px;height: 500px;background-color: gray;}#box1{width: 400px;height: 50px;margin-left: 50px;margin-top: 10px;margin-bottom: 20px;font-size: 20px;}.box2{width: 500px;height: 400px;background-color: green;display: flex;flex-wrap: wrap;justify-content: space-around;align-content: space-around;}.box2 button{width: 100px;height: 60px;margin-right: 20px;font-size: 20px;}.box2 input{width: 100px;height: 60px;margin-right: 20px;font-size: 20px;}</style>

3.JavaScript代碼

代碼如下（示例）：

<script type="text/javascript">var _box1=document.getElementById("box1");function cal (operator) {_box1.value=_box1.value+operator;}function result () {_box1.value=eval(_box1.value);}</script>

---

總結

以上就是JavaScript最簡單的方法實現簡易的計算器的方法，非常簡便，通俗易懂，如果幫到你了可以點個贊 謝謝^ ^

總結

以上是生活随笔為你收集整理的JavaScript最简单的方法实现简易的计算器的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。