jquery计算器

最新推荐文章于 2023-11-11 11:23:47 发布

Ward_Tian

最新推荐文章于 2023-11-11 11:23:47 发布

阅读量903

点赞数

分类专栏： JS

本文链接：https://blog.csdn.net/Ward_Tian/article/details/83120423

版权

JS 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>计算器</title>
<style type="text/css">
.panel{
   border:4px solid #ddd;
   width:192px;
   margin:100px;
}
.panel p, .panel input{
   font-family:"微软雅黑";
   font-size:20px;
   margin:4px;
   float:left;
}
   .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(){
           //给外层绑定事件
           var div=document.getElementById("panel");
           div.onclick = function(e){
               //获取事件源
               var obj=e.srcElement || e.target;
               //只处理input 节点名默认为大写的INPUT
           if(obj.nodeName=="INPUT"){
               var v= obj.value;
               var p=document.getElementById("screen");
               if(v=="="){
                   //计算
                   try{
               var result = eval(p.innerHTML);
               p.innerHTML=result;
               }catch(ex){
                   p.innerHTML="error";
               }}else if(v=="C"){
                   //清空
                   p.innerHTML= "";
               }else{
                   //累加 p内的旧值+按钮的value
                   p.innerHTML = p.innerHTML+v;
               }
           }

           }
       }


   </script>
</head>
<body>
   <div class="panel" id="panel">
       <div>
           <p id="screen"></p>
           <input type="button" value="C"/>
           <div style="clear:bothh"></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>

Ward_Tian

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery计算器

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset="UTF-8"&gt;&lt;title&gt;计算器&lt;/title&gt;&lt;style type="text/css"&gt;.panel{ border:4px solid #ddd; wid
复制链接

扫一扫