如下圖效果所示，輸入兩個運算數(shù)，點擊不同的運算符，會在下方得到不同的運算結果
分析與代碼實現(xiàn)
在HTML部分，定義了一個標題為"網(wǎng)頁計算器"的網(wǎng)頁，并創(chuàng)建了兩個輸入框和四個按鈕。最后，創(chuàng)建了一個只讀的結果顯示框，便于計算結果的輸出
在JavaScript部分，定義了一個名為compute的函數(shù)，該函數(shù)接收一個參數(shù)func，根據(jù)func的值調(diào)用相應的計算函數(shù)。函數(shù)內(nèi)部首先獲取輸入的兩個數(shù)字的值，并使用validateInput函數(shù)驗證輸入是否合法。如果輸入不合法，則返回false；否則，根據(jù)func的值調(diào)用相應的計算函數(shù)，并將結果賦值給結果顯示框。文章來源：http://www.zghlxwxcb.cn/news/detail-819580.html
再定義了一些輔助函數(shù)，包括驗證輸入是否合法的validateInput函數(shù)、加法函數(shù)add、減法函數(shù)sub、乘法函數(shù)mul和除法函數(shù)div。其中，除法函數(shù)會檢查除數(shù)是否為0，如果是0則提示錯誤并返回false。文章來源地址http://www.zghlxwxcb.cn/news/detail-819580.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>網(wǎng)頁計算器</title>
</head>
<body>
<!-- 輸入運算數(shù)1 -->
<p>運算數(shù)1：<input id="num1" type="text"></p>
<!-- 輸入運算數(shù)2 -->
<p>運算數(shù)2：<input id="num2" type="text"></p>
<!-- 定義四個按鈕，分別對應加、減、乘、除四種運算 -->
<p>
<input type="button" value="+" onclick="compute(add)">
<input type="button" value="-" onclick="compute(sub)">
<input type="button" value="*" onclick="compute(mul)">
<input type="button" value="/" onclick="compute(div)">
</p>
<!-- 顯示計算結果 -->
<p><input id="result" type="text" readonly></p>
<!-- 定義計算函數(shù)，接收一個參數(shù)func，根據(jù)func的值調(diào)用相應的計算函數(shù) -->
function compute(func){
// 獲取輸入的運算數(shù)1和運算數(shù)2的值
var num1 = document.getElementById('num1').value;
var num2 = document.getElementById('num2').value;
// 驗證輸入是否合法，如果不合法則返回false
if (!validateInput(num1) || !validateInput(num2)){
return false;
}
// 根據(jù)func的值調(diào)用相應的計算函數(shù)，并將結果賦值給結果顯示框
document.getElementById('result').value = func(parseFloat(num1), parseFloat(num2));
}
<!-- 定義驗證輸入是否合法的函數(shù)，如果輸入的不是數(shù)字或者為空，則返回false，否則返回true -->
function validateInput(input){
if (isNaN(input) || input === "") {
return false;
} else {
return true;
}
}
<!-- 定義加法函數(shù)，接收兩個參數(shù)num1和num2，返回它們的和 -->
function add(num1, num2){
return num1 + num2;
}
<!-- 定義減法函數(shù)，接收兩個參數(shù)num1和num2，返回它們的差 -->
function sub(num1 , num2){
return num1 - num2;
}
<!-- 定義乘法函數(shù)，接收兩個參數(shù)num1和num2，返回它們的積 -->
function mul(num1, num2){
return num1 * num2;
}
<!-- 定義除法函數(shù)，接收兩個參數(shù)num1和num2，如果num2為0，則提示錯誤并返回false，否則返回它們的商 -->
function div(num1, num2){
if (num2 == 0){
alert("除數(shù)不能為0");
return false;
}
return num1 / num2;
}
</body>
</html>
到了這里，關于前端——編寫一個簡易網(wǎng)頁計算器的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
