jQuery实现简单计算器

2024-12-18 11:15:52

本文实例为大家分享了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++;
    })
});

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

jQuery实现的简单在线计算器功能

本文实例讲述了jQuery实现的简单在线计算器功能.分享给大家供大家参考,具体如下: 先来看看运行效果图: 完整代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/x
jQuery实现简单计算器功能

本文实例为大家分享了jQuery实现简单计算器的具体代码,供大家参考,具体内容如下要求: 代码: <html> <head> <meta charset="utf-8"> <title>我的计算器</title> <script src="jquery-1.9.1.min.js"> </script> <script>
jQuery实现可以计算进制转换的计算器

本文实例为大家分享了jQuery实现可以计算进制转换的计算器,供大家参考,具体内容如下在案例8的基础上增加了进制转换功能动画效果: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>计算器</title> <script src="../jquery.min.js">&l
基于HTML+CSS，jQuery编写的简易计算器后续（添加了键盘监听）

之前发布了一款简易的计算器,今天做了一下修改,添加了键盘监听事件,不用再用鼠标点点点啦 JS代码: var yunSuan = 0;// 运算符号,0-无运算;1-加法;2-减法;3-乘法;4-除法 var change = 0;// 属于运算符后需要清空上一数值 var num1 = 0;// 运算第一个数据 var num2 = 0;// 运算第二个数据 var cunChuValue = 0;// 存储的数值 $(function() { $(".number").click(f
jQuery实现计算器功能

本文实例为大家分享了jQuery实现计算器功能的具体代码,供大家参考,具体内容如下动画效果: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>计算器</title> <script src="../jquery.min.js"></script> <st
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: 宋体;
jQuery实现简易计算器功能

jQuery制作一个简易计算器,供大家参考,具体内容如下页面效果: 源码: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <meta charset="utf-8&quo
jquery实现计算器小功能

本文实例为大家分享了jquery实现计算器功能的具体代码,供大家参考,具体内容如下用jquery实现计算器对于我来说有三个难点 1.单纯的html页面,怎么实现计算2.显示屏用什么标签,又怎么把他显示出来3.要想实现删除,怎么把字符串最后一个字母删除解决 1.看了别人的计算器,我发现eval()可以实现这个目的eg: alert(eval(“3+5”));没错,会弹出 8.2.看了几个人的博客,都是用span元素节点当显示屏,通过jQuery的html()函数来实现把内容显示出来.3.有两个
一个简单的jQuery计算器实现了连续计算功能

一个简单的jQuery计算器,只是实现了一个连续计算的功能 <!DOCTYPE html> <html> <head> <meta charset="utf8"/> <title>Javascript计算器</title> </head> <body> <table> <tr> <td colspan="4"><input id=
jQuery实现简单计算器

本文实例为大家分享了jQuery实现简单计算器的具体代码,供大家参考,具体内容如下基本功能: 1.计算器换肤,目前有白色(默认色).绿色.蓝色.灰色.橙色几种颜色可供选择. 2.简单的加.减.乘.除.取余计算,注意由于时间有限,没有深入研究功能,每次运算后需点击清屏功能才能进行下一次正确的运算. 3.历史运算数据记录,此功能需要点击记录按钮后打开浏览器控制台查看. 4.退出功能,点击退出按钮,可实现计算器退出. 功能截图: 1.换肤(当前肤色为灰色).计算. 2.历史运算记录. 3.退出. 代
jQuery实现简单的回到顶部totop功能示例

本文实例讲述了jQuery实现简单的回到顶部totop功能.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>回到顶部</title> <style type="text/css"> body{ width: 100%; height: 10000px; } #totop{ wid
jquery实现简单文字提示效果

本文实例讲述了jquery实现简单文字提示效果.分享给大家供大家参考,具体如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>jquery实现简单文字提示</title> &l
jQuery实现简单漂亮的Nav导航菜单效果

本文实例讲述了jQuery实现简单漂亮的Nav导航菜单效果.分享给大家供大家参考,具体如下: 自己写的一个简单的导航菜单,先看效果: 鼠标悬浮时菜单项向上移动成蓝底白字,点击之后底部会有蓝条表示当前选中项. 页面代码,菜单的每一项都是一个 div ,其中包括一个 ul 用来放置显示文字等,另一个 div 则是底部的蓝条,需要给第一项和最后一项设置不同的 class ,样式需要用到: <div id="nav"> <div class="navItem ind
jquery实现简单的遮罩层

本文实例讲解了jquery遮罩层,包括遮罩层的不同样式实现.mask实现遮罩层等,分享给大家供大家参考,具体内容如下一.jQuery实现遮罩层的不同样式 1.1 背景半透明遮罩层样式需要一个黑色(当然也可以其他)背景,且须设置为绝对定位,以下是项目中用到的css样式: /* 半透明的遮罩层 */ #overlay { background: #000; filter: alpha(opacity=50); /* IE的透明度 */ opacity: 0.5; /* 透明度 */ displa
jQuery实现简单的网页换肤效果示例

本文实例讲述了jQuery实现简单的网页换肤效果.分享给大家供大家参考,具体如下: 这里有4个文件:skin.html.blue.css.green.html.red.html,都放在同一目录下. 1.skin.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&
Jquery实现简单的轮播效果(代码管用)

废话不多说了,直接给大家贴jquery代码了,具体代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="css/index.css"> <script
jquery实现简单的二级导航下拉菜单效果

本文实例讲述了jquery实现简单的二级导航下拉菜单效果.分享给大家供大家参考.具体如下: jQuery代码实现的二级导航菜单效果,非常简洁,喜欢简洁风格的朋友您可以下载哦.菜单最多支持两级,CSS的配合也是挺重要的,不多说了,要代码的就直接复制吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-2jxl-menu-codes/ 具体代码如下: <title>jquery二级导航菜单</title> <styl
jQuery实现简单日期格式化功能示例

本文实例讲述了jQuery实现简单日期格式化功能.分享给大家供大家参考,具体如下: 代码如下,引入jquery后直接后加入以下代码刷新可测试 Date.prototype.Format = function (fmt) { //author: meizz var o = { "M+": this.getMonth() + 1, //月份 "d+": this.getDate(), //日 "h+": this.getHours(), //小时 &

jQuery实现简单计算器

基本功能：

功能截图：

代码实现

相关推荐

随机推荐