html js php计算器代码,基于html+css+js实现简易计算器代码实例

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

效果图如下：

html代码如下

calculatorDocument

CSS代码如下：

* {

border: none;

font-family: 'Open Sans', sans-serif;

margin: 0;

padding: 0;

}

.calculator {

background-color: #fff;

height: 600px;

margin: 50px auto;

width: 600px;

}

form {

background-color: rgb(75, 70, 71);

padding: 5px 1px auto;

width: 245px;

}

.btn {

outline: none;

cursor: pointer;

font-size: 20px;

height: 45px;

margin: 5px 0 5px 10px;

width: 45px;

}

.btn:first-child {

margin: 5px 0 5px 10px;

}

#display {

outline: none;

background-color: #dededc;

color: rgb(75, 70, 71);

font-size: 40px;

height: 47px;

text-align: right;

width: 224px;

margin: 10px 10px auto;

}

.number {

background-color: rgb(143, 140, 140);

color: #dededc;

}

.operator {

background-color: rgb(239, 141, 49);

color: #ffffff;

}

.equal{

width: 105px;

}

.txt{

font-size:12px;

background: none;

}

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

};

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。