使用html+css+js实现简易计算器
程序员文章站
2022-04-05 11:26:17
使用html+css+js实现简易计算器， 效果图如下： html代码如下： CSS代码如下： JS代码如下： ......
使用html+css+js实现简易计算器，
效果图如下：
html代码如下：
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="x-ua-compatible" content="ie=edge"> 7 <title>calculator</title> 8 <link rel="stylesheet" type="text/css" href="style.css"> 9 <script type="text/javascript" src="contain.js"></script> 10 <title>document</title> 11 </head> 12 <body> 13 <div class="calculator"> 14 <form name="calculator"> 15 <input type="text" id="display" value=""> 16 <br> 17 <input type="button" class="btn number txt" value="tynam"> 18 <input type="button" id="clear" class="btn number" value="ac" onclick="cleardisplay();"> 19 <input type="button" class="btn number" value="<-" onclick="del();"> 20 <input type="button" class="btn operator" value="/" onclick="get(this.value);"> 21 <br> 22 <input type="button" class="btn number" value="7" onclick="get(this.value);"> 23 <input type="button" class="btn number" value="8" onclick="get(this.value);"> 24 <input type="button" class="btn number" value="9" onclick="get(this.value);"> 25 <input type="button" class="btn operator" value="*" onclick="get(this.value);"> 26 <br> 27 <input type="button" class="btn number" value="4" onclick="get(this.value);"> 28 <input type="button" class="btn number" value="5" onclick="get(this.value);"> 29 <input type="button" class="btn number" value="6" onclick="get(this.value);"> 30 <input type="button" class="btn operator" value="+" onclick="get(this.value);"> 31 <br> 32 <input type="button" class="btn number" value="1" onclick="get(this.value);"> 33 <input type="button" class="btn number" value="2" onclick="get(this.value);"> 34 <input type="button" class="btn number" value="3" onclick="get(this.value);"> 35 <input type="button" class="btn operator" value="-" onclick="get(this.value);"> 36 <br> 37 <input type="button" class="btn number" value="0" onclick="get(this.value);"> 38 <input type="button" class="btn number" value="." onclick="get(this.value);"> 39 <input type="button" class="btn operator equal" value="=" onclick="calculates();"> 40 </form> 41 </div> 42 </body> 43 </html>
css代码如下：
1 * {
2 border: none;
3 font-family: 'open sans', sans-serif;
4 margin: 0;
5 padding: 0;
6 }
7
8 .calculator {
9 background-color: #fff;
10 height: 600px;
11 margin: 50px auto;
12 width: 600px;
13 }
14
15 form {
16 background-color: rgb(75, 70, 71);
17 padding: 5px 1px auto;
18 width: 245px;
19 }
20 .btn {
21 outline: none;
22 cursor: pointer;
23 font-size: 20px;
24 height: 45px;
25 margin: 5px 0 5px 10px;
26 width: 45px;
27
28 }
29 .btn:first-child {
30 margin: 5px 0 5px 10px;
31 }
32
33 #display {
34 outline: none;
35 background-color: #dededc;
36 color: rgb(75, 70, 71);
37 font-size: 40px;
38 height: 47px;
39 text-align: right;
40 width: 224px;
41 margin: 10px 10px auto;
42 }
43 .number {
44 background-color: rgb(143, 140, 140);
45 color: #dededc;
46 }
47
48 .operator {
49 background-color: rgb(239, 141, 49);
50 color: #ffffff;
51 }
52
53 .equal{
54 width: 105px;
55 }
56
57 .txt{
58 font-size:12px;
59 background: none;
60 }
js代码如下：
/* display clear */
function cleardisplay() {
document.getelementbyid("display").value = "";
}
/* del */
function del() {
var numb = "";
numb = document.getelementbyid("display").value;
for(i=0;i<numb.length;i++)
{
document.getelementbyid("display").value = numb.substring(0,numb.length-1);
if(numb == '')
{
document.getelementbyid("display").value = '';
}
}
}
/* recebe os valores */
function get(value) {
document.getelementbyid("display").value += value;
}
/* calcula */
function calculates() {
var result = 0;
result = document.getelementbyid("display").value;
document.getelementbyid("display").value = "";
document.getelementbyid("display").value = eval(result);
};