计算器

.h1{

position: relative;

color:blueviolet;

font-size:50px;

text-align: center;

top:50px;

}

.box{

width:500px;

position: relative;

top: 100px;

left:50%;

margin-left: -250px;

text-align: center;

background: #495678;

padding:80px 0;

border-radius: 20px;

box-shadow: 4px 4px #3d4a65;

}

.btn{

background:rgba(255,192,203,0.8);

border: 1px solid pink;

cursor:pointer;

outline:none;

font-size:30px;

margin:10px 15px;

height: 70px;

width: 70px;

box-shadow: 0 5px #1a1313de;

}

.btn:active{

transform: translateY(2px);

}

.btn:first-child{

margin-left:-300px;

}

#display{

overflow: hidden;

box-sizing: border-box;

padding-right:18px;

text-align: right;

outline: none;

border:1px solid #4caf50;

color:yellow;

font-size: 30px;

width:280px;

position: absolute;

height: 50px;

top:95px;

right:55px;

background-color: #4caf50;

}

#display,.btn,.box{

border-radius:35px;

}

.operator{

background:orange;

}

.other{

background:white;

}

//清空

document.getElementById("clear").addEventListener("click",function(){

document.getElementById("display").value="";

});

//运算

function get(value) {

document.getElementById("display").value+=value;

}

//结果

function calculates() {

var result=0;

result=document.getElementById("display").value;

document.getElementById("display").value = eval(result);

}

效果图

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