js實現(xiàn)簡易計算器小功能
更新時間：2020年11月18日 14:18:53 作者：Ms_Joanna
這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)簡易計算器小功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了js實現(xiàn)簡易計算器的具體代碼，供大家參考，具體內(nèi)容如下
<!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> 第一個數(shù)： <input type="text" name="num1" ></li>
<li> 第二個數(shù)： <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>計算結(jié)果： <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("除數(shù)不能為0,請重新輸入");
}else{
var total = num1+"/"+num2+"="+parseFloat(num1) / parseFloat(num2);
document.calc.result.value=total;
}
}
</script>
</body>
</html>
運行結(jié)果：
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
javascript用defineProperty實現(xiàn)簡單的雙向綁定方法
這篇文章主要介紹了javascript用defineProperty實現(xiàn)簡單的雙向綁定方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
本篇文章主要是對使用js實現(xiàn)關(guān)閉js彈出層的窗口的示例代碼進(jìn)行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-02-02
這篇文章主要介紹了JavaScript使用表單元素驗證表單的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
本文給大家分享的是使用javascript實現(xiàn)仿制蘋果的懸浮虛擬按鈕的代碼，非常的簡單，給大家一個思路，大家可以根據(jù)自己的情況自由擴(kuò)展。2016-04-04
JS+DIV+CSS排版布局實現(xiàn)美觀的選項卡效果
這篇文章主要介紹了JS+DIV+CSS排版布局實現(xiàn)美觀的選項卡效果,通過簡單的div+css布局結(jié)合JavaScript切換頁面樣式實現(xiàn)美觀的選項卡效果,具有一定參考借鑒價值,需要的朋友可以參考下2015-10-10
這篇文章主要介紹了通過js實現(xiàn)的，當(dāng)鼠標(biāo)移到圖片上變大顯示而不是放大鏡效果,需要的朋友可以參考下2014-06-06
本文給大家介紹iframe無刷新上傳文件，通過一個隱藏的iframe來處理上傳操作我采用的是ReactJS,amazeui,nodejs1.html target指向iframe的name,就是把上傳后的操作交給iframe來處理2016-03-03
plupload+artdialog實現(xiàn)多平臺上傳文件
這篇文章主要介紹了plupload+artdialog實現(xiàn)多平臺上傳文件的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-07-07
這里是自己在工作不太忙的時候?qū)懗鰜砹艘粋€用戶可以自定義的滾動條jscroll，以下簡稱jscroll。jscroll默認(rèn)只提供一種滾動條樣式，部分樣式來自google webstore ，其中有部分css3樣式主要用于實現(xiàn)圓角，陰影效果2012-12-12
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)跑馬燈效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07