JavaScript實現(xiàn)簡單的計算器功能
本文實例為大家分享了JavaScript實現(xiàn)簡單計算器功能的具體代碼,供大家參考,具體內(nèi)容如下
具體要求如下:
實現(xiàn)代碼:
<html> <head> <meta charset='utf-8'> <title>計算器</title> <script> function myck(type){var num1 = document.getElementById('num1');var num2 = document.getElementById('num2');if(type==1){ // 計算操作 var result = parseInt(num1.value) + parseInt(num2.value); alert(result); document.getElementById('resultDiv').innerText ='最終計算結(jié)果:'+ result;}else if(type==2){ var result = parseInt(num1.value) - parseInt(num2.value); alert(result); document.getElementById('resultDiv').innerText ='最終計算結(jié)果:'+ result; } else if(type==3){ var result = parseInt(num1.value) * parseInt(num2.value); alert(result); document.getElementById('resultDiv').innerText ='最終計算結(jié)果:'+ result; } else if(type==4){if(confirm('是否正確清空?')){// 清空num1.value = '';num2.value = '';document.getElementById('resultDiv').innerText=''; } } } </script> </head> <body> <div style='margin-top: 100px;margin-left: 500px;'> <span style='font-size: 60px;'>計算器</span> </div> <div> <div style='margin-left: 490px;'>數(shù) 字1:<input type='number' placeholder='請輸入數(shù)字1'> </div> </div> <div> <div style='margin-left:490px;'> 數(shù) 字2:<input type='number' placeholder='請輸入數(shù)字2'> </div> </div> <div> <div class='innerDiv'><input type='button' onclick='myck(1)' value='相 加'> <input type='button' onclick='myck(2)' value='相 減'> <input type='button' onclick='myck(3)' value='相 乘'><input type='button' onclick='myck(4)' value='清 空'> </div> </div> <div id='resultDiv'> </div> </body> <style> .innerDiv{ margin-left: 420px; margin-top: 20px; } </style></html>
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章:
1. asp.net core服務(wù)限制堆內(nèi)存大小的操作方法2. 解決ajax請求后臺,有時收不到返回值的問題3. SpringMVC+Jquery實現(xiàn)Ajax功能4. 使用IDEA編寫jsp時EL表達(dá)式不起作用的問題及解決方法5. ASP.NET MVC實現(xiàn)單個圖片上傳、限制圖片格式與大小并在服務(wù)端裁剪圖片6. jstl 字符串處理函數(shù)7. .NET 6 跨服務(wù)器聯(lián)表查詢操作MySql、Oracle、SqlServer等相互聯(lián)表8. ThinkPHP5 通過ajax插入圖片并實時顯示(完整代碼)9. ASP.NET Core 依賴注入生命周期示例詳解10. 讀大數(shù)據(jù)量的XML文件的讀取問題
