HTML怎麼實作簡單計算器-html教學-PHP中文網

首頁

web前端

html教學

HTML怎麼實作簡單計算器

php中世界最好的语言

Feb 01, 2018 am 09:27 AM

html簡單計算機

這次帶給大家HTML怎麼實作簡單計算器，HTML實作簡單計算器的注意事項有哪些，下面就是實戰案例，一起來看一下。

<!DOCTYPE html> 
<html> 
<meta name="content-type" content="text/html; charset=UTF-8"> 
<head> 
<title>Calculator</title> 
<!--将按键内容以
字符串
形式存储在文字框中当按钮为“=”时，调用eval方法计算结果然后将结果输出文字框中--> 
<script type="text/
javascript
"> 
var numresult; 
var str; 
function 
onclick
num(nums) { 
str = 
document
.getElementById("nummessege"); 
str.value = str.value + nums; 
} 
function onclickclear() { 
str = document.getElementById("nummessege"); 
str.value = ""; 
} 
function onclickresult() { 
str = document.getElementById("nummessege"); 
numresult = eval(str.value); 
str.value = numresult; 
} 
</script> 
</head> 
<body bgcolor="affff" > 
<!--定义按键表格,每个按键对应一个事件触发--> 
<table border="1" align="center" bgColor="#bbff77" 
style="height: 350px; width: 270px"> 
<tr> 
<td colspan="4"> 
<input type="text" id="nummessege" 
style="height: 90px; width: 350px; 
font-size
: 50px" /> 
</td> 
</tr> 
<tr> 
<td> 
<input type="button" value="1" id="1" onclick="onclicknum(1)" 
style="height: 70px; width: 90px; font-size: 35px"> 
</td> 
<td> 
<input type="button" value="2" id="2" onclick="onclicknum(2)" 
style="height: 70px; width: 90px; font-size: 35px"> 
</td> 
<td> 
<input type="button" value="3" id="3" onclick="onclicknum(3)" 
style="height: 70px; width: 90px; font-size: 35px"> 
</td> 
<td> 
<input type="button" value="+" id="add" onclick="onclicknum(&#39;+&#39;)" 
style="height: 70px; width: 90px; font-size: 35px"> 
</td> 
</tr> 
<tr> 
<td> 
<input type="button" value="4" id="4" onclick="onclicknum(4)" 
style="height: 70px; width: 90px; font-size: 35px"> 
</td> 
<td> 
<input type="button" value="5" id="5" onclick="onclicknum(5)" 
style="height: 70px; width: 90px; font-size: 35px"> 
</td> 
<td> 
<input type="button" value="6" id="6" onclick="onclicknum(6)" 
style="height: 70px; width: 90px; font-size: 35px"> 
</td> 
<td> 
<input type="button" value="-" id="sub" onclick="onclicknum(&#39;-&#39;)" 
style="height: 70px; width: 90px; font-size: 35px"> 
</td> 
</tr> 
<tr> 
<td> 
<input type="button" value="7" id="7" onclick="onclicknum(7)" 
style="height: 70px; width: 90px; font-size: 35px"> 
</td> 
<td> 
<input type="button" value="8" id="8" onclick="onclicknum(8)" 
style="height: 70px; width: 90px; font-size: 35px"> 
</td> 
<td> 
<input type="button" value="9" id="9" onclick="onclicknum(9)" 
style="height: 70px; width: 90px; font-size: 35px"> 
</td> 
<td> 
<input type="button" value="*" id="mul" onclick="onclicknum(&#39;*&#39;)" 
style="height: 70px; width: 90px; font-size: 35px"> 
</td> 
</tr> 
<tr> 
<td colspan="2"> 
<input type="button" value="0" id="0" onclick="onclicknum(0)" 
style="height: 70px; width: 190px; font-size: 35px"> 
</td> 
<td> 
<input type="button" value="." id="point" onclick="onclicknum(&#39;.&#39;)" 
style="height: 70px; width: 90px; font-size: 35px"> 
</td> 
<td> 
<input type="button" value="/" id="division" 
onclick="onclicknum(&#39;/&#39;)" 
style="height: 70px; width: 90px; font-size: 35px"> 
</td> 
</tr> 
<tr> 
<td colspan="2"> 
<input type="button" value="Del" id="clear" 
onclick="onclickclear()" 
style="height: 70px; width: 190px; font-size: 35px" /> 
</td> 
<td colspan="2"> 
<input type="button" value="=" id="result" 
onclick="onclickresult()" 
style="height: 70px; width: 190px; font-size: 35px" /> 
</td> 
</tr> 
</table> 
</body> 
</html>

