js實現簡易計算器小功能
更新時間：2020年11月18日 14:18:53 作者：Ms_Joanna
這篇文章主要為大家詳細介紹了js實現簡易計算器小功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了js實現簡易計算器的具體代碼，供大家參考，具體內容如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ul li{
list-style: none;
line-height: 50px;
}
.getAnswer{
width: 20px;
}
</style>
</head>
<body>
<form name="calc">
<h2>簡易計算器</h2>
<ul>
<li> 第一個數： <input type="text" name="num1" ></li>
<li> 第二個數： <input type="text" name="num2"></li>
<li> <input name="getAnswer" type="button" onclick="calcu1()" value="+">
<input name="getAnswer" type="button" onclick="calcu2()" value="-">
<input name="getAnswer" type="button" onclick="calcu3()" value="*">
<input name="getAnswer" type="button" onclick="calcu4()" value="/">
</li>
<li>計算結果： <input type="text" name="result" id="result"> </li>
</ul>
</form>
<script type="text/javascript">
function calcu1() {
var num1=document.calc.num1.value;
var num2=document.calc.num2.value;
sum1=parseFloat(num1) + parseFloat(num2);
var total = num1+"+"+num2+"="+sum1;
document.calc.result.value=total;
}
function calcu2() {
var num1=document.calc.num1.value;
var num2=document.calc.num2.value;
sum1=parseFloat(num1) - parseFloat(num2);
var total = num1+"-"+num2+"="+sum1;
document.calc.result.value=total;
}
function calcu3() {
var num1=document.calc.num1.value;
var num2=document.calc.num2.value;
var total = num1+"*"+num2+"="+parseFloat(num1)*parseFloat(num2);
document.calc.result.value=total;
}
function calcu4() {
var num1=document.calc.num1.value;
var num2=document.calc.num2.value;
if (num2==0){ alert("除數不能為0,請重新輸入");
}else{
var total = num1+"/"+num2+"="+parseFloat(num1) / parseFloat(num2);
document.calc.result.value=total;
}
}
</script>
</body>
</html>
運行結果：
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
javascript用defineProperty實現簡單的雙向綁定方法
這篇文章主要介紹了javascript用defineProperty實現簡單的雙向綁定方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-04-04
本篇文章主要是對使用js實現關閉js彈出層的窗口的示例代碼進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-02-02
這篇文章主要介紹了JavaScript使用表單元素驗證表單的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-08-08
本文給大家分享的是使用javascript實現仿制蘋果的懸浮虛擬按鈕的代碼，非常的簡單，給大家一個思路，大家可以根據自己的情況自由擴展。2016-04-04
這篇文章主要介紹了JS+DIV+CSS排版布局實現美觀的選項卡效果,通過簡單的div+css布局結合JavaScript切換頁面樣式實現美觀的選項卡效果,具有一定參考借鑒價值,需要的朋友可以參考下2015-10-10
這篇文章主要介紹了通過js實現的，當鼠標移到圖片上變大顯示而不是放大鏡效果,需要的朋友可以參考下2014-06-06
本文給大家介紹iframe無刷新上傳文件，通過一個隱藏的iframe來處理上傳操作我采用的是ReactJS,amazeui,nodejs1.html target指向iframe的name,就是把上傳后的操作交給iframe來處理2016-03-03
這篇文章主要介紹了plupload+artdialog實現多平臺上傳文件的相關資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-07-07
這里是自己在工作不太忙的時候寫出來了一個用戶可以自定義的滾動條jscroll，以下簡稱jscroll。jscroll默認只提供一種滾動條樣式，部分樣式來自google webstore ，其中有部分css3樣式主要用于實現圓角，陰影效果2012-12-12
這篇文章主要為大家詳細介紹了小程序實現跑馬燈效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07