介紹:
JavaScript 是一種廣泛應用于網(wǎng)頁開發(fā)的腳本語言,它具有靈活、動態(tài)和強大的特性。本文將演示如何使用 JavaScript 創(chuàng)建一個簡單的計算器,并實現(xiàn)基本的加減乘除操作。
正文:
javascript
<!DOCTYPE html>
<html>
<head>
<title>簡單計算器</title>
</head>
<body>
<h1>簡單計算器</h1>
<input id="num1" type="number" placeholder="請輸入第一個數(shù)字">
<input id="num2" type="number" placeholder="請輸入第二個數(shù)字">
<br>
<button onclick="add()">加</button>
<button onclick="subtract()">減</button>
<button onclick="multiply()">乘</button>
<button onclick="divide()">除</button>
<br>
<p id="result">結果將顯示在這里</p>
<script>
function add() {
var num1 = parseInt(document.getElementById("num1").value);
var num2 = parseInt(document.getElementById("num2").value);
var result = num1 + num2;
document.getElementById("result").innerHTML = "結果:" + result;
}
function subtract() {
var num1 = parseInt(document.getElementById("num1").value);
var num2 = parseInt(document.getElementById("num2").value);
var result = num1 - num2;
document.getElementById("result").innerHTML = "結果:" + result;
}
function multiply() {
var num1 = parseInt(document.getElementById("num1").value);
var num2 = parseInt(document.getElementById("num2").value);
var result = num1 * num2;
document.getElementById("result").innerHTML = "結果:" + result;
}
function divide() {
var num1 = parseInt(document.getElementById("num1").value);
var num2 = parseInt(document.getElementById("num2").value);
var result = num1 / num2;
document.getElementById("result").innerHTML = "結果:" + result;
}
</script>
</body>
</html>
解釋:
以上代碼是一個簡單的 HTML 頁面,其中包括兩個輸入框和四個按鈕,用于實現(xiàn)加、減、乘、除操作。JavaScript 部分定義了四個函數(shù),分別對應每個按鈕的點擊事件。這些函數(shù)獲取用戶輸入的數(shù)字,并執(zhí)行相應的計算操作,最后將結果顯示在頁面上。
結論:
通過這個示例,我們可以看到使用 JavaScript 創(chuàng)建一個簡單的計算器是非常簡單的。JavaScript 提供了豐富的功能和靈活性,使得開發(fā)者能夠輕松地實現(xiàn)各種交互功能。希望本文對你有所幫助,歡迎探索更多 JavaScript 的特性和用法。
參考資料:文章來源:http://www.zghlxwxcb.cn/news/detail-772468.html
MDN Web 文檔:JavaScript
W3Schools JavaScript 教程
CSDN JavaScript 專欄文章來源地址http://www.zghlxwxcb.cn/news/detail-772468.html
到了這里,關于使用 JavaScript 創(chuàng)建一個簡單的計算器的文章就介紹完了。如果您還想了解更多內容,請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章,希望大家以后多多支持TOY模板網(wǎng)!