js編寫簡易的計算器
更新時間：2020年07月29日 10:38:16 作者：技術萌新阿肖
這篇文章主要為大家詳細介紹了js編寫簡易的計算器，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了js編寫簡易計算器的具體代碼，供大家參考，具體內容如下
使用綁定時間觸發(fā) 加減乘除
加：
減：
乘：
除：
源代碼：
<body>
第一個數(shù)：<input type="text" id="num1" /><p></p>
<div id="ss">
<button type="button" >+</button>
<button type="button" >-</button>
<button type="button" >*</button>
<button type="button" >/</button>
</div>
<p></p>
第二個數(shù)：<input type="text" id="num2" /><p></p>
計算結果：<input type="text" id="result" />
<script>
var x1=document.getElementById("num1");
var x2=document.getElementById("num2");
var x3=document.getElementById("result");
addEventListener("click",function(event){
var obj = event.target; //指向事件源
var v=obj.innerHTML; //獲取事件
if(isNaN(x1.value) || isNaN(x2.value)){
alert("不能為非數(shù)字！");
}
if(v=="+"){
if(x1.value=="" || x2.value==""){alert('輸入框不能為空！');}
x3.value = parseFloat(x1.value) + parseFloat(x2.value); }
if(v=="-"){
if(x1.value=="" || x2.value==""){alert('輸入框不能為空！');}
x3.value = parseFloat(x1.value) - parseFloat(x2.value); }
if(v=="*"){
if(x1.value=="" || x2.value==""){alert('輸入框不能為空！');}
x3.value = parseFloat(x1.value) * parseFloat(x2.value); }
if(v=="/"){
if(x1.value=="" || x2.value==""){alert('輸入框不能為空！');}
if(x2.value==0){alert("除數(shù)不能為0！")}
x3.value = parseFloat(x1.value) / parseFloat(x2.value); }
})
</script>
</body>
更多計算器功能實現(xiàn)，請點擊專題： 計算器功能匯總 進行學習
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
動畫,從人群中脫穎而出、吸引訪客注意力的絕佳方式,本文將給大家分享10 個功能強大的 JavaScript 動畫庫,有了這 10 個功能強大的 JavaScript 庫,創(chuàng)建動畫再簡單不過了,感興趣的同學可以參考閱讀2023-09-09
本文給大家匯總介紹了Javascript實現(xiàn)運算符重載的方法，實現(xiàn)的思路很簡單，有需要的小伙伴可以來看看2018-04-04
這篇文章主要介紹了詳解小程序原生使用ES7 async/await語法,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
npm install報錯無法創(chuàng)建packge.json文件的解決辦法
當你在運行 npm install 時遇到錯誤,提示無法找到 package.json 文件,也沒有創(chuàng)建一個 package.json 文件,只創(chuàng)建了一個package-lock.json文件,本文給大家介紹詳細的解決辦法,需要的朋友可以參考下2024-02-02
TXT作為純文本格式,只支持無格式的文本內容,不包括任何樣式信息,下面這篇文章主要給大家介紹了關于純前端導出txt文本文件的相關資料,文中給出了詳細的代碼示例,需要的朋友可以參考下2024-08-08
JavaScript實現(xiàn)網頁上的浮動廣告的簡單方法
JavaScript實現(xiàn)網頁上的浮動廣告的簡單方法，需要的朋友可以參考一下2013-06-06
眾所周知圖表是數(shù)據(jù)圖形化的表示，通過形象的圖表來展示數(shù)據(jù)，比如條形圖，折線圖，餅圖等等?？梢暬瘓D表可以幫助開發(fā)者更容易理解復雜的數(shù)據(jù)，提高生產的效率和 Web 應用和項目的可靠性?，F(xiàn)在就讓我們大家一起來學習用D3.js來實現(xiàn)折線圖。2016-09-09
微信小程序開發(fā)之實現(xiàn)選項卡(窗口頂部TabBar)頁面切換
本篇文章主要介紹了微信小程序開發(fā)之選項卡(窗口頂部TabBar)頁面切換，具有一定的參考價值，有需要的可以了解一下。2016-11-11
js 異步處理進度條的實現(xiàn)代碼，需要的朋友可以參考下。2010-04-04
js中forEach，for in，for of循環(huán)的用法示例小結
這篇文章主要介紹了js中forEach，for in，for of循環(huán)的用法,結合實例形式總結分析了js中forEach，for in，for of循環(huán)相關使用技巧與操作注意事項,需要的朋友可以參考下2020-03-03