<em>Mac</em>Book项目 2009年学校开始实施<em>Mac</em>Book项目,所有师生配备一本<em>Mac</em>Book,并同步更新了校园无线网络。学校每周进行电脑技术更新,每月发送技术支持资料,极大改变了教学及学习方式。因此2011
2021-06-01 09:32:01
js+css實現計算器功能
2022-07-22 10:01:10
本文範例為大家分享了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>以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援it145.com。
相關文章
-
黑科技的輕簡出行，告別「電量焦慮症」：Anker氮化鎵超能充系列
综合看Anker超能充系列的性价比很高，并且与不仅和iPhone12/苹果<em>Mac</em>Book很配，而且适合多设备充电需求的日常使用或差旅场景，不管是安卓还是Switch同样也能用得上它，希望这次分享能给准备购入充电器的小伙伴们有所
2021-06-01 09:31:42
-
吳亦凡廠牌首秀，L4WUDU居然忘詞了，Rapper和明星比還是有差距！
除了L4WUDU与吴亦凡已经多次共事，成为了明面上的厂牌成员，吴亦凡还曾带领20XXCLUB全队参加2020年的一场音乐节，这也是20XXCLUB首次全员合照，王嗣尧Turbo、陈彦希Regi、<em>Mac</em> Ova Seas、林渝植等人全部出场。然而让
2021-06-01 09:31:34
-
IPFS、Chia、Bzz和ICP挖礦該怎麼選？哪一個更有優勢？
目前应用IPFS的机构：1 谷歌<em>浏览器</em>支持IPFS分布式协议 2 万维网 (历史档案博物馆)数据库 3 火狐<em>浏览器</em>支持 IPFS分布式协议 4 EOS 等数字货币数据存储 5 美国国会图书馆，历史资料永久保存在 IPFS 6 加
2021-06-01 09:31:24
-
有哪些事是買了雪佛蘭後才知道的？美事偷著樂，開拓者車主隨聊
开拓者的车机是兼容苹果和<em>安卓</em>，虽然我不怎么用，但确实兼顾了我家人的很多需求：副驾的门板还配有解锁开关，有的时候老婆开车，下车的时候偶尔会忘记解锁，我在副驾驶可以自己开门：第二排设计很好，不仅配置了一个很大的
2021-06-01 09:30:48
-
iPhone12在618最新定價，跌價幅度超過1400元，還等iPhone13嗎？
不仅是<em>安卓</em>手机，苹果手机的降价力度也是前所未有了，iPhone12也“跳水价”了，发布价是6799元，如今已经跌至5308元，降价幅度超过1400元，最新定价确认了。iPhone12是苹果首款5G手机，同时也是全球首款5nm芯片的智能机，它
2021-06-01 09:30:45