jQuery實現(xiàn)簡易的計算器
更新時間:2022年07月21日 12:06:03 作者:Miguel_6
這篇文章主要為大家詳細介紹了jQuery實現(xiàn)簡易的計算器,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實例為大家分享了jQuery實現(xiàn)簡易的計算器的具體代碼,供大家參考,具體內(nèi)容如下
布局如下:
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>
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
一張表格告訴你windows.onload()與$(document).ready()的區(qū)別
這篇文章主要介紹了windows.onload()與$(document).ready()的區(qū)別2014-05-05jQuery實現(xiàn)按鈕點擊遮罩加載及處理完后恢復(fù)的效果
這篇文章主要介紹了jQuery實現(xiàn)按鈕點擊遮罩加載及處理完后恢復(fù)的效果,涉及jQuery與asp.net后臺交互實現(xiàn)頁面效果動態(tài)變換的相關(guān)技巧,需要的朋友可以參考下2016-06-06jquery input checked全選與反選1.3.2的版本
jquery 全選與反選1.3.2的版本2009-05-05