當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

用js实现简单计算器

發布時間：2023/11/30 编程问答 28 豆豆

生活随笔收集整理的這篇文章主要介紹了用js实现简单计算器小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

用js實現簡單計算器

一、所用方法

1、如何獲取元素

var input1 = document.getElementById('one');

2、如何獲取表單元素的值

sum = Number(input1.value) + Number(input2.value);

3.如何綁定點擊事件

input4.onclick = function(){ }

二、計算器代碼

下面展示一些內聯代碼片。

<!DOCTYPE html> <html> <head><title>計算器</title><meta charset="utf-8"> </head> <body><input type="text" id="one" name=""><select id="three"><option>+</option><option>-</option><option>*</option><option>/</option></select><input type="text" id="two" name=""><button id="four">提交</button><input type="text" id="result" name=""> </body></html> <script type="text/javascript">var input1 = document.getElementById('one');var input2 = document.getElementById('two');var input3 = document.getElementById('three');var input4 = document.getElementById('four');input4.onclick = function(){if(input3.value === '+'){sum = Number(input1.value) + Number(input2.value);document.getElementById("result").value = sum;}else if(input3.value === '-'){jian = Number(input1.value) - Number(input2.value);document.getElementById("result").value = jian;}else if(input3.value === '*'){cheng = Number(input1.value) * Number(input2.value);document.getElementById("result").value = cheng;}else if(input3.value === '/'){cheng = Number(input1.value) / Number(input2.value);document.getElementById("result").value = cheng;}}</script>

總結

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

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