jQuery實現簡單計算器

本文實例為大傢分享瞭jQuery實現簡單計算器的具體代碼,供大傢參考,具體內容如下

基本功能:

1、計算器換膚,目前有白色(默認色)、綠色、藍色、灰色、橙色幾種顏色可供選擇。

2、簡單的加、減、乘、除、取餘計算,註意由於時間有限,沒有深入研究功能,每次運算後需點擊清屏功能才能進行下一次正確的運算。

3、歷史運算數據記錄,此功能需要點擊記錄按鈕後打開瀏覽器控制臺查看。

4、退出功能,點擊退出按鈕,可實現計算器退出。

功能截圖:

1、換膚(當前膚色為灰色)、計算。

2、歷史運算記錄。

3、退出。

代碼實現

1、HTML文件

註意:需要引用jQuery文件(自行從jQuery官網下載)和ex1.js文件(下方貼出代碼)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>簡單計算器實現</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">
    <!--內層上方-->
    <div class="top_top">
        <!--輸入1-->
        <h3 id="get_one"></h3>
        <!--符號項-->
        <h3 id="get_two"></h3>
    </div>
    <!--內層中間-->
    <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>
    <!--內層下方-->
    <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;
       }
   });
   //獲取當前元素內容
    $(".top_bottom div p").click(function () {
        var s = $(this).text();
        $("#get_one").append(s);
        content = $("#get_one").text();
        //console.log(content);  //測試數據
        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);  //測試運算符前的數字顯示
            //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("您確定要退出當前網頁計算器嗎?")){
            window.opener=null;
            window.open('','_self');
            window.close();
        }
        else{
            confirm("歡迎您繼續使用網頁計算器!");
        }
    });
    //記錄功能
    $(".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++;
    })
});

以上就是本文的全部內容,希望對大傢的學習有所幫助,也希望大傢多多支持WalkonNet。

推薦閱讀: