html css制作计算器,使用html+css+js实现简易计算器

使用html+css+js实现简易计算器，

效果图如下：

html代码如下：

1

2

3

4

5

6

7

calculator

8

9

10

document

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

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

{

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

};