JavaScript练习---简易计算器

最新推荐文章于 2023-03-22 21:27:08 发布

likeswim

最新推荐文章于 2023-03-22 21:27:08 发布

阅读量259

点赞数

分类专栏： JavaScript 笔记

笔记同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

JavaScript

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Document</title>
   <style>
       body,html,div,ul,li,input,p{margin: 0;padding: 0;font-size: 0;}
       div{width: 300px;background-color: #eee;margin: 10px auto;position: relative;border: 3px solid #368;}
       p{color: #fff;font-size:14px;background-color: #000;width: 290px;padding-left: 10px;}
       .mShow{width: 290px;height: 84px;border: none;background:url('images/inputBg.jpg') repeat-x;
       font:36px/1.5 '微软雅黑';text-align: right;padding-right: 10px;}
       .miniShow{font: 12px/1.5 '微软雅黑';color: #fff;text-align: right; position: absolute;border: 0;background-color: #124;width: 290px;height: 20px; padding-right: 10px;right: 0px;top:15px;}
       ul,li{list-style-type: none;}
       ul{padding: 0 0 17px 8px;position: relative;background: #000;}
       li{display: inline-block;margin: 17px 10px 0 0;}
       a,a:visited,a:active,a:link{outline:none;text-decoration: none;}
       a{width: 63px;height: 41px;font:24px/1.5 '微软雅黑';display: inline-block;background-color: #888;
       text-align: center;line-height: 32px;color: #fff;}
       .mEqual{height: 99px;background: url('images/btn.png') no-repeat 0 -164px;line-height: 99px;position:absolute;top:191px;}
       .mEqual:hover{background-position: -63px -164px;}
       .mZero,.mClear{width: 136px;background: url('images/btn.png') no-repeat 0 -82px;}
       .mZero:hover,.mClear:hover{background-position: 0 -123px;}
       .btn-1{background: url('images/btn.png') no-repeat 0 -41px;}
       .btn-1:hover{background-position: -63px -41px;}
       .btn-2{background: url('images/btn.png') no-repeat;}
       .btn-2:hover{background-position: -63px 0;}
   </style>
   <script>
       window.onload = function(){
           var mA = document.getElementsByTagName('a');
           var mInput = document.getElementsByTagName('input');
           for (var i = 0; i < mA.length; i++) {
                       mA[i].onclick = function (){
                       var abc = {'+':'+','-':'-','÷':'/','×':'*','=':mEq,'c':mClear}[this.innerHTML]||(mInput[0].value + this.innerHTML).replace(/^[0\%\/\*\-\+](\d)/,"$1");
                       if(typeof(abc)=='string'){abc.search(/\d/)==0?mInput[0].value=abc:count(abc);}
                       else {abc();}
                       function mClear(){
                           mInput[0].value = 0;
                           mInput[1].value = '';
                       }
                       function mEq(){
                           if(mInput[1].value.search(/\d{1}$/)==-1){
                               mInput[1].value += mInput[0].value;
                               mInput[0].value = parseFloat(eval(mInput[1].value));
                           }
                       }
                       function count(s){
                           if(mInput[0].value.search(/[\%\/\*\-\+]/)!=-1){mInput[0].value=mInput[0].value.replace(/(\d)/,"$1");}
                           else{
                               mInput[1].value = mInput[0].value+s;
                               mInput[0].value = s;
                           }
                       }
                   }
           }
       }
   </script>
</head>
<body>
   <div>
       <p>by Lan</p>
       <input class='mShow' type="text" readonly="readonly" value="0">
       <input class="miniShow" type="text" readonly="readonly" value="0">
   <ul>
   <li class="mbtn"><a href="javascript:void(0)" class="mClear">c</a></li>
   
   <li class="mbtn"><a href="javascript:void(0)" class="btn-1">÷</a></li>
   <li class="mbtn"><a href="javascript:void(0)" class="btn-1">×</a></li>
   <li class="mbtn"><a href="javascript:void(0)" class="btn-2">7</a></li>
   <li class="mbtn"><a href="javascript:void(0)" class="btn-2">8</a></li>
   <li class="mbtn"><a href="javascript:void(0)" class="btn-2">9</a></li>
   <li class="mbtn"><a href="javascript:void(0)" class="btn-1">-</a></li>
   <li class="mbtn"><a href="javascript:void(0)" class="btn-2">4</a></li>
   <li class="mbtn"><a href="javascript:void(0)" class="btn-2">5</a></li>
   <li class="mbtn"><a href="javascript:void(0)" class="btn-2">6</a></li>
   <li class="mbtn"><a href="javascript:void(0)" class="btn-1">+</a></li>
   <li class="mbtn"><a href="javascript:void(0)" class="btn-2">1</a></li>
   <li class="mbtn"><a href="javascript:void(0)" class="btn-2">2</a></li>
   <li class="mbtn"><a href="javascript:void(0)" class="btn-2">3</a></li>
   <li class="mbtn"><a href="javascript:void(0)" class="mEqual">=</a></li>
   <li class="mbtn"><a href="javascript:void(0)" class="mZero">0</a></li>
   <li class="mbtn"><a href="javascript:void(0)" class="btn-2">.</a></li>
</ul>
   </div>
</body>
</html>

likeswim

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript练习---简易计算器

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;style&gt; body,html,div,ul,li,input,p{m
复制链接

扫一扫