jQuery实现简易的计算器
本文实例为大家分享了jQuery实现简易的计算器的具体代码,供大家参考,具体内容如下
布局如下:
css代码
#d1{ width: 400px; height: 500px; /*background-color: #A9A9A9;*/ float: left; margin: 20px 0px 0px 500px; font-size: 30px; font-weight: bold; font-family: 宋体; text-align: center; line-height: 70px; background:url("../img/1 (20).jpg"); background-repeat:no-repeat; background-size:400px 500px; } #d2{ width: 100%; height: 4%; color: aqua; float: left; border:0px red solid; text-align: left; line-height: 18px; font-size: 20px; font-family: "微软雅黑"; } #d3{ width: 100%; height: 10%; color: aqua; float: left; border:0px red solid; text-align: left; line-height: 18px; margin-top: 3px; margin-bottom: 9px; opacity: 0.8; } .c1{ width: 22.1%; height: 15%; background-color: #FFC0CB; cursor: pointer; float: left; border-radius: 12px; margin: 0px 0px 9px 9px; opacity: 0.8; } .c1:hover{ background-color: aqua; }
布局+jQuery:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>计算器</title> <link href="计算器.css" rel="external nofollow" rel="stylesheet"> </head> <body> <div id=d1> <div id=d2>● ● ●</div> <div id=d3> <input type="text" id="t" style="border:1px bisque solid;width: 394px;height:48px;background-color:#FF6600;font-size: 25px;" /> </div> <div class=c1 value="AC">AC</div> <div class=c1 value="+/-">+/-</div> <div class=c1 value="%">%</div> <div class=c1 value="/">÷</div> <div class=c1 value="7">7</div> <div class=c1 value="8">8</div> <div class=c1 value="9">9</div> <div class=c1 value="*">×</div> <div class=c1 value="4">4</div> <div class=c1 value="5">5</div> <div class=c1 value="6">6</div> <div class=c1 value="-">-</div> <div class=c1 value="1">1</div> <div class=c1 value="2">2</div> <div class=c1 value="3">3</div> <div class=c1 value="+">+</div> <div class=c1 value="0">0</div> <div class=c1 value="保留">保留</div> <div class=c1 value=".">.</div> <div class=c1 onclick="answer()">=</div> <script src="../JQuery/jquery-3.4.1.js" ></script> <script> var store = ''; var bo1 = false; //是否 按了 = 的变量 $(".c1:lt(19)").click(function(){ var x1=$(this).attr("value"); get(x1); }); function get(x) { var a = $("*:text"); if(x == "保留") { bo1 = false; } else if(x == "AC") { a.val("0"); bo1 = true; } else if(x == "+/-") { a.val(0 - a.val()); } else { store = x; var v = a.val(); if(bo1 == true) { a.val(x); bo1 = false; } else { a.val(v + x); } } } function answer() { var a = $("*:text"); var x = a.val(); var y = eval(x); a.val(y); bo1 = true; } </script> </div> </body> </html>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
赞 (0)