HTML是一種用于創建網頁的標準語言,在網頁中實現一個計算器通常可以使用JavaScript編寫,但是HTML也可以通過表單及表格等結構實現計算器的功能。
下面是一個簡單的HTML代碼實現了一個簡單的計算器,代碼使用pre標簽以保持格式的整齊:
<form> <table> <tr> <td colspan="4"><input type="text" name="result" id="result" value="0"></td> </tr> <tr> <td><input type="button" value="1" onclick="document.getElementById('result').value += '1'"></td> <td><input type="button" value="2" onclick="document.getElementById('result').value += '2'"></td> <td><input type="button" value="3" onclick="document.getElementById('result').value += '3'"></td> <td><input type="button" value="+" onclick="document.getElementById('result').value += '+'"></td> </tr> <tr> <td><input type="button" value="4" onclick="document.getElementById('result').value += '4'"></td> <td><input type="button" value="5" onclick="document.getElementById('result').value += '5'"></td> <td><input type="button" value="6" onclick="document.getElementById('result').value += '6'"></td> <td><input type="button" value="-" onclick="document.getElementById('result').value += '-'"></td> </tr> <tr> <td><input type="button" value="7" onclick="document.getElementById('result').value += '7'"></td> <td><input type="button" value="8" onclick="document.getElementById('result').value += '8'"></td> <td><input type="button" value="9" onclick="document.getElementById('result').value += '9'"></td> <td><input type="button" value="*" onclick="document.getElementById('result').value += '*'"></td> </tr> <tr> <td><input type="button" value="C" onclick="document.getElementById('result').value = '0'"></td> <td><input type="button" value="0" onclick="document.getElementById('result').value += '0'"></td> <td><input type="submit" value="="></td> <td><input type="button" value="/" onclick="document.getElementById('result').value += '/'"></td> </tr> </table> </form>
在這個計算器中,我們創建了一個表單用于接收用戶輸入,并在表格中創建了按鈕用于進行加減乘除和歸零等操作。在按鈕的onclick事件中,我們使用JavaScript將按鈕的值添加到輸入框中。
使用HTML創建簡單的計算器可能不如使用JavaScript靈活,但借助于HTML的表格和表單等組件,我們可以快速實現一個簡單的計算器。
上一篇html 代碼被轉義
下一篇html 代碼被緩存