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)文章

Bootstrap 網(wǎng)站實(shí)例之單頁(yè)營(yíng)銷(xiāo)網(wǎng)站
這篇文章主要介紹了Bootstrap 網(wǎng)站實(shí)例之單頁(yè)營(yíng)銷(xiāo)網(wǎng)站的相關(guān)資料,本文給大家介紹的非常詳細(xì)具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2016-10-10
javascript筆記 String類(lèi)replace函數(shù)的一些事
加固javascript基礎(chǔ)知識(shí)目的是為以后研究jQuery源碼做好鋪墊。
2011-09-09
js前端實(shí)現(xiàn)多圖圖片上傳預(yù)覽的兩個(gè)方法(推薦)
下面小編就為大家?guī)?lái)一篇js前端實(shí)現(xiàn)多圖圖片上傳預(yù)覽的兩個(gè)方法(推薦)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-11-11
原生js實(shí)現(xiàn)商品篩選功能
這篇文章主要為大家詳細(xì)介紹了原生js實(shí)現(xiàn)商品篩選，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-10-10
淺談JavaScript中的String對(duì)象常用方法
這篇文章主要介紹了JavaScript中的String對(duì)象常用方法,非常簡(jiǎn)單實(shí)用，有需要的小伙伴參考下
2015-02-02
JavaScript實(shí)現(xiàn)的XML與JSON互轉(zhuǎn)功能詳解
這篇文章主要介紹了JavaScript實(shí)現(xiàn)的XML與JSON互轉(zhuǎn)功能,結(jié)合實(shí)例形式分析了基于javascript的xml與json相關(guān)轉(zhuǎn)換功能實(shí)現(xiàn)技巧,需要的朋友可以參考下
2017-02-02
梳理總結(jié)25個(gè)JavaScript數(shù)組操作方法實(shí)例
這篇文章主要分享JavaScript數(shù)組操作方法實(shí)例梳理總結(jié)，刪除數(shù)組重復(fù)項(xiàng)、獲取數(shù)組的片段等方法，需要的小伙伴可以參考一下
2022-06-06
微信小程序發(fā)送短信驗(yàn)證碼完整實(shí)例
這篇文章主要介紹了微信小程序發(fā)送短信驗(yàn)證碼完整實(shí)例，實(shí)現(xiàn)發(fā)送短信驗(yàn)證碼，帶60秒倒計(jì)時(shí)功能，無(wú)需服務(wù)器端，非常具有實(shí)用價(jià)值，需要的朋友可以參考下
2019-01-01
前端處理.xlsx文件流并觸發(fā)下載的完整實(shí)現(xiàn)方案
本文詳細(xì)介紹了前端處理.xlsx文件流并觸發(fā)下載的完整實(shí)現(xiàn)方案,包括核心實(shí)現(xiàn)流程、關(guān)鍵增強(qiáng)功能、常見(jiàn)問(wèn)題處理以及最佳實(shí)踐建議,方案推薦使用FileSaver.js,適用于中型以上項(xiàng)目,需要的朋友可以參考下
2025-03-03
JavaScript實(shí)現(xiàn)的選擇排序算法實(shí)例分析
這篇文章主要介紹了JavaScript實(shí)現(xiàn)的選擇排序算法,結(jié)合實(shí)例形式分析了選擇排序的原理、實(shí)現(xiàn)步驟與相關(guān)操作技巧,需要的朋友可以參考下
2017-04-04