JavaScript制作簡單網(wǎng)頁計算器

更新時間：2022年08月08日 15:35:17 作者：小言同學(xué)Y

這篇文章主要為大家詳細(xì)介紹了JavaScript制作簡單網(wǎng)頁計算器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了JavaScript制作簡單網(wǎng)頁計算器的具體代碼，供大家參考，具體內(nèi)容如下

一、題目

利用JavaScript中的函數(shù)，完成數(shù)字加、減、乘、除的運(yùn)算，實現(xiàn)一個簡單的計算器。

二、代碼

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>網(wǎng)頁計算器</title>
</head>
?
<body>
<div>
?? ?<p>數(shù)字1：<input type="text" id="num1"/></p>
?? ?<p>數(shù)字2：<input type="text" id="num2"/></p>
?? ?<p>
?? ??? ?<input type="button" value="相加" onclick="add()"/>
?? ??? ?<input type="button" value="相減" onclick="sub()"/>
?? ??? ?<input type="button" value="相乘" onclick="mul()"/>
?? ??? ?<input type="button" value="相除" onclick="div()"/>
?? ?</p>
?? ?<p>結(jié)果（數(shù)字1 op 數(shù)字2）：<p><input type="text" id="result"/></p></p>
</div>
<script>
?? ?
?? ?function add(){
?? ??? ?var num1=parseFloat(document.getElementById("num1").value);
?? ??? ?var num2=parseFloat(document.getElementById("num2").value);
?? ??? ?if(isNaN(num1)||isNaN(num2)){
?? ??? ??? ?alert("請輸入數(shù)字！");
?? ??? ?}else{
?? ??? ??? ?result.value=(num1+num2).toFixed(2);
?? ??? ??? ?return result.value;
?? ??? ?}
?? ?}
?? ?function sub(){
?? ??? ?var num1=parseFloat(document.getElementById("num1").value);
?? ??? ?var num2=parseFloat(document.getElementById("num2").value);
?? ??? ?if(isNaN(num1)||isNaN(num2)){
?? ??? ??? ?alert("請輸入數(shù)字！");
?? ??? ?}else{
?? ??? ??? ?result.value=(num1-num2).toFixed(2);
?? ??? ??? ?return result.value;
?? ??? ?}
?? ?}
?? ?function mul(){
?? ??? ?var num1=parseFloat(document.getElementById("num1").value);
?? ??? ?var num2=parseFloat(document.getElementById("num2").value);
?? ??? ?if(isNaN(num1)||isNaN(num2)){
?? ??? ??? ?alert("請輸入數(shù)字！");
?? ??? ?}else{
?? ??? ??? ?result.value=(num1*num2).toFixed(2);
?? ??? ??? ?return result.value;
?? ??? ?}
?? ?}
?? ?function div(){
?? ??? ?var num1=parseFloat(document.getElementById("num1").value);
?? ??? ?var num2=parseFloat(document.getElementById("num2").value);
?? ??? ?if(isNaN(num1)||isNaN(num2)){
?? ??? ??? ?alert("請輸入數(shù)字！");
?? ??? ?}else if(num2==0){
?? ??? ??? ?alert("除數(shù)不能為0！");
?? ??? ?}else{
?? ??? ??? ?result.value=(num1/num2).toFixed(2);
?? ??? ??? ?return result.value;
?? ??? ?}
?? ?}
?? ?
?? ?
</script>
</body>
</html>