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)

相关推荐

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

    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实现可以计算进制转换的计算器,供大家参考,具体内容如下 在案例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实现简单计算器功能

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

  • 一个简单的jQuery计算器实现了连续计算功能

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

  • jQuery实现简单计算器

    jQuery实现简单计算器

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

  • jquery实现计算器小功能

    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 lang="en"> <head> <meta charset="UTF-8"> <title>计算器</title> <script src="../jquery.min.js"></script> <st

  • jQuery实现简易计算器功能

    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实现简易的计算器的具体代码,供大家参考,具体内容如下 布局如下: css代码 #d1{     width: 400px;     height: 500px;     /*background-color: #A9A9A9;*/     float: left;     margin: 20px 0px 0px 500px;     font-size: 30px;     font-weight: bold;     font-family: 宋体;     

  • php+mysql+jquery实现简易的检索自动补全提示功能

    php+mysql+jquery实现简易的检索自动补全提示功能

    本文实例讲述了php+mysql+jquery实现简易的检索自动补全提示功能.分享给大家供大家参考,具体如下: 这段时间看了一些关于自动补全提示方面的内容,发现大部分实现过程都十分复杂.心想这应该是一个比较简单的功能啊,于是自己亲自动手来小试一下.思路很常规,需要说明的是没有为提示内容绑定键盘事件,仅可用鼠标操作. html+jQuery内容: <html> <head> <style type="text/css"> #autoBox { marg

  • c#入门之实现简易存款利息计算器示例

    本想把练习题做了的结果放上来,不过发现附录是有答案的,就算了吧,自己做了没问题就行了哈.之前提到过,要是有朋友有想法,需要做小工具我可以帮忙实现,不过貌似大家都很忙.SO,自己学完第4章后,决定做一个工具:简易存款利息计算器,可以更好地复习前面学过的知识. 原理介绍为啥叫简易呢,因为现在只能计算整存整取(只有1.2.3.5四种年限哈)的利息,并且没有启用自动转存(俗称利滚利,就是把本年和上年的利息之和,作为下年利息计算时的本金)功能,方便和网上已有的工具对比计算结果,判断自己的程序算出来正不正确

  • jQuery实现简易的输入框字数计数功能示例

    jQuery实现简易的输入框字数计数功能示例

    本文实例讲述了jQuery实现简易的输入框字数计数功能.分享给大家供大家参考,具体如下: 运行效果图如下: 具体代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <script src="jquery-1.7.2.min.js"></scr

  • C#开发简易winform计算器程序

    临近年关,今日在学习的过程中感觉甚是无聊,便想用C#来开发一个简易的计算器程序,这里记录下今日下午的实现过程,同时也记录下自己的第一遍博客. 一.需求 首先我们先来决定我们的计算器要实现什么功能 功能需求:1.能够实现加.减.乘.除.求余等两个操作数的运算,以及开方.平方单个操作数的运算 2.能够清除错误的输入,能够实现清零操作 显示需求:能够显示操作数与运算内容,显示结果 二.设计界面 1.在明白我们的功能需求后,我们来设计界面,界面主要包括三个部分,用于显示的两个textBox,以及数字键B

  • 用c#实现简易的计算器功能实例代码

    用c#实现简易的计算器功能实例代码

    由于今天在网上搜了一下c#写的计算器,发现大多都太繁琐了,很多没必要并且不容易理解的东西就专门写了这个博客 1.首先新建一个windows窗体应用的项目.执行文件-新建-项目-windows窗体应用 2.在工具箱中拖出一个textbox用于输入和显示,再拖出21个button按钮用来当计算器的按键,在textbox下面还有一个lable控件(我把它属性改成了空格所以看不到了),改一下按钮的text属性 3.双击数字按钮进入代码界面(数字只用一个事件即可,运算符也是用一个事件,其他每个按钮都需要双

  • javascript实现简易的计算器

    利用javascript实现简易的计算器,供大家参考,具体内容如下 1.先构思整个计算器的模式以及想要实现的功能,按模块创建相应的div,在"head"中设置其样式和布局. 2.用"input"标签创建text类型,置为输出框:依次创建buttom类型,置为按钮,内容为1.2.3--:创建"=",并在input中对他进行点击事件"οnclick="result()"". 3.添加script,利用var定义

  • jQuery实现简易聊天框

    jQuery实现简易聊天框

    本文实例为大家分享了jQuery实现简易聊天框的具体代码,供大家参考,具体内容如下 效果: CSS代码: body{ margin: 0; } .kuan{ height:550px; width: 650px; background-color: #ccc; margin: 80px auto; } .header{ width: 100%; height: 35px; background-color: #00f; } .chatBody{ width: 100%; height: 70%;

  • jQuery实现简易QQ聊天框

    jQuery实现简易QQ聊天框

    本文实例为大家分享了jQuery实现简易QQ聊天框的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>例子1</title> <style type="text/css"> *{list-style: none;margin: 0;padd

  • Javascript实现简易天数计算器

    本文实例为大家分享了Javascript实现简易天数计算器的具体代码,供大家参考,具体内容如下 效果图: 功能: 1. 支持选择日期: 2. 自动计算闰年: 3. 支持使用当前日期. 代码: (1)html文件: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>简易天数计算器</title> <sc

随机推荐