相信看了這些案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

相關閱讀：

怎麼讓html的下拉式選單提交後保留選取值不回傳預設值

html的元素如何設定焦點

html如何用超連結開啟新視窗時控制其屬性

以上是HTML怎麼實作簡單計算器的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

超越HTML：網絡開發的基本技術Apr 26, 2025 am 12:04 AM

要構建一個功能強大且用戶體驗良好的網站，僅靠HTML是不夠的，還需要以下技術：JavaScript賦予網頁動態和交互性，通過操作DOM實現實時變化。 CSS負責網頁的樣式和佈局，提升美觀度和用戶體驗。現代框架和庫如React、Vue.js和Angular，提高開發效率和代碼組織結構。

HTML中的布爾屬性是什麼？舉一些例子。Apr 25, 2025 am 12:01 AM

布爾屬性是HTML中的特殊屬性，不需要值即可激活。 1.布爾屬性通過存在與否控制元素行為，如disabled禁用輸入框。 2.它們的工作原理是瀏覽器解析時根據屬性的存在改變元素行為。 3.基本用法是直接添加屬性，高級用法可通過JavaScript動態控制。 4.常見錯誤是誤以為需要設置值，正確寫法應簡潔。 5.最佳實踐是保持代碼簡潔，合理使用布爾屬性以優化網頁性能和用戶體驗。

如何驗證您的HTML代碼？Apr 24, 2025 am 12:04 AM

HTML代碼可以通過在線驗證器、集成工具和自動化流程來確保其清潔度。 1)使用W3CMarkupValidationService在線驗證HTML代碼。 2)在VisualStudioCode中安裝並配置HTMLHint擴展進行實時驗證。 3)利用HTMLTidy在構建流程中自動驗證和清理HTML文件。

HTML與CSS和JavaScript：比較Web技術Apr 23, 2025 am 12:05 AM

HTML、CSS和JavaScript是構建現代網頁的核心技術：1.HTML定義網頁結構，2.CSS負責網頁外觀，3.JavaScript提供網頁動態和交互性，它們共同作用，打造出用戶體驗良好的網站。

HTML作為標記語言：其功能和目的Apr 22, 2025 am 12:02 AM

HTML的功能是定義網頁的結構和內容，其目的在於提供一種標準化的方式來展示信息。 1）HTML通過標籤和屬性組織網頁的各個部分，如標題和段落。 2）它支持內容與表現分離，提升維護效率。 3）HTML具有可擴展性，允許自定義標籤增強SEO。

HTML，CSS和JavaScript的未來：網絡開發趨勢Apr 19, 2025 am 12:02 AM

HTML的未來趨勢是語義化和Web組件，CSS的未來趨勢是CSS-in-JS和CSSHoudini，JavaScript的未來趨勢是WebAssembly和Serverless。 1.HTML的語義化提高可訪問性和SEO效果，Web組件提升開發效率但需注意瀏覽器兼容性。 2.CSS-in-JS增強樣式管理靈活性但可能增大文件體積，CSSHoudini允許直接操作CSS渲染。 3.WebAssembly優化瀏覽器應用性能但學習曲線陡，Serverless簡化開發但需優化冷啟動問題。