├── index.html ├── script.js └── styless.css /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Page Title 7 | 8 | 9 | 10 | 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 |
44 |
45 | 46 |
47 |
48 |
49 |
50 |
51 | 52 |
53 | 54 | 55 | 56 | 57 | 58 | 59 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | function insert(num){ 2 | var myString = document.form.textview.value; 3 | var lastChar = myString[myString.length - 1]; 4 | if (myString.length < 30) { 5 | if (!isNaN(lastChar) || lastChar == null || !isNaN(num)) { 6 | document.form.textview.value = myString + num; 7 | }else if(num != lastChar){ 8 | document.form.textview.value = myString.replace(lastChar, num); 9 | } 10 | } 11 | } 12 | function equal(){ 13 | var sum = document.form.textview.value; 14 | if (sum) { 15 | document.form.textview.value = eval(sum); 16 | } 17 | } 18 | function clean(){ 19 | document.form.textview.value = ''; 20 | } 21 | function back(){ 22 | var exp = document.form.textview.value; 23 | document.form.textview.value = exp.substring(0,exp.length - 1); 24 | } -------------------------------------------------------------------------------- /styless.css: -------------------------------------------------------------------------------- 1 | /* *{ 2 | padding: 0; 3 | margin: 0; 4 | } 5 | table{ 6 | text-align: center; 7 | background-color: aquamarine; 8 | padding: 10px; 9 | } 10 | .label{ 11 | border-radius: 20px; 12 | position: relative; 13 | width: 197px; 14 | } */ 15 | *{ 16 | margin: 0; 17 | padding: 0; 18 | box-sizing: border-box; 19 | } 20 | body{ 21 | background: #333; 22 | } 23 | .main{ 24 | background: #ccc; 25 | text-align: center; 26 | width: 400px; 27 | margin: 80px auto; 28 | padding: 30px; 29 | } 30 | form{ 31 | padding: 0 5px; 32 | margin-bottom: 15px; 33 | } 34 | .textview{ 35 | width: 100%; 36 | height: 40px; 37 | padding: 0 10px; 38 | pointer-events: none; 39 | } 40 | .clearfix:before, .clearfix:after{ 41 | content: ''; 42 | display: table; 43 | clear: both; 44 | width: 100%; 45 | } 46 | .col-3{ 47 | width: 25%; 48 | padding: 5px; 49 | float: left; 50 | } 51 | .col-6{ 52 | width: 50%; 53 | padding: 5px; 54 | float: left; 55 | } 56 | .button{ 57 | width: 100%; 58 | height: 40px; 59 | outline: none; 60 | } 61 | .button.top-button{ 62 | background: #6d4b7e; 63 | border-color: #d6d6d6; 64 | color: #fff; 65 | } 66 | .button.equal{ 67 | background: #ad3535; 68 | color: #fff; 69 | font-size: 22px; 70 | } 71 | .button.operator{ 72 | background: #20b2aa; 73 | border-color: #d6d6d6; 74 | color: #fff; 75 | font-size: 20px; 76 | } --------------------------------------------------------------------------------