您當前位置：首頁 > web前端 > 特效 > 一個簡潔的網頁JS計算器，附詳細代碼釋義

一個簡潔的網頁JS計算器，附詳細代碼釋義

來源：程序員人生發布時間：2013-11-02 06:06:54 閱讀次數：3993次

　　一個簡潔的網頁JS計算器，附詳細代碼釋義。通過下邊的效果演示就可以看到，這是一個挺小的JavaScript網頁計算器，界面美化的我想還是不錯的，畢竟在沒有使用任何圖片修飾的情況下，很好看，而且功能挺實用，可以完成基本的數學算數運算，點擊“運行代碼”可以運行一下看效果。

　　示例：

<html><head><title>網頁計算器，使用了較短的JS，含代碼注釋</title><script></script><style>button {width:40; border: 1 solid #808080;background-color: #FFFFFF}</style></head><body><FORM NAME="Calc"><TABLE BORDER=4 bordercolorlight="#808080" bordercolor="#808080" width="250" height="38"><TR><TD width="291" height="39" bgcolor="#C0C0C0"> <INPUT TYPE="text" NAME="Input" readonly Size="21" style="background-color: #F5F5F5; font-family: Arial; border: 1 solid #000000"> <button NAME="back" OnClick="backspace()">←</button></TD></TR><TR><TD width="291" height="38"><table border="0" width="100%" height="105" cellpadding="0"><tr><td width="25%" height="31" align="center" bgcolor="#C0C0C0"><BUTTON NAME="1" OnClick="addoperator()">1</BUTTON></td><td width="25%" height="31" align="center" bgcolor="#C0C0C0"><BUTTON NAME="2" OnClick="addoperator()">2</BUTTON></td><td width="25%" height="31" align="center" bgcolor="#C0C0C0"><BUTTON NAME="3" OnClick="addoperator()">3</BUTTON></td><td width="25%" height="31" align="center" bgcolor="#C0C0C0"><BUTTON NAME="+" OnClick="addoperator()">+</BUTTON></td></tr><tr><td width="25%" height="31" align="center" bgcolor="#C0C0C0"><BUTTON NAME="4" OnClick="addoperator()">4</BUTTON></td><td width="25%" height="31" align="center" bgcolor="#C0C0C0"><BUTTON NAME="5" OnClick="addoperator()">5</BUTTON></td><td width="25%" height="31" align="center" bgcolor="#C0C0C0"><BUTTON NAME="6" OnClick="addoperator()">6</BUTTON></td><td width="25%" height="31" align="center" bgcolor="#C0C0C0"><BUTTON NAME="-" OnClick="addoperator()">-</BUTTON></td></tr><tr><td width="25%" height="31" align="center" bgcolor="#C0C0C0"><BUTTON NAME="7" OnClick="addoperator()">7</BUTTON></td><td width="25%" height="31" align="center" bgcolor="#C0C0C0"><BUTTON NAME="8" OnClick="addoperator()">8</BUTTON></td><td width="25%" height="31" align="center" bgcolor="#C0C0C0"><BUTTON NAME="9" OnClick="addoperator()">9</BUTTON></td><td width="25%" height="31" align="center" bgcolor="#C0C0C0"><BUTTON NAME="*" OnClick="addoperator()">×</BUTTON></td></tr><tr><td width="25%" height="31" align="center" bgcolor="#C0C0C0"><BUTTON NAME="clear" OnClick="clearinput()">C</BUTTON></td><td width="25%" height="31" align="center" bgcolor="#C0C0C0"><BUTTON NAME="0" OnClick="addoperator()">0</BUTTON></td><td width="25%" height="31" align="center" bgcolor="#C0C0C0"><BUTTON NAME="=" OnClick="result()">=</BUTTON></td><td width="25%" height="31" align="center" bgcolor="#C0C0C0"><BUTTON NAME="/" OnClick="addoperator()">÷</BUTTON></td></tr></table></TD></TR></TABLE></FORM></body></html> <div style="text-align:center;margin:30px 0 0 0;"><hr style="color:#999;height:1px;">如不能顯示效果，請按Ctrl+F5刷新本頁，更多網頁代碼：<a href='http://www.vxbq.cn/' target='_blank'>http://www.vxbq.cn/</a></div>
提示：可修改后代碼再運行!

生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈
程序員人生

------分隔線----------------------------

上一篇 JQuery 字符串的包含問題

下一篇 牟長青：談談自己做聯盟推廣的經驗

分享到:

------分隔線----------------------------

為碼而活

積分：4237

15粉絲

7關注

欄目熱點

多多色-多人伦交性欧美在线观看-多人伦精品一区二区三区视频-多色视频-免费黄色视屏网站-免费黄色在线

一個簡潔的網頁JS計算器，附詳細代碼釋義