<!DOCTYPE html> <html> <head> <title>计算器</title> <meta charset="utf-8" /> <style type="text/css"> .panel { border: 4px solid #ddd; width: 192px; margin: 100px auto; /*border-radius: 6px;*/ } .panel p, .panel input { font-family: "微软雅黑"; font-size: 20px; margin: 4px; float: left; /*border-radius: 4px;*/ } .panel p { width: 122px; height: 26px; border: 1px solid #ddd; padding: 6px; overflow: hidden; } .panel input { width: 40px; height: 40px; border:1px solid #ddd; } </style> <script> window.onload = function (){ //获取事件目标节点(整个div) var div = document.getElementById("jsq"); //给事件目标节点后绑定事件 div.onclick = function (e){ //获取事件源 var obj = e.srcElement||e.target; //获取显示屏 var p = document.getElementById("screen"); //若用户点击的区域是input便执行以下方法 if(obj.nodeName=="INPUT"){ if(obj.value=="C"){ p.innerHTML = ""; }else if(obj.value=="="){ try { p.innerHTML = eval(p.innerHTML); } catch (ex) { //若是用户输入非法,执行"="后提示"Error" p.innerHTML ="Error"; } }else{ p.innerHTML += obj.value; } } } } </script> </head> <body> <div class="panel" id="jsq"> <div> <p id="screen"></p> <input type="button" value="C"> <div style="clear:both"></div> </div> <div> <input type="button" value="7"> <input type="button" value="8"> <input type="button" value="9"> <input type="button" value="/"> <input type="button" value="4"> <input type="button" value="5"> <input type="button" value="6"> <input type="button" value="*"> <input type="button" value="1"> <input type="button" value="2"> <input type="button" value="3"> <input type="button" value="-"> <input type="button" value="0"> <input type="button" value="."> <input type="button" value="="> <input type="button" value="+"> <div style="clear:both"></div> </div> </div> </body> </html>
在线简易计算器源码[html+css+js]
猜你喜欢
转载自blog.csdn.net/vayne_xiao/article/details/54571098
今日推荐
周排行