本文實(shí)例為大家分享了js實(shí)現(xiàn)計(jì)算器功能的具體代碼，供大家參考，具體內(nèi)容如下

知識(shí)點(diǎn)

eval() 函數(shù)可計(jì)算某個(gè)字符串，并執(zhí)行其中的的 JavaScript 代碼。

代碼如下

js計(jì)算器

計(jì)算器

.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="";

});

//運(yùn)算

function get(value) {

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

}

//結(jié)果

function calculates() {

var result=0;

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

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

}

效果圖

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

總結(jié)

以上是生活随笔為你收集整理的用统计功能计算机计算js,js实现计算器功能的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。