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