您好,登錄后才能下訂單哦!
本篇內容介紹了“怎么用JavaScript制作簡易計算器”的有關知識,在實際案例的操作過程中,不少人都會遇到這樣的困境,接下來就讓小編帶領大家學習一下如何處理這些情況吧!希望大家仔細閱讀,能夠學有所成!
這個簡易的計算器只能實現 + - * /的運算
在動手之前,我們要先理清思路,看圖,若想實現這樣一個簡易的計算器,我們需要兩個輸入框用來存放我們需要進行運算的兩個值,一個下拉框來選擇要進行什么運算,一個按鈕來實現開始運算,一個輸入框來保存我們計算后的值!
首先,我們在body中制作頁面需要的這些元素
<body> <input type="text" id="ipt1"> <select name="" id="slt"> <option value="+">+</option> <option value="-">-</option> <option value="*">*</option> <option value="/">/</option> </select> <input type="text" id="ipt2"> <button id="btn">=</button> <input type="text" id="ipt3"></body>
上面的id你可隨意起,好用就行接下來就是最重要的JavaScript的地方了
<body> <script> //獲取頁面標簽的元素 var inpt1 = document.getElementById("ipt1"); var inpt2 = document.getElementById("ipt2"); var inpt3 = document.getElementById("ipt3"); var selt = document.getElementById("slt"); var butn = document.getElementById("btn"); //給等于按鈕添加點擊事件 butn.onclick = function(){ //將三個輸入框的value值分別賦給變量t1,t2,t3中 var t1 = parseFloat(ipt1.value); var t2 = parseFloat(ipt2.value); var t3 = parseFloat(ipt3.value); //定義一個結果變量用于存放結果 var endValue; //用switch語句來寫運算語句 switch(slt.value){ case "+": endValue = t1 + t2; break; case "-": endValue = t1 - t2; break; case "*": endValue = t1 * t2; break; case "/": endValue = t1 / t2; break; default: endValue = t1 + t2; break; } //將結果放入結果輸入框的value值中,在頁面上顯示 inpt3.value = endValue; } </script></body>
這樣一個簡易的頁面計算器就做好了。
“怎么用JavaScript制作簡易計算器”的內容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站,小編將為大家輸出更多高質量的實用文章!
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。