js+css實現計算器功能
本文實例為大傢分享瞭js+css實現計算器功能的具體代碼，供大傢參考，具體內容如下
目前僅實現瞭最基礎的運算功能
(因為是js的運算內核，有些小數點計算並不準確，懶得去做去小數點後幾位的操作）
一、最終呈現的視圖效果
二、思路
代碼量有點多，沒辦法。一開始隻是無聊隨便寫的，沒有構思，越寫到後面越冗雜，自己又不想重新推翻去寫。
三、代碼邏輯
<style>
* {
margin: 0;
padding: 0;
}
.content {
width: 350px;
height: 530px;
position: relative;
background-color: #E6E6E6;
border: 1px solid #000;
margin: 100px auto;
/* overflow: hidden; */
box-shadow: 0px 0px 10px #888888;
}
.header {
height: 30px;
line-height: 30px;
padding-left: 10px;
}
.header span {
float: left;
font-weight: 600;
font-size: 12px
}
.tabNav {
height: 28px;
line-height: 28px;
font-size: 12px;
padding: 0 10px;
background-color: #fff;
border-radius: 6px;
position: absolute;
left: 53px;
top: 2px;
box-shadow: 0px 0px 10px #888888;
display: none;
}
.tabNav2 {
height: 28px;
line-height: 28px;
font-size: 12px;
padding: 0 10px;
background-color: #fff;
border-radius: 6px;
position: absolute;
left: -50px;
top: -30px;
box-shadow: 0px 0px 10px #888888;
display: none;
}
.pattern {
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
}
.pLeft {
display: flex;
}
.pLeft>div,
.pRight {
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
}
.pLeft>div>span,
.pRight>span {
display: inline-block;
width: 12px;
height: 12px;
border: 1px solid #000;
}
#allView {
width: 40px;
height: 30px;
line-height: 30px;
text-align: center;
display: none;
}
#allView span {
display: inline-block;
width: 12px;
height: 12px;
border: 1px solid #000;
}
.Mstyle {
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
height: 32px;
line-height: 32px;
font-size: 12px;
font-weight: bold;
color: #B8B8B8;
margin-bottom: 2px;
}
.Mstyle span {
width: 15.66%;
text-align: center;
}
.special {
color: #000;
}
.list {
list-style: none;
/* background-color: #333; */
width: 99%;
height: 275px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
ul li {
/* float: left; */
width: 24.6%;
height: 19%;
margin-bottom: 1.5px;
}
button {
border: none;
width: 100%;
height: 100%;
background-color: #FAFAFA;
}
/*取消button點擊的默認樣式*/
button:focus {
border: 0 none;
outline: none;
}
.view {
height: 100px;
/* line-height: 100px; */
display: flex;
flex-wrap: wrap;
text-align: right;
padding-right: 10px;
}
#calculation {
font-size: 14px;
color: #777;
width: 100%;
}
#val {
font-size: 43px;
font-weight: bold;
width: 100%;
}
.btn {
background-color: #8abae0;
}
/* hover不同顏色值設置 */
.colorChange {
border: 1px solid #E6E6E6;
}
.newColor {
background-color: #F0F0F0;
}
.ortherColor {
font-weight: bold;
font-size: 18px;
}
</style>
<div class="content"> <div class="header"> <span>計算器</span> </div> <div class="tabNav"> 保持在頂部 (Alt + Up) </div> <div class="tabNav2"> 返回全視圖 (Alt + Down) </div> <div class="pattern"> <div class="pLeft"> <div class="colorChange"> <span></span> </div> <div style="width:45px;font-size: 20px;font-weight: bold;">標準</div> <!-- 懶得去找圖片，手動畫個正方形代替 --> <div class="colorChange" id="keep"> <span></span> </div> </div> <!-- 懶得去找圖片，手動畫個正方形代替 --> <div class="pRight colorChange"> <span></span> </div> </div> <!-- 全視圖顯示的操作按鈕 --> <div class="colorChange" id="allView" style="width: 40px;height:30px;line-height: 30px;text-align:center;"> <span></span> </div> <div class="view"> <span id="calculation"></span> <span id='val'>0</span> </div> <div class="Mstyle"> <span>MC</span> <span>MR</span> <span class="special colorChange">M+</span> <span class="special colorChange">M-</span> <span class="special colorChange">MS</span> <span>M-</span> </div> <ul class="list"> <li><button class="newColor">%</button></li> <li><button class="newColor">CE</button></li> <li><button id="c24" class="newColor">C</button></li> <li><button class="newColor">無效</button></li> <li><button class="newColor">1/x</button></li> <li><button class="newColor">x²</button></li> <li><button class="newColor">x^</button></li> <li><button class="newColor" id="except">÷</button></li> <li><button value="7" class="ortherColor">7</button></li> <li><button value="8" class="ortherColor">8</button></li> <li><button value="9" class="ortherColor">9</button></li> <li><button id="ride" class="newColor">x</button></li> <li><button value="4" class="ortherColor">4</button></li> <li><button value="5" class="ortherColor">5</button></li> <li><button value="6" class="ortherColor">6</button></li> <li><button id="reduce" class="newColor">-</button></li> <li><button value="1" class="ortherColor">1</button></li> <li><button value="2" class="ortherColor">2</button></li> <li><button value="3" class="ortherColor">3</button></li> <li><button id="add" class="newColor">+</button></li> <li><button style="font-size:18px;">+/-</button></li> <li><button value="0" class="ortherColor">0</button></li> <li><button id="spot" style="font-size: 20px;">.</button></li> <li><button class="btn" id="equal">=</button></li> </ul> </div>
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script>
// 鼠標事件
$('.colorChange').hover(function () {
console.log(window.event.clientX)
console.log(window.event.clientY)
if (this.id == 'keep') {
$('.tabNav').fadeIn(700)
} else if (this.id == 'allView') {
$('.tabNav2').fadeIn(700)
}
$(this).css('background-color', '#d7d7d7')
$(this).css('border', '1px solid #999')
}, function () {
$('.tabNav').fadeOut(100)
$('.tabNav2').fadeOut(100)
$(this).css('background-color', '#E6E6E6')
$(this).css('border', '1px solid #E6E6E6')
})
// 全視圖操作
$('#allView').click(function () {
$('.header,.pattern,.Mstyle').show()
$('#allView').hide()
$('.content').css('height', '530px')
})
$("#keep").click(function () {
$('.header,.pattern,.Mstyle').hide()
$('#allView').show()
$('.content').css('height', '456px')
})
// 所有按鈕的hover
$('button').hover(function () {
$(this).css('background-color', '#d7d7d7')
$(this).css('border', '1px solid #999')
}, function () {
if ($(this).attr('class') == 'newColor') {
$(this).css('background-color', '#F0F0F0')
$(this).css('border', 'none')
} else {
$(this).css('background-color', '#fff')
$(this).css('border', 'none')
}
})
// 鼠標放在等於號的事件
$(".btn").hover(function () {
$(".btn").css("background-color", "#4599db");
}, function () {
$(".btn").css("background-color", "#8abae0");
});
</script>
<script>
// 獲取 dom
var listText = $('#calculation');
var inputValue = $('#val');
// 運算的第一個值
var first = 0;
// 運算的第二個值
var last = 0;
// 用來區分為第一個還是第二個賦值
var panduan = '1';
// 記錄運算的符號
var sum = '';
// 記錄是否為小數點狀態
var isXiao = false;
// 用來阻止用戶多次點擊小數點
var dianNum = 0;
// 用來記錄是否進行過計算
var isjisuan = false;
// 所有按鈕的點擊事件
$("button").click(function () {
var id = this.id
// 區分數字和運算符號
if (this.value) {
// 判斷是否是經過計算後的
if (!isjisuan) {
} else {
inputValue.text(0)
listText.text(0)
// inputValue.value = 0
first = 0;
last = 0;
sum = '';
panduan = '1';
isXiao = false;
dianNum = 0;
isjisuan = false
}
// 判斷是否是小數
if (isXiao) {
// 判斷是否為第一個值
if (panduan == '1') {
if (first && first.indexOf('.') == -1) {
first = first + '.' + this.value
} else {
first += this.value
}
inputValue.text(Number(first))
} else {
if (last && last.indexOf('.') == -1) {
last = last + '.' + this.value
} else {
last += this.value
}
inputValue.text(Number(last))
inputValue.value = Number(last)
}
} else {
// 判斷是否為第一個值
if (panduan == '1') {
first += this.value
inputValue.text(Number(first))
} else {
last += this.value
inputValue.text(Number(last))
}
}
} else {
isjisuan = false
// 判斷具體是哪個運算符號的點擊事件
if (id == 'equal') { // 等於事件
if (last) {
isjisuan = true
listText.text(Number(first) + sum + Number(last) + '= ')
inputValue.text(eval(Number(first) + sum + Number(last)))
} else {
inputValue.text(Number(first))
}
first = inputValue.text()
last = 0
panduan = '1';
sum = '';
} else if (id == 'add') { // 相加
operation('+')
} else if (id == 'reduce') { // 相減
// sum = '-'
operation('-')
} else if (id == 'ride') { // 相乘
// sum = '*'
operation('*')
} else if (id == 'except') { // 相除
// sum = '/'
operation('/')
} else if (id == 'spot') {
// 阻止多次點擊小數點
if (dianNum >= 1) {
return
}
isXiao = true
dianNum = 1
} else if (id == 'c24') { // 清除所有的東西
inputValue.text(0)
listText.text(0)
// inputValue.value = 0
first = 0;
last = 0;
sum = '';
panduan = '1';
isXiao = false;
dianNum = 0;
isjisuan = false
}
}
})
// 用來處理多次點擊運算符號的函數
function operation(sysbols) {
// 判斷 值是否存在小數，若存在清一下小數點點擊次數的狀態
dianNum = 0
// 清一下為小數賦值的狀態
isXiao = false
panduan = '2'
// 用來區分是否是連續點擊運算符號
if (!last) {
listText.text(Number(first) + sysbols)
} else {
// 用來識別 儲存運算符號的變量
console.log(listText.text(), '1')
first = eval(Number(first) + sum + Number(last))
last = 0
inputValue.text(first)
listText.text(first + sysbols)
}
sum = sysbols
}
</script>
以上就是本文的全部內容，希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet。