HTML CSS, JavaScript 计算器 

  1 <!DOCTYLE html>
  2 <html>
  3   
  4   <head>
  5      <meta charset="utf-8">
  6      <title>
  7        HTML CSS, JavaScript 计算器
  8     </title>
  9     <style>
 10       
 11 }
 12 .container {
 13     background-color: #fff;
 14     border-radius: 50%;
 15     height: 600px;
 16     margin: auto;
 17     width: 600px;
 18 }
 19 h1 {
 20     color: #495678;
 21     font-size: 30px;    
 22     margin-top: 20px;
 23     padding-top: 50px;
 24     display: block;
 25     text-align: center;
 26     text-decoration: none;
 27 }
 28 a {
 29     color: #495678;
 30     font-size: 30px;    
 31     display: block;
 32     text-align: center;
 33     text-decoration: none;
 34     padding-top: 20px;
 35 }
 36 #calculator {
 37     background-color: #495678;
 38     box-shadow: 4px 4px #3d4a65;
 39     margin: 40px auto;
 40     padding: 40px 0 30px 40px;    
 41     width: 280px;
 42    border-radius:10px;
 43 }
 44 .btn {
 45     outline: none;
 46     cursor: pointer;
 47     font-size: 20px;
 48     height: 45px;
 49     margin: 5px 0 5px 10px;
 50     width: 45px;
 51 }
 52 .btn:first-child {
 53     margin: 5px 0 5px 10px;
 54 }
 55 .btn, #display, form {
 56     border-radius: 25px;
 57 }
 58 #display {
 59     outline: none;
 60     background-color: #98d1dc;
 61     box-shadow: inset 6px 6px 0px #3facc0;
 62     color: #dededc;
 63     font-size: 20px;
 64     height: 47px;
 65     text-align: right;
 66     width: 165px;
 67     padding-right: 10px;
 68     margin-left: 10px;
 69 }
 70 .number {
 71     background-color: #72778b;
 72     box-shadow: 0 5px #5f6680;
 73     color: #dededc;
 74 }
 75 .number:active {
 76     box-shadow: 0 2px #5f6680;
 77       -webkit-transform: translateY(2px);
 78       -ms-transform: translateY(2px);
 79       -moz-tranform: translateY(2px);
 80       transform: translateY(2px);
 81 }
 82 .operator {
 83     background-color: #dededc;
 84     box-shadow: 0 5px #bebebe;
 85     color: #72778b;
 86 }
 87 .operator:active {
 88     box-shadow: 0 2px #bebebe;
 89       -webkit-transform: translateY(2px);
 90       -ms-transform: translateY(2px);
 91       -moz-tranform: translateY(2px);
 92       transform: translateY(2px);
 93 }
 94 .other {
 95     background-color: #e3844c;
 96     box-shadow: 0 5px #e76a3d;
 97     color: #dededc;
 98 }
 99 .other:active {
100     box-shadow: 0 2px #e76a3d;
101       -webkit-transform: translateY(2px);
102       -ms-transform: translateY(2px);
103       -moz-tranform: translateY(2px);
104       transform: translateY(2px);
105 }
106     </style>
107   </head>
108   <body>
109     
110   
111 <div class="container">
112         <h1>HTML CSS, JavaScript 计算器</h1>
113         
114         <div id="calculator">
115             <input type="button" id="clear" class="btn other" value="C">
116             <input type="text" id="display">
117                 <br>
118             <input type="button" class="btn number" value="7" onclick="get(this.value);">
119             <input type="button" class="btn number" value="8" onclick="get(this.value);">
120             <input type="button" class="btn number" value="9" onclick="get(this.value);">
121             <input type="button" class="btn operator" value="+" onclick="get(this.value);">
122                 <br>
123             <input type="button" class="btn number" value="4" onclick="get(this.value);">
124             <input type="button" class="btn number" value="5" onclick="get(this.value);">
125             <input type="button" class="btn number" value="6" onclick="get(this.value);">
126             <input type="button" class="btn operator" value="*" onclick="get(this.value);">
127                 <br>
128             <input type="button" class="btn number" value="1" onclick="get(this.value);">
129             <input type="button" class="btn number" value="2" onclick="get(this.value);">
130             <input type="button" class="btn number" value="3" onclick="get(this.value);">
131             <input type="button" class="btn operator" value="-" onclick="get(this.value);">
132                 <br>
133             <input type="button" class="btn number" value="0" onclick="get(this.value);">
134             <input type="button" class="btn operator" value="." onclick="get(this.value);">
135             <input type="button" class="btn operator" value="/" onclick="get(this.value);">            
136             <input type="button" class="btn other" value="=" onclick="calculates();">
137         </div>
138     </div>
139    <script>
140      //清屏
141     /*function cleard(){
142       document.getElementById("display").value = "";
143      }*/
144     document.getElementById("clear").addEventListener("click", function() {
145         document.getElementById("display").value = "";
146    });
147    //获得input的值并显示在display这个框里
148    function get(value) {
149        document.getElementById("display").value += value; 
150    } 
151 
152    //用eval()去计算（eval用来执行字符串的代码的函数）（防止xss攻击，尽量少用eval(）)
153    function calculates() {
154        var result = 0;
155        result = document.getElementById("display").value;
156       document.getElementById("display").value = "";
157       document.getElementById("display").value = eval(result);
158     };
159     </script>
160   </body>
161 </html>

 

posted @ 2019-01-17 11:37  给自己一个梦  阅读(303)  评论(0)    收藏  举报