<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點擊的默認(rèn)樣式*/
? ? ? ? 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不同顏色值設(shè)置 */
? ? ? ? .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;">標(biāo)準(zhǔn)</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">x2</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>
? ? ? ? // 鼠標(biāo)事件
? ? ? ? $('.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')
? ? ? ? ? ? }
? ? ? ? })

? ? ? ? // 鼠標(biāo)放在等于號的事件
? ? ? ? $(".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;
? ? ? ? // 用來區(qū)分為第一個還是第二個賦值
? ? ? ? var panduan = '1';
? ? ? ? // 記錄運算的符號
? ? ? ? var sum = '';
? ? ? ? // 記錄是否為小數(shù)點狀態(tài)
? ? ? ? var isXiao = false;
? ? ? ? // 用來阻止用戶多次點擊小數(shù)點
? ? ? ? var dianNum = 0;
? ? ? ? // 用來記錄是否進(jìn)行過計算
? ? ? ? var isjisuan = false;

? ? ? ? // 所有按鈕的點擊事件
? ? ? ? $("button").click(function () {
? ? ? ? ? ? var id = this.id
? ? ? ? ? ? // 區(qū)分?jǐn)?shù)字和運算符號
? ? ? ? ? ? if (this.value) {
? ? ? ? ? ? ? ? // 判斷是否是經(jīng)過計算后的
? ? ? ? ? ? ? ? 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
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? // 判斷是否是小數(shù)
? ? ? ? ? ? ? ? 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') {
? ? ? ? ? ? ? ? ? ? // 阻止多次點擊小數(shù)點
? ? ? ? ? ? ? ? ? ? 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
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? })
? ? ? ? // 用來處理多次點擊運算符號的函數(shù)
? ? ? ? function operation(sysbols) {
? ? ? ? ? ? // 判斷 值是否存在小數(shù)，若存在清一下小數(shù)點點擊次數(shù)的狀態(tài)
? ? ? ? ? ? dianNum = 0
? ? ? ? ? ? // 清一下為小數(shù)賦值的狀態(tài)
? ? ? ? ? ? isXiao = false
? ? ? ? ? ? panduan = '2'
? ? ? ? ? ? // 用來區(qū)分是否是連續(xù)點擊運算符號
? ? ? ? ? ? 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>