快捷導(dǎo)航

js實(shí)現(xiàn)簡(jiǎn)易計(jì)算器小功能

更新時(shí)間：2020年11月18日 14:18:53 作者：Ms_Joanna

這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)簡(jiǎn)易計(jì)算器小功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了js實(shí)現(xiàn)簡(jiǎn)易計(jì)算器的具體代碼，供大家參考，具體內(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>簡(jiǎn)易計(jì)算器</h2>
 <ul>
 <li> 第一個(gè)數(shù)： <input type="text" name="num1" ></li>
 <li> 第二個(gè)數(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>計(jì)算結(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,請(qǐng)重新輸入");
  }else{
 var total = num1+"/"+num2+"="+parseFloat(num1) / parseFloat(num2); 
 document.calc.result.value=total; 
 }
 }
</script>
</body>

</html>

運(yùn)行結(jié)果：

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

javascript用defineProperty實(shí)現(xiàn)簡(jiǎn)單的雙向綁定方法
這篇文章主要介紹了javascript用defineProperty實(shí)現(xiàn)簡(jiǎn)單的雙向綁定方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-04-04
使用js實(shí)現(xiàn)關(guān)閉js彈出層的窗口
本篇文章主要是對(duì)使用js實(shí)現(xiàn)關(guān)閉js彈出層的窗口的示例代碼進(jìn)行了介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助
2014-02-02
JavaScript使用表單元素驗(yàn)證表單的示例代碼
這篇文章主要介紹了JavaScript使用表單元素驗(yàn)證表單的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-08-08
Javascript實(shí)現(xiàn)蘋果懸浮虛擬按鈕
本文給大家分享的是使用javascript實(shí)現(xiàn)仿制蘋果的懸浮虛擬按鈕的代碼，非常的簡(jiǎn)單，給大家一個(gè)思路，大家可以根據(jù)自己的情況自由擴(kuò)展。
2016-04-04
JS+DIV+CSS排版布局實(shí)現(xiàn)美觀的選項(xiàng)卡效果
這篇文章主要介紹了JS+DIV+CSS排版布局實(shí)現(xiàn)美觀的選項(xiàng)卡效果,通過簡(jiǎn)單的div+css布局結(jié)合JavaScript切換頁面樣式實(shí)現(xiàn)美觀的選項(xiàng)卡效果,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-10-10
鼠標(biāo)移到圖片上變大顯示而不是放大鏡效果
這篇文章主要介紹了通過js實(shí)現(xiàn)的，當(dāng)鼠標(biāo)移到圖片上變大顯示而不是放大鏡效果,需要的朋友可以參考下
2014-06-06
通過隱藏iframe實(shí)現(xiàn)無刷新上傳文件操作
本文給大家介紹iframe無刷新上傳文件，通過一個(gè)隱藏的iframe來處理上傳操作我采用的是ReactJS,amazeui,nodejs1.html target指向iframe的name,就是把上傳后的操作交給iframe來處理
2016-03-03
plupload+artdialog實(shí)現(xiàn)多平臺(tái)上傳文件
這篇文章主要介紹了plupload+artdialog實(shí)現(xiàn)多平臺(tái)上傳文件的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2016-07-07
javascript jscroll模擬html元素滾動(dòng)條
這里是自己在工作不太忙的時(shí)候?qū)懗鰜砹艘粋€(gè)用戶可以自定義的滾動(dòng)條jscroll，以下簡(jiǎn)稱jscroll。jscroll默認(rèn)只提供一種滾動(dòng)條樣式，部分樣式來自google webstore ，其中有部分css3樣式主要用于實(shí)現(xiàn)圓角，陰影效果
2012-12-12
小程序?qū)崿F(xiàn)跑馬燈效果
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)跑馬燈效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-07-07