以文本方式查看主题 - 课外天地 李树青 (http://www.njcie.com/bbs/index.asp) -- Web技术 (http://www.njcie.com/bbs/list.asp?boardid=28) ---- 课上练习代码——利用CSS实现的计算器 (http://www.njcie.com/bbs/dispbbs.asp?boardid=28&id=1757) |
-- 作者:admin -- 发布时间:2016/10/17 16:32:11 -- 课上练习代码——利用CSS实现的计算器 <!DOCTYPE html> <html> <meta name="content-type" c> <head> <style type="text/css"> #nummessege { height: 90px; width: 380px; font-size: 50px; background-color: black; color: white; text-align: right; } table { background-color: darkgrey; border: 1px; height: 350px; width: 270px; margin: auto; } .btn1 { height: 70px; width: 100%; font-size: 35px; } .btn2 { height: 70px; width: 100%; font-size: 35px; } </style> <title>Calculator</title> <!--将按键内容以字符串形式存储在文字框中当按钮为“=”时,调用eval方法计算结果然后将结果输出文字框中--> <script type="text/javascript"> var numresult; var str; function onclicknum(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> <tr> <td colspan="4"> <input type="text" id="nummessege"/> </td> </tr> <tr> <td> <input type="button" value="1" id="1" class="btn1"> </td> <td> <input type="button" value="2" id="2" class="btn1"> </td> <td> <input type="button" value="3" id="3" class="btn1"> </td> <td> <input type="button" value="+" id="add" class="btn1"> </td> </tr> <tr> <td> <input type="button" value="4" id="4" class="btn1"> </td> <td> <input type="button" value="5" id="5" class="btn1"> </td> <td> <input type="button" value="6" id="6" class="btn1"> </td> <td> <input type="button" value="-" id="sub" class="btn1"> </td> </tr> <tr> <td> <input type="button" value="7" id="7" class="btn1"> </td> <td> <input type="button" value="8" id="8" class="btn1"> </td> <td> <input type="button" value="9" id="9" class="btn1"> </td> <td> <input type="button" value="*" id="mul" class="btn1"> </td> </tr> <tr> <td colspan="2"> <input type="button" value="0" id="0" class="btn2"> </td> <td> <input type="button" value="." id="point" class="btn1"> </td> <td> <input type="button" value="/" id="division" class="btn1"> </td> </tr> <tr> <td colspan="2"> <input type="button" value="Del" id="clear" class="btn2"/> </td> <td colspan="2"> <input type="button" value="=" id="result" class="btn2"/> </td> </tr> </table> </body> </html> |