溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下js中實現計算器功能的案例，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
本文實例為大家分享了js實現計算器功能的具體代碼，供大家參考，具體內容如下
知識點
eval() 函數可計算某個字符串，并執行其中的的 JavaScript 代碼。
代碼如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js計算器</title> <link href="../css/計算器.css" rel="stylesheet"> </head> <body> <h2 class="h2">計算器</h2> <div class="box"> <form name="calculator"> <input type="button" id="clear" class="btn other" value="C"> <input type="text" id="display"> <br/> <input type="button" class="btn number" value="7" onclick="get(this.value);"> <input type="button" class="btn number" value="8" onclick="get(this.value);"> <input type="button" class="btn number" value="9" onclick="get(this.value);"> <input type="button" class="btn operator" value="+" onclick="get(this.value);"> <br/> <input type="button" class="btn number" value="4" onclick="get(this.value);"> <input type="button" class="btn number" value="5" onclick="get(this.value);"> <input type="button" class="btn number" value="6" onclick="get(this.value);"> <input type="button" class="btn operator" value="*" onclick="get(this.value);"> <br/> <input type="button" class="btn number" value="1" onclick="get(this.value);"> <input type="button" class="btn number" value="2" onclick="get(this.value);"> <input type="button" class="btn number" value="3" onclick="get(this.value);"> <input type="button" class="btn operator" value="-" onclick="get(this.value);"> <br/> <input type="button" class="btn number" value="0" onclick="get(this.value);"> <input type="button" class="btn operator" value="." onclick="get(this.value);"> <input type="button" class="btn operator" value="/" onclick="get(this.value);"> <input type="button" class="btn other" value="=" onclick="calculates();"> </form> <div> <script src="../js/計算器.js"> </script> </body> </html>
.h2{
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);
}效果圖
以上是js中實現計算器功能的案例的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
