HTML和jQuery是現(xiàn)代Web開(kāi)發(fā)中非常流行的工具。如果你正在學(xué)習(xí)這些技術(shù)，那么下面這個(gè)簡(jiǎn)單的計(jì)算器應(yīng)用程序的代碼將是一個(gè)很好的練習(xí)題。你可以用這個(gè)例子學(xué)習(xí)如何使用HTML和jQuery創(chuàng)建一個(gè)實(shí)用的計(jì)算器。
以下是HTML和jQuery計(jì)算器代碼的下載鏈接。你可以通過(guò)查看代碼來(lái)學(xué)習(xí)如何使用HTML和jQuery創(chuàng)建一個(gè)計(jì)算器。
<html>
<head>
<title>簡(jiǎn)單計(jì)算器</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
<h2>簡(jiǎn)單計(jì)算器</h2>
<div>
<input type="text" id="input1">
</div>
<div>
<input type="text" id="input2">
</div>
<div>
<button id="add">+</button>
<button id="subtract">-</button>
<button id="multiply">*</button>
<button id="divide">/</button>
</div>
<p id="result"></p>
<script>
$(document).ready(function() {
$('#add').on('click', function() {
var num1 = parseFloat($('#input1').val());
var num2 = parseFloat($('#input2').val());
var result = num1 + num2;
$('#result').html('結(jié)果: ' + result);
});
$('#subtract').on('click', function() {
var num1 = parseFloat($('#input1').val());
var num2 = parseFloat($('#input2').val());
var result = num1 - num2;
$('#result').html('結(jié)果: ' + result);
});
$('#multiply').on('click', function() {
var num1 = parseFloat($('#input1').val());
var num2 = parseFloat($('#input2').val());
var result = num1 * num2;
$('#result').html('結(jié)果: ' + result);
});
$('#divide').on('click', function() {
var num1 = parseFloat($('#input1').val());
var num2 = parseFloat($('#input2').val());
var result = num1 / num2;
$('#result').html('結(jié)果: ' + result);
});
});
</script>
</body>
</html>上面的代碼中，你會(huì)看到幾個(gè)jQuery事件處理程序，這些處理程序在按鈕被點(diǎn)擊時(shí)調(diào)用，并將結(jié)果輸出到p標(biāo)簽中。這個(gè)例子使用了parseFloat函數(shù)，它將一個(gè)字符串作為參數(shù)并返回一個(gè)浮點(diǎn)數(shù)。這個(gè)函數(shù)非常有用，因?yàn)檩斎肟蛑械闹低ǔＪ亲址?/p>
如果你想學(xué)習(xí)如何使用HTML和jQuery創(chuàng)建一個(gè)復(fù)雜的計(jì)算器，你可以參考這個(gè)簡(jiǎn)單計(jì)算器的代碼，并向它添加更多的功能。創(chuàng)建一個(gè)完美的計(jì)算器需要很多的CSS，但是如果你不關(guān)心外觀，那么這個(gè)例子是一個(gè)很好的起點(diǎn)。