js+css实现计算器功能
作者:Null丶丨
这篇文章主要为大家详细介绍了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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。