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>
運行結果：
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了Bootstrap 網站實例之單頁營銷網站的相關資料,本文給大家介紹的非常詳細具有一定的參考借鑒價值，需要的朋友可以參考下2016-10-10
javascript筆記 String類replace函數的一些事
加固javascript基礎知識目的是為以后研究jQuery源碼做好鋪墊。2011-09-09
下面小編就為大家?guī)硪黄猨s前端實現多圖圖片上傳預覽的兩個方法(推薦)。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-11-11
這篇文章主要為大家詳細介紹了原生js實現商品篩選，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-10-10
這篇文章主要介紹了JavaScript中的String對象常用方法,非常簡單實用，有需要的小伙伴參考下2015-02-02
這篇文章主要介紹了JavaScript實現的XML與JSON互轉功能,結合實例形式分析了基于javascript的xml與json相關轉換功能實現技巧,需要的朋友可以參考下2017-02-02
這篇文章主要分享JavaScript數組操作方法實例梳理總結，刪除數組重復項、獲取數組的片段等方法，需要的小伙伴可以參考一下2022-06-06
這篇文章主要介紹了微信小程序發(fā)送短信驗證碼完整實例，實現發(fā)送短信驗證碼，帶60秒倒計時功能，無需服務器端，非常具有實用價值，需要的朋友可以參考下2019-01-01
本文詳細介紹了前端處理.xlsx文件流并觸發(fā)下載的完整實現方案,包括核心實現流程、關鍵增強功能、常見問題處理以及最佳實踐建議,方案推薦使用FileSaver.js,適用于中型以上項目,需要的朋友可以參考下2025-03-03
這篇文章主要介紹了JavaScript實現的選擇排序算法,結合實例形式分析了選擇排序的原理、實現步驟與相關操作技巧,需要的朋友可以參考下2017-04-04