利用javascript制作简易计算器
2020-08-08 15:54
591 查看
第一步:利用html构建好计算器的大概形状样式
<table> <tr> <td colspan="4" ><input id="text" type="text" value="0" /></td> </tr> <tr> <td colspan="2"><button class="btn">del</button></td> <td colspan="2"><button class="btn">c</button></td> </tr> <tr> <td><button class="btn">9</button></td> <td><button class="btn">8</button></td> <td><button class="btn">7</button></td> <td><button class="btn">+</button></td> </tr> <tr> <td><button class="btn">6</button></td> <td><button class="btn">5</button></td> <td><button class="btn">4</button></td> <td><button class="btn">-</button></td> </tr> <tr> <td><button class="btn">3</button></td> <td><button class="btn">2</button></td> <td><button class="btn">1</button></td> <td><button class="btn">*</button></td> </tr> <tr> <td><button class="btn">0</button></td> <td><button class="btn">.</button></td> <td><button class="btn">=</button></td> <td><button class="btn">/</button></td> </tr> </table>
第二步:利用css对其进行修饰加工
<style> *{ padding:0; margin:0; } table{ width:400px; margin:auto; border:1px solid silver; border-collapse: collapse;/*列与列的间距*/ } td { width: 100px; border: 1px solid #525252; } td input{ width:98.7%; height:60px; outline: none; text-align: right; font-size: 20px; background: rgba(251, 255, 227, 0.81); } td button{ width:100%; height:60px; font-size: 22px; background: rgba(251, 223, 255, 0.81); } </style>
第三步:利用js写出计算器的基本功能
//获取按钮 var buttonal=document.getElementsByClassName ("btn"); var textal=document.getElementById("text"); var res=[]; //定义一个数组存储输入的值 var label=false; for(var i=0;i<buttonal.length;i++){ buttonal [i].onclick=addclick; function addclick(){ //输入为数字或者为“.” if(!isNaN(this.innerHTML) || this.innerHTML=="."){ //文本框初值不为0 label = true; if(textal.value!== "0"){ //文本框中含有“.” if(textal.value.indexOf(".")!==-1){ //处理点重复的问题 文本框里面有点 不上去点(用户按的数字 得加 用户按的是点 不加) //输入"."时 if(this.innerHTML!== "."){ textal.value+=this.innerHTML; } } else{ textal.value+=this.innerHTML; } } //文本框初值为0 else{ if(this.innerHTML =="."){ textal.value="0"+this.innerHTML ; } else{ textal.value=this.innerHTML; } } } //非数字 else{ switch(this.innerHTML ) { case "+" :save(this); break; case "-" :save(this); break; case "/" :save(this); break; case "*":save(this); break; case "=": res.push(textal.value); var result=eval(res.join("")); if(result =="Infinity"){ remove_add ("remove"); } textal.value=result==Infinity?"除数不能为零":result; //console.log(res.join("")); res=[]; break; case "del": //从后往前一个一个的减数字 substr(start,count) substring(start,end) end不取 textal.value = textal.value.length==1 ? "0":textal.value.substr(0,textal.value.length-1); break; case "c": textal.value="0"; res=[]; remove_add("add"); break; } } } } function save(mini){ //清屏之前存储用户按的值 // 确认一个条件 用户是连续按符号 还是数字+符号 if(!label){ //连续两次按符号时 res[res.length-1]=mini.innerHTML ; //第二次按的符号替代第一次的 } else{ res.push(textal.value ); res.push(mini.innerHTML ); } textal.value="0"; label=false; } //卸载除c以外的所有元素的事件 function remove_add(p){ for(var i=0;i<buttonal.length;i++){ if(p == "add"){ buttonal[i].onclick = addclick; } else{ if(buttonal[i].innerHTML!="c"){ buttonal[i].onclick = null; } } } } </script>
最终样式如下:
相关文章推荐
- javascript利用canvas制作验证码
- 利用JavaScript制作网页中“选项卡”效果。
- javascript制作简易计算器
- 利用Javascript制作网页特效(时间特效)
- 【我们开发有力量之二】利用javascript制作批量网络投票机器人(自动改IP)
- 利用javascript制作常见的弹出窗口
- Android利用布局来制作一个简易计算器
- 利用html、css、javascript、php同时交互数据库制作的注册登录界面
- 【JavaScript】利用onmousemove与onmouseout事件制作兼容IE6纯javascript无插件原生态的下拉菜单dropdown
- 利用Javascript制作Tab面板
- JavaScript初学入门(JS打印9*9乘法表,JS制作简易计算器)
- JavaScript制作简易计算器
- 利用java的swing组件制作简易计算器
- JavaScript 不用eval制作简易计算器
- 利用JavaScript的AngularJS库制作电子名片的方法
- 利用Javascript制作网页特效(图像特效)
- 利用JavaScript制作倒计时牌
- 利用JavaScript制作星星金字塔
- 利用绝对布局制作两个数加减乘除的简易计算器
- 利用Javascript制作宾果(BINGO)游戏