js计算器

最新推荐文章于 2023-12-01 19:30:20 发布

你只存在黄昏里

最新推荐文章于 2023-12-01 19:30:20 发布

阅读量415

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/weixin_58456310/article/details/121593094

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>计算器</title>
   </head>
   <style type="text/css">
   .alldiv{
       border: solid 1px #0000FF;
       width: 300px;
       height: 420px;
       margin-top: 150px;
       margin-left: 500px;
   }
       .l1 {
           margin-top: 10px;
           width: 200px;
           height: 75px;
           text-align: right;
           font-size: 24px;
       }
       .button{
           width: 70px;
           height: 75px;
       }
   </style>
   <script type="text/javascript">
       flag = true;
       function getNum(val){
       var t=document.getElementById("display");
           if(flag){

           t.value="";
           }

           flag=false;
       t.value=t.value+val;
       }

       function AC(){
       var t=document.getElementById("display");
       //显示0
       t.value="0";
       //让下次输入可以清空0
       flag=true;
       }
       //计算结果
       function equals(){
       var t=document.getElementById("display");
       t.value=eval(t.value);
       }

   </script>
   <body>
       <div class="alldiv">
           <div>
           <input class="l1" type="text" name="" id="display" value="" />    <input class="button" type="button" name="" id="" value="C" οnclick="AC()"/>
       </div>
       <hr >
       <div id="num" >
           <input class="button" type="button" name="" id="" value="1" οnclick="getNum(this.value)" />
           <input class="button" type="button" name="" id="" value="2" οnclick="getNum(this.value)" />
           <input class="button" type="button" name="" id="" value="3" οnclick="getNum(this.value)" />
           <input class="button" type="button" name="" id="" value="+" οnclick="getNum(this.value)" /><br>
           <input class="button" type="button" name="" id="" value="4" οnclick="getNum(this.value)" />
           <input class="button" type="button" name="" id="" value="5" οnclick="getNum(this.value)" />
           <input class="button" type="button" name="" id="" value="6" οnclick="getNum(this.value)" />
           <input class="button" type="button" name="" id="" value="-" οnclick="getNum(this.value)" /><br>
           <input class="button" type="button" name="" id="" value="7" οnclick="getNum(this.value)" />
           <input class="button" type="button" name="" id="" value="8" οnclick="getNum(this.value)" />
           <input class="button" type="button" name="" id="" value="9" οnclick="getNum(this.value)" />
           <input class="button" type="button" name="" id="" value="*" οnclick="getNum(this.value)" /><br>
           <input class="button" type="button" name="" id="" value="0" οnclick="getNum(this.value)" />
           <input class="button" type="button" name="" id="" value="." οnclick="getNum(this.value)" />
           <input class="button" type="button" name="" id="" value="=" οnclick="equals()" />
           <input class="button" type="button" name="" id="" value="/" οnclick="getNum(this.value)" />
       </div>
       </div>

   </body>
</html>

你只存在黄昏里

关注

0
点赞
踩
0

收藏

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

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>计算器</title> </head> <style type="text/css"> .alldiv{ border: solid 1px #0000FF; width: 300px; ...
复制链接

扫一扫