参考部分资料,编写一个简单的计算器案例,虽然完成了正常需求,但是也有不满之处,待后续实力提升后再来补充,先把不足之处列出: 1:本来打算只要打开页面,计算器的输入框会显示一个默认为0的状态,但是在输入框加入默认显示为0的时候,选择数据输入时,该0会显示输入数字的前面,例如&am ...
参考部分资料,编写一个简单的计算器案例,虽然完成了正常需求,但是也有不满之处,待后续实力提升后再来补充,先把不足之处列出:
1:本来打算只要打开页面,计算器的输入框会显示一个默认为0的状态,但是在输入框加入默认显示为0的时候,选择数据输入时,该0会显示输入数字的前面,例如”0123“,由于能力有限,待后续实力提升再来补充完善!
2:目前只能实现鼠标控制选择按钮,待完善键盘录入功能。
html部分:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8"> 5 <title>计算器</title> 6 </head> 7 <body onload="onLoad()"> 8 <div id="calculator"> 9 <div class="LOGO">10 <span class="name">简单的计算器</span>11 <span class="verson">@liumobai v1.0</span>12 </div>13 <div id="shuRu">14 <!--screen输入栏-->15 <div class="screen">16 <input type="text" id="screenName" name="screenName" class="screen" value="" onfocus="jsq(this)">17 </div>18 </div>19 <div id="keys">20 <!-- operators and other keys -->21 <!--第一排-->22 <input type="button" id="7" onclick="jsq(this.id)" value="7" class="buttons">23 <input type="button" id="8" onclick="jsq(this.id)" value="8" class="buttons">24 <input type="button" id="9" onclick="jsq(this.id)" value="9" class="buttons">25 <input type="button" id="Back" onclick="tuiGe()" value="Back" class="buttons">26 <input type="button" id="C" onclick="clearNum()" value="C" class="buttons" style="margin-right:0px">27 <!--第二排-->28 <input type="button" id="4" onclick="jsq(this.id)" value="4" class="buttons">29 <input type="button" id="5" onclick="jsq(this.id)" value="5" class="buttons">30 <input type="button" id="6" onclick="jsq(this.id)" value="6" class="buttons">31 <input type="button" id="*" onclick="jsq(this.id)" value="*" class="buttons">32 <input type="button" id="/" onclick="jsq(this.id)" value="/" class="buttons" style="margin-right:0px">33 <!--第三排-->34 <input type="button" id="1" onclick="jsq(this.id)" value="1" class="buttons">35 <input type="button" id="2" onclick="jsq(this.id)" value="2" class="buttons">36 <input type="button" id="3" onclick="jsq(this.id)" value="3" class="buttons">37 <input type="button" id="+" onclick="jsq(this.id)" value="+" class="buttons">38 <input type="button" id="-" onclick="jsq(this.id)" value="-" class="buttons" style="margin-right:0px">39 <!--第四排-->40 <input type="button" id="0" onclick="jsq(this.id)" value="0" class="buttons">41 <input type="button" id="00" onclick="jsq(this.id)" value="00" class="buttons">42 <input type="button" id="." onclick="jsq(this.id)" value="." class="buttons">43 <input type="button" id="%" onclick="jsq(this.id)" value="%" class="buttons">44 <input type="button" id="eva" onclick="eva()" value="=" class="buttons" style="margin-right:0px">45 </div>46 <div class="footer">47 <span class="aside">欢迎使用JavaScript计算器</span>48 <span class="link">49 <a href="#" title="声明" target="_blank">反馈</a>50 </span>51 </div>52 </div>53 </body>54 </html>
海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理:https://www.xlkjsw.com
原标题:javascript简单计算器实践
关键词:JavaScript
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。