jQuery實現(xiàn)簡單計算器
更新時間：2022年07月21日 11:18:04 作者：少年無為
這篇文章主要為大家詳細介紹了jQuery實現(xiàn)簡單計算器，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了jQuery實現(xiàn)簡單計算器的具體代碼，供大家參考，具體內(nèi)容如下
基本功能：
1、計算器換膚，目前有白色（默認色）、綠色、藍色、灰色、橙色幾種顏色可供選擇。
2、簡單的加、減、乘、除、取余計算，注意由于時間有限，沒有深入研究功能，每次運算后需點擊清屏功能才能進行下一次正確的運算。
3、歷史運算數(shù)據(jù)記錄，此功能需要點擊記錄按鈕后打開瀏覽器控制臺查看。
4、退出功能，點擊退出按鈕，可實現(xiàn)計算器退出。
功能截圖：
1、換膚（當前膚色為灰色）、計算。
2、歷史運算記錄。
3、退出。
代碼實現(xiàn)
1、HTML文件
注意：需要引用jQuery文件（自行從jQuery官網(wǎng)下載）和ex1.js文件（下方貼出代碼）
<!DOCTYPE html> <html lang="en"> <head> ? ? <meta charset="UTF-8"> ? ? <title>簡單計算器實現(xiàn)</title> ? ? <script src="js/jquery.js"></script> ? ? <link type="text/css" rel="stylesheet" href="css/ex1.css" /> ? ? <script src="js/ex1.js"></script> </head> <body> <!--最外層--> <div class="top"> ? ? <!--內(nèi)層上方--> ? ? <div class="top_top"> ? ? ? ? <!--輸入1--> ? ? ? ? <h3 id="get_one"></h3> ? ? ? ? <!--符號項--> ? ? ? ? <h3 id="get_two"></h3> ? ? </div> ? ? <!--內(nèi)層中間--> ? ? <div class="top_center"> ? ? ? ? <!--換膚--> ? ? ? ? <div class="btn"> ? ? ? ? ? ? <select class="Skin_change"> ? ? ? ? ? ? ? ? <option value="white">白色</option> ? ? ? ? ? ? ? ? <option value="green">綠色</option> ? ? ? ? ? ? ? ? <option value="blue">藍色</option> ? ? ? ? ? ? ? ? <option value="grey">灰色</option> ? ? ? ? ? ? ? ? <option value="orange">橙色</option> ? ? ? ? ? ? </select> ? ? ? ? </div> ? ? ? ? <!--清屏--> ? ? ? ? <div class="btn"> ? ? ? ? ? ? <p class=" btn_a">清屏</p> ? ? ? ? </div> ? ? ? ? <!--記錄--> ? ? ? ? <div class="btn"> ? ? ? ? ? ? <p class=" btn_b">記錄</p> ? ? ? ? </div> ? ? ? ? <!--退出--> ? ? ? ? <div class="btn"> ? ? ? ? ? ? <p class="btn_c">退出</p> ? ? ? ? </div> ? ? </div> ? ? <!--內(nèi)層下方--> ? ? <div class="top_bottom"> ? ? ? ? <!--1--> ? ? ? ? <div class="numb_1"> ? ? ? ? ? ? <p>1</p> ? ? ? ? </div> ? ? ? ? <!--2--> ? ? ? ? <div class="numb_1"> ? ? ? ? ? ? <p>2</p> ? ? ? ? </div> ? ? ? ? <!--3--> ? ? ? ? <div class="numb_1"> ? ? ? ? ? ? <p>3</p> ? ? ? ? </div> ? ? ? ? <!--+--> ? ? ? ? <div class="numb_1"> ? ? ? ? ? ? <p>+</p> ? ? ? ? </div> ? ? ? ? <!--4--> ? ? ? ? <div class="numb_2"> ? ? ? ? ? ? <p>4</p> ? ? ? ? </div> ? ? ? ? <!--5--> ? ? ? ? <div class="numb_2"> ? ? ? ? ? ? <p>5</p> ? ? ? ? </div> ? ? ? ? <!--6--> ? ? ? ? <div class="numb_2"> ? ? ? ? ? ? <p>6</p> ? ? ? ? </div> ? ? ? ? <!-----> ? ? ? ? <div class="numb_2"> ? ? ? ? ? ? <p>-</p> ? ? ? ? </div> ? ? ? ? <!--7--> ? ? ? ? <div class="numb_3"> ? ? ? ? ? ? <p>7</p> ? ? ? ? </div> ? ? ? ? <!--8--> ? ? ? ? <div class="numb_3"> ? ? ? ? ? ? <p>8</p> ? ? ? ? </div> ? ? ? ? <!--9--> ? ? ? ? <div class="numb_3"> ? ? ? ? ? ? <p>9</p> ? ? ? ? </div> ? ? ? ? <!--%--> ? ? ? ? <div class="numb_3"> ? ? ? ? ? ? <p>%</p> ? ? ? ? </div> ? ? ? ? <!--*--> ? ? ? ? <div class="numb_4"> ? ? ? ? ? ? <p>*</p> ? ? ? ? </div> ? ? ? ? <!--0--> ? ? ? ? <div class="numb_4"> ? ? ? ? ? ? <p>0</p> ? ? ? ? </div> ? ? ? ? <!--/--> ? ? ? ? <div class="numb_4"> ? ? ? ? ? ? <p>/</p> ? ? ? ? </div> ? ? ? ? <!--=--> ? ? ? ? <div class="numb_4"> ? ? ? ? ? ? <p>=</p> ? ? ? ? </div> ? ? </div> </div> </body> </html>
2、CSS文件
*{
? ? padding: 0;
}
.top{
? ? width:400px;
? ? height:480px;
? ? border: 1px solid black;
? ? margin-left: 525px;
? ? margin-top:20px;
}
.top_top{
? ? width:392px;
? ? height:65px;
? ? border: 1px solid black;
? ? margin: 5px auto;
}
.top_center{
? ? width:392px;
? ? height:45px;
? ? border:1px solid black;
? ? margin:5px auto;
}
.top_bottom{
? ? width:392px;
? ? height:344px;
? ? border:1px solid black;
? ? margin:5px auto;
}
.btn{
? ? width:86px;
? ? height:37px;
? ? border:1px solid black;
? ? margin:3px 5px;
? ? float: left;
}
.numb_1{
? ? width:70px;
? ? height:70px;
? ? border:1px solid black;
? ? margin:10px 13px;
? ? float:left;
}
.numb_2{
? ? width:70px;
? ? height:70px;
? ? border:1px solid black;
? ? margin:6px 13px;
? ? float:left;
}
.numb_3{
? ? width:70px;
? ? height:70px;
? ? border:1px solid black;
? ? margin:6px 13px;
? ? float:left;
}
.numb_4{
? ? width:70px;
? ? height:70px;
? ? border:1px solid black;
? ? margin:6px 13px;
? ? float:left;
}
.Skin_change{
? ? border: 0 solid black;
? ? width:82px;
? ? height:33px;
? ? margin: 2px 2px;
? ? font-size: larger;
}
.btn_a{
? ? margin:0;
? ? padding: 0;
? ? width:86px;
? ? height:37px;
? ? border: 0;
? ? font-size: larger;
? ? text-align: center;
? ? opacity: 0.8;
? ? display: block;
? ? line-height: 37px;
}
.btn_b{
? ? margin:0;
? ? padding: 0;
? ? width:86px;
? ? height:37px;
? ? border: 0;
? ? font-size: larger;
? ? text-align: center;
? ? opacity: 0.8;
? ? display: block;
? ? line-height: 37px;
}
.btn_c{
? ? margin:0;
? ? padding: 0;
? ? width:86px;
? ? height:37px;
? ? border: 0;
? ? font-size: larger;
? ? text-align: center;
? ? opacity: 0.8;
? ? display: block;
? ? line-height: 37px;
}
.top_bottom p{
? ? margin: 0;
? ? width:70px;
? ? height:70px;
? ? font-size: 160%;
? ? text-align: center;
? ? opacity: 0.7;
? ? display: block;
? ? line-height: 70px;
}
p:hover{
? ? cursor: pointer;
? ? background-color:#CECBCB;
}
h3{
? ? float: left;
? ? line-height:39px;
? ? font-weight: normal;
}
#get_one{
? ? margin:12px 0 0 5px;
? ? width:240px;
? ? border:0 solid black;
? ? height:39px;
}
#get_two{
? ? margin:12px 0 0 5px;
? ? width:130px;
? ? border:0 solid black;
? ? height:39px;
}3、JS腳本文件
$(document).ready(function (){
? ? var qian,zhong,hou,count,result,content,num=1;
? ?// 換膚功能
? ?$(".Skin_change").change(function () {
? ? ? ?var change=$(this).val();
? ? ? ?switch (change){
? ? ? ? ? ?case "white":
? ? ? ? ? ? ? ?$(".top,.Skin_change").css("background-color","white");break;
? ? ? ? ? ?case "green":
? ? ? ? ? ? ? ?$(".top,.Skin_change").css("background-color","#429B47");break;
? ? ? ? ? ?case "blue":
? ? ? ? ? ? ? ?$(".top,.Skin_change").css("background-color","#0083B9");break;
? ? ? ? ? ?case "grey":
? ? ? ? ? ? ? ?$(".top,.Skin_change").css("background-color","#E6E6E6");break;
? ? ? ? ? ?case "orange":
? ? ? ? ? ? ? ?$(".top,.Skin_change").css("background-color","#EAD714");break;
? ? ? ? ? ?default:break;
? ? ? ?}
? ?});
? ?//獲取當前元素內(nèi)容
? ? $(".top_bottom div p").click(function () {
? ? ? ? var s = $(this).text();
? ? ? ? $("#get_one").append(s);
? ? ? ? content = $("#get_one").text();
? ? ? ? //console.log(content); ?//測試數(shù)據(jù)
? ? ? ? if((s=="+")||(s=="-")||(s=="*")||(s=="/")||(s=="%")){
? ? ? ? ? ? var f = content;
? ? ? ? ? ? count=f.length;
? ? ? ? ? ? qian=Number(f.substring(0,f.length-1)); //前半部分
? ? ? ? ? ? zhong=f.substring(f.length-1,f.length);
? ? ? ? ? ? //console.log("前:"+qian); ?//測試運算符前的數(shù)字顯示
? ? ? ? ? ? //console.log("中:"+zhong); ?//測試運算符是否正常顯示
? ? ? ? }
? ? ? ? if(s=="="){
? ? ? ? ? ? var g = content;
? ? ? ? ? ? hou = Number(g.substring(count,g.length-1));
? ? ? ? ? ? //console.log("后:"+hou); ? //測試運算符后面的代碼
? ? ? ? ? ? switch(zhong){
? ? ? ? ? ? ? ? case "+":result=qian+hou;break;
? ? ? ? ? ? ? ? case "-":result=qian-hou;break;
? ? ? ? ? ? ? ? case "*":result=qian*hou;break;
? ? ? ? ? ? ? ? case "/":result=String(qian/hou).substring(0,10);break;
? ? ? ? ? ? ? ? case "%":result=String(qian%hou).substring(0,10);break;
? ? ? ? ? ? }
? ? ? ? ? ? $("#get_two").append(result);
? ? ? ? }
? ? });
? ? //清屏功能
? ? $(".btn_a").click(function () {
? ? ? ? $("#get_one,#get_two").empty();
? ? });
? ? //退出功能
? ? $(".btn_c").click(function () {
? ? ? ? if(confirm("您確定要退出當前網(wǎng)頁計算器嗎？")){
? ? ? ? ? ? window.opener=null;
? ? ? ? ? ? window.open('','_self');
? ? ? ? ? ? window.close();
? ? ? ? }
? ? ? ? else{
? ? ? ? ? ? confirm("歡迎您繼續(xù)使用網(wǎng)頁計算器!");
? ? ? ? }
? ? });
? ? //記錄功能
? ? $(".btn_b").click(function () {
? ? ? ? alert("請按F12或打開控制臺查看！");
? ? ? ? var text1 = $("#get_one").text();
? ? ? ? var text2 = $("#get_two").text();
? ? ? ? console.log("第"+num+"次歷史運算記錄:"+text1+text2);
? ? ? ? console.log("時間:"+Date());
? ? ? ? num++;
? ? })
});以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了Jquery實現(xiàn)自定義tooltip的方法,需要的朋友可以參考下2014-02-02
詳解jQuery同步Ajax帶來的UI線程阻塞問題及解決辦法
本篇文章主要介紹了jQuery同步Ajax帶來的UI線程阻塞問題及解決辦法，具有一定的參考價值，有興趣的可以了解一下2017-08-08
這篇文章主要為大家詳細介紹了jquery submit()不能提交表單的解決方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-04-04
JQuery中阻止事件冒泡方式有哪些？本文為大家準備了兩種阻止事件冒泡的方式，兩種方式的區(qū)別在于。return false 不僅阻止了事件往上冒泡，而且阻止了事件本身2014-01-01
JQuery基于FormData異步提交數(shù)據(jù)文件
這篇文章主要介紹了JQuery基于FormData異步提交數(shù)據(jù)文件,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-09-09
有時候，我們需要進一步轉化為json表達式，參考Ext中的Ext.urlDecode函數(shù)，我們可以實現(xiàn)一個相應的jquery中使用的函數(shù)。2009-11-11
內(nèi)容滑動切換效果jquery.hwSlide.js插件封裝
這篇文章主要為大家詳細介紹了jQuery開發(fā)之內(nèi)容滑動切換效果的相關資料，jquery.hwSlide.js插件進行封裝具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-07-07
海量的jQuery插件帖，很經(jīng)典，不知道什么時候開始流傳，很早以前就收藏過，為了工作方便還是發(fā)了一份放在日志里面。2010-02-02
jQuery總體架構的理解,學習jquery的朋友可以參考下。2011-03-03
JQEasy-ui在IE9以下版本中二次加載的問題分析及處理方法
之前項目中才用了Easy-ui，但是在同時使用tree和grid的效果時，因為頁面有倆個URL,分別為Ajax樹去后臺取數(shù)據(jù)和Grid取數(shù)據(jù)，在IE9以上以及其他瀏覽器里都沒有問題，在Ie低版本時會出現(xiàn)先加載表格，然后一閃而過加載樹渲染頁面，造成頁面只有tree數(shù)據(jù)而沒有表格grid數(shù)據(jù)。2014-06-06