JavaScript實現(xiàn)簡易加法計算器
本文實例為大家分享了JavaScript實現(xiàn)加法計算器的具體代碼,供大家參考,具體內(nèi)容如下
具體要求:
1.頁面布局:
2.還需要在點擊計算按鈕之后在頁面上顯示計算結(jié)果
具體實現(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){ 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 class="innerDiv" style="margin-left: 550px;"> 數(shù)字1:<input id="num1" type="number" placeholder="請輸入數(shù)字1"> </div> </div> <div> <div class="innerDiv" style="margin-left: 550px;"> 數(shù)字2:<input id="num2" type="number" placeholder="請輸入數(shù)字2"> </div> </div> <div> <div style="margin-left: 600px;" class="innerDiv"> <input type="button" onclick="myck(1)" value="計 算"> <input type="button" onclick="myck(2)" value="清 空"> </div> </div> <div id="resultDiv"> </div> </body> <style> .innerDiv{ margin-left: 420px; margin-top: 20px; } </style> </html>
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
如何讓div span等元素能響應(yīng)鍵盤事件操作指南
在我這幾天的工作中遇到了一個問題,我有一個可編輯的div,并且在DIV里面還有一個可編輯的span,我想要讓span能響應(yīng)鍵盤事,想實現(xiàn)這種效果,應(yīng)該如何實踐呢2012-11-11javascript動態(tài)設(shè)置樣式style實例分析
這篇文章主要介紹了javascript動態(tài)設(shè)置樣式style的方法,實例分析了javascript操作style樣式的易錯點和相關(guān)使用技巧,需要的朋友可以參考下2015-05-05ES6 Promise基礎(chǔ)用法(resolve、reject、then、catch,a
Promise是JavaScript中處理異步操作的對象,它有三種狀態(tài):Pending、Fulfilled、Rejected,使用new Promise創(chuàng)建Promise對象,通過resolve和reject改變狀態(tài),then和catch方法用于處理成功和失敗的結(jié)果,本文介紹ES6 Promise用法,感興趣的朋友一起看看吧2024-09-09關(guān)于JavaScript使用export和import的兩個報錯解決
說來慚愧es6寫了這么久,連最基本的export和import都沒搞明白,下面這篇文章主要給大家介紹了關(guān)于JavaScript使用export和import的兩個報錯的解決方法,需要的朋友可以參考下2022-07-07js獲取GridView中行數(shù)據(jù)的兩種方法 分享
這篇文章介紹了js獲取GridView中行數(shù)據(jù)的方法,有需要的朋友可以參考一下2013-07-07Javascript寫了一個清除“l(fā)ogo1_.exe”的殺毒工具(可掃描目錄)
Javascript寫了一個清除“l(fā)ogo1_.exe”的殺毒工具(可掃描目錄)...2007-02-02