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 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 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 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 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>