Java(随笔)——利用HTML,CSS,JavaScript,JQuery编写的简易计算器

一.利用刚学过的前端知识做一个简易的计算器
里边使用到了HTML,CSS,JavaScript以及JQuery的知识代码如下:
(1)利用CSS设计了计算器外形样式;
(2)利用JavaScript实现了建议计算器的功能;
代码:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>简易计算器</title>
        <link rel="stylesheet" href="css/counter.css" />
        <script type="text/javascript" src="js/counter.js" ></script>
        <style>
            #mian{
                width: 100%;
                height:660px;
                background-image: url(img/1TX761XVUM10.jpg);
                background-size: 100%  100%;
                background-repeat: no-repeat;
            }
            /*提示框设计*/
            #tishikuang{
                width:90px;
                height: 520px;
                margin-left: 30px;
                margin: 30px;
                border: 2px red solid;
                float: left;
                background: yellowgreen;
                font-family: 微软雅黑;
                font-size: 15px;
                color: red;
                display: block;
            }
            p{
                font-size: 16px;
                color: black;
            }
            /*外部背景*/
            #wai{
                width: 1000px;
                height: 580px;
                border: 15px black solid;
                margin-left:120px;
                background-image: url(img/QQ图片20180315182956.jpg);
                background-size: 100%  100%;
                background-repeat: no-repeat;
                box-shadow: 4px 4px rgb(40,40,40);
                float: left;
            }
            /*手机外观边框*/
            #jisuanqi{
                width: 300px;
                height: 540px;
                border: 1.5px #E1A79C solid;
                margin-top: 30px;
                margin-left: 300px;
                float: left;
                display: none;
                border-radius:20px ;
                background: white;
                box-shadow: 2.5px 2.5px #E1A79C;
            }
            /*设置启动手机按钮外框*/
            #tubiao{
                width: 50px;
                height: 50px;
                border: 0px black solid;
                float: left;
                margin-left: 112px;
                margin-top: 78px;
            }
            /*设置启动手机软件图标属性*/
            #tupian{
                width: 30px;
                height: 29px;
                border: 0px black solid;
                margin-left: 10px;
                background-image: url(img/timg.jpg);
                background-size: 100% 100%;
                background-repeat: no-repeat;
            }
            /*设置启动手机软件图标下文字属性*/
            #wenzi{
                width: 50px;
                height: 19px;
                border: 0px black solid;
                font-size: 10px;
                color: #DCDCDC;
                text-align: center;
                line-height: 19px;
            }
            /*设置手机内边框属性*/
            #pinbian{
                width: 269px;
                height: 450px;
                border: 0.5px black solid;
                margin-left: 15px;
                margin-top: 35px;
                background-color: rgb(38,38,38);
            }
            /*手机喇叭设计*/
            #laba{
                width: 60px;
                height: 5px;
                border: 1.5px gray solid;
                border-radius: 15px;
                margin-top: 13px;
                margin-left: 10px;
                background: gray;
                float: left;
            }
            /*设计手机喇叭摄像头*/
            #shexiang{
                width: 7px;
                height: 7px;
                border: 1.5px gray solid;
                border-radius: 7px;
                background:gray;
                margin-left: 104px;
                margin-top: 13px;
                float: left;
            }
            /*手机菜单按钮外框设计*/
            #caidan{
                width: 30px;
                height: 30px;
                border: 1px gray solid;
                border-radius: 30px;
                background:#FFEFD5;
                margin-top: 10px;
                margin-left: 135px;
            }
            /*手机菜单按钮内框设计*/
            #caidannei{
                width: 15px;
                height: 15px;
                border: 1px gray solid;
                border-radius: 15px;
                background: #FFEFD5;
                margin-top: 6.2px;
                margin-left: 6.2px;
            }
            /*时间显示栏设计*/
            #shijian{
                width: 271px;
                height: 18px;
                border: 0px black solid;
                background-color: rgb(33,33,33);
                background-size: 101% 100%;
                background-repeat: no-repeat;
                font-size: 12px;
                color: white;
                text-align: center;
                line-height: 18px;
                display: none;  /*为了锁屏显示*/
            }
            /*手机桌面设计*/
            #zhuomian{
                width: 269px;
                height: 430px;
                border: 1px rgb(33,33,33) solid;
                background-image: url(img/QQ图片20180315215937_万能看图王.png);
                background-size: 101% 100%;
                background-repeat: no-repeat;
                display: none;  /*为了锁屏显示*/
            }
            /*设置手机计算器软件图标属性*/
            #jipian{
                width: 25px;
                height: 22px;
                border: 0px black solid;
                margin-left: 10px;
                border-radius: 15px;
                background-image: url(img/timg.jpg);
                background-size: 100% 100%;
                background-repeat: no-repeat;
                margin-left: 220px;
                margin-top: 152px;
            }
            /*设置手机计算器软件图标下文字属性*/
            #jizi{
                width: 50px;
                height: 19px;
                border: 0px black solid;
                font-size: 8px;
                color: #FF7F50;
                text-align: center;
                line-height: 19px;
                margin-left: 210px;
                margin-top: 4px;
            }
            #jizhuomian{
                width: 269px;
                height: 430px;
                border: 0px black solid;
                background: red;
                margin-left: -1px;
                display: none;
            }
            input{
                border-style:none ;
                height: 45px;
                font-size: 20px;
                color: black;
                background: grey;
            }
            #show_number1{
                width: 119px;
                float: left;
            }
            #show_yusuanfu{
                width: 25px;
                float: left;
                text-align: center;
                line-height: 25px;
            }
            #show_number2{
                width: 119px;
                float: left;
                text-align: end;
            }
            #show_denghao{
                width: 25px;
                float: left;
                text-align: center;
                line-height: 25px;
            }
            #show_jieguo{
                width: 240px;
                float: left;
                text-align: end;
            }
            #jiwai{
                width: 269px;
                height: 384px;
                border: 0px gray solid;
                font-size: 22px;
                background: #D3D3D3;
            }
            .qinqchu{
                display: none;
            }
            #denghao{
                width: 105px;
                height: 45px;
                border: 0px black solid;
                border-radius: 45px;
                font-size: 18px;
                background: #6B8E23;
                float: left;
                margin-left: 20px;
                margin-top: 18px;
                text-align: center;
                line-height: 45px;
                box-shadow: 2px 2px grey;
            }
            #jiwai>div{
                width: 46px;
                height: 45px;
                border: 0px black solid;
                border-radius: 45px;
                font-size: 18px;
                background: #D3D3D3;
                float: left;
                margin-left: 16px;
                margin-top: 18px;
                text-align: center;
                line-height: 45px;
                box-shadow: 2px 2px grey;
            }
            #jiwai>div:active{
                background: #9370D8;
            }
            #denghao:active{
                background: #FF4500;
            }
            /*#xiakaung{
                width:300px;
                height: 55px;
                margin-left: 550px;
                border: 1px rgb(40,40,40) solid;
                background: black;
                box-shadow: 3px 3px rgb(45,45,45);
            }*/
        </style>
        <script src="js/jquery-1.10.1.js"></script>
    </head>
    <body>
        <!--背景桌面-->
        <div id="mian">
            <div id="tishikuang">
                使用时请单击电脑界面的网络手机按钮,弹出手机界面(再次单机会关闭网络手机界面),
                单机网络手机主菜单按钮(下方圆键),解除手机锁屏(再次单机会继续锁屏),单机手机界面计算器按钮,打开计算器,
                进行四则运算 点击提示框可以隐藏提示框.
                <p>作者:齐涛</p>
            </div>
            <!--外层布局-->
            <div id="wai">
                <!--设计点击开启手机-->
                <div id="tubiao">
                    <div id="tupian"></div>
                    <div id="wenzi">网络手机</div>
                </div>
                <!--计算器外框,以手机形式展示-->
                <div id="jisuanqi">
                    <!--手机前摄像头设计-->
                    <div id="shexiang"></div>
                    <!--手机喇叭设计-->
                    <div id="laba"></div>
                    <!--手机屏幕边框设计-->
                    <div id="pinbian">
                        <!--手机间框设计-->
                        <div id="shijian">时间显示</div>
                        <div style="clear: both;">
                            <!--以上浮动清除-->
                        </div>
                        <!--手机桌面背景-->
                        <div id="zhuomian">
                            <!--设置手机计算器背景-->
                                <div id="jizhuomian">
                                    <input type="text" value="0" id="show_number1" disabled="disabled"/>
                                    <input type="text" value="" id="show_yusuanfu" disabled="disabled"/>
                                    <input type="text" value="0" id="show_number2" disabled="disabled"/>
                                    <div style="clear: both;">
                                        <!--以上浮动清除-->
                                    </div>
                                     <input type="text" value="=" id="show_denghao" disabled="disabled"/>
                                    <input type="text" value="" id="show_jieguo" disabled="disabled"/>
                                    <div id="jiwai">
                                        <div id="clean">C</div>
                                        <div id="del">退格</div>
                                        <div>%</div>
                                        <div class="yunsuanfu">/</div>
                                        <div class="qinqchu" style="clear: both;">
                                            <!--以上浮动清除-->
                                        </div>
                                        <div class="number">7</div>
                                        <div class="number">8</div>
                                        <div class="number">9</div>
                                        <div class="yunsuanfu">*</div>
                                        <div class="qinqchu" style="clear: both;">
                                            <!--以上浮动清除-->
                                        </div>
                                        <div class="number">4</div>
                                        <div class="number">5</div>
                                        <div class="number">6</div>
                                        <div class="yunsuanfu">-</div>
                                        <div class="qinqchu" style="clear: both;">
                                            <!--以上浮动清除-->
                                        </div>
                                        <div class="number">1</div>
                                        <div class="number">2</div>
                                        <div class="number">3</div>
                                        <div class="yunsuanfu">+</div>
                                        <div class="qinqchu" style="clear: both;">
                                            <!--以上浮动清除-->
                                        </div>
                                        <div class="number">0</div>
                                        <div class="number">.</div>
                                        <span id="denghao">=</span>
                                    </div>
                                </div>
                                <!--设置手机计算器软件按钮背景-->
                                <div id="jipian"></div>
                                <div id="jizi">计算器</div>
                        </div>
                    </div>
                    <!--菜单按钮外框设计-->
                    <div id="caidan">
                    <!--菜单按钮内框设计-->
                        <div id="caidannei"></div>
                    </div>
                </div>
            </div>
            <div class="qinqchu" style="clear: both;">
                <!--以上浮动清除-->
            </div>
        <!--    电脑下框设计
            <div id="xiakaung"></div>-->
        </div>

    </body>
    <!--手机与手机计算器逻辑-->
    <script>
        /*//1.设置点击事件,点击软件图标,弹出手机
        var tubaio=document.getElementById("tubiao");//获取启动手机按钮图标对象
        var jisuanqi=document.getElementById("jisuanqi");//获取手机界面对象
        tubaio.onclick=function(){
            jisuanqi.style.cssText="display: block";//解除手机桌面隐藏
        }*/

        //1.(01)(JQuery编写打开关闭手机计算器框设置)
        $("#tubiao").click(function(){
            if ($("#jisuanqi").css("display")=="none"){
                $("#jisuanqi").show();
            } else{
                $("#jisuanqi").hide();
            }
        });

        //2.设置时间显示,自动更新时间
        function show_time() {
            //获取时间栏内容
            var shijian=document.getElementById("shijian");
            //获取当前时间
            var dateTime=new Date().toLocaleString();
            //用当前时间替换div内容
            shijian.innerHTML=dateTime;
        }
        show_time();//先手动调show_time方法
        window.setInterval("show_time()",1000);//编写定时器,每1000ms调用一次show_time方法

        //3.设置手机计算器点击事件,击软件图标,弹出计算器
        var jipian=document.getElementById("jipian");//获取手机启动计算器按钮图标id
        var jizhuomian=document.getElementById("jizhuomian");//获取计算器桌面id
        jipian.onclick=function(){
            jizhuomian.style.cssText="display: block";//解除计算器界面隐藏
        }
        //

        //4.锁屏解除操作,点击主菜单按钮,显示手机桌面(原生javascript代码编写)
    /*  var caidan=document.getElementById("caidan");//获取手机主菜单启动按钮图标id
        var shijian=document.getElementById("shijian");//获取手机时间栏id
        var zhuomian=document.getElementById("zhuomian");//获取手机桌面id
        caidan.onclick=function(){
            shijian.style.cssText="display: block";//解除手机时间栏隐藏
            zhuomian.style.cssText="display: block";//解除手机桌面栏隐藏
        }*/

        //5.锁屏操作(利用JQuery写方代码)
        //点击手机主菜单按钮:
        //(1)当display属性值为none时,调用show()方法 展示手机桌面(解除锁屏)
        //(2)当display属性值为block时,调用hide()方法隐藏手机桌面(启动锁屏)
        $("#caidan").click(function(){
            if ($("#shijian").css("display")=="none"){
                $("#shijian").show();
                $("#zhuomian").show();
            } else{
                $("#shijian").hide();
                $("#zhuomian").hide();
            }
        });
        //6.设置隐藏提示框(点击提示框,提示框消失)
        $("#tishikuang").click(function(){
            if ($("#tishikuang").css("display")=="block"){
                $("#tishikuang").hide();
            }
        });

        //7.计算器计算逻辑
        //(1)定义三个变量 用来保存,用户输入的 第一个数字,第二个数字,和运算符
        var numValue1 = "";
        var numValue2 = "";
        var czf = "";
        var show_number1 = document.getElementById("show_number1");
        var show_number2 = document.getElementById("show_number2");
        var show_yunsuuan = document.getElementById("show_yusuanfu");
        var show_jieguo = document.getElementById("show_jieguo");
        var clean = document.getElementById("clean");
        var del = document.getElementById("del");
        var denghao = document.getElementById("denghao");
        //(2)获取所有的数字键
        var numbers = document.getElementsByClassName("number");
        for(var i = 0; i < numbers.length; i++) {
                numbers[i].onclick = function() {
                    //计算器处理小数点的问题
                    if(this.innerHTML == ".") {
                        //判断这个numValue1 里面有没有点,并且点不能出现在首位
                        if(numValue1.indexOf(".") == -1 && numValue1.length >= 1) {
                            //我们点击了数字显示到文本框中
                            numValue1 += this.innerHTML;
                            //展示一下
                            show_number1.value = numValue1;
                        }

                    } else {
                        //我们点击了数字显示到文本框中
                        numValue1 += this.innerHTML;
                        //展示一下输入数字到文本框中
                        show_number1.value = numValue1 * 1;//去除首尾的无效0
                    }

                }

            }
            //(3)给所有的操作符号 设置点击事件
            var opers = document.getElementsByClassName("yunsuanfu");
            for(var i = 0; i < opers.length; i++) {

                opers[i].onclick = function() {
                    //在这里处理四则
                    if(numValue2 == "") {
                        //当你点击了操作符之后,我们把numValue1,给numValue2来保存
                        //把numValue1清空掉 然后让他去接收第二个数字
                        numValue2 = numValue1;
                        numValue1 = "";

                        //保存操作符
                        czf = this.innerHTML;
                        show_yunsuuan.value = czf;//去除首尾的无效0
                        show_number2.value=numValue1;
                    } else {
                        //处理四则运算的逻辑:把前两次个数的运算结果算出来,再赋值给numValue2
                        //然后把numValue1 清空,准备接收下一个数字
                        funResult();
                        //保存操作符
                        czf = this.innerHTML;
                        show_yunsuuan.value = czf;//去除首尾的无效0
                        show_number2.value=numValue1;
                    }

                }

            }
            //(4)处理清空键的逻辑
            clean.onclick = function() {
                //把所有的设置归置为初始状态
                numValue1 = "";
                numValue2 = "";
                czf = "";
                show_number1.value = "0";
                show_number2.value = "0";
                show_yunsuuan.value = "";
                show_jieguo.value="";
            }
            //(5)处理退格键
            del.onclick = function() {
                if(numValue1.length > 1) {
                    numValue1 = numValue1.substring(0, numValue1.length - 1);
                    show_number2.value = numValue1;
                    show_number1.value = numValue2;

                } else if(numValue1.length == 1) {

                    numValue1 = "";
                    numValue2 = "";
                    czf = "";
                    show_number1.value = "0";
                    show_number2.value = "0";
                    show_yunsuuan.value = "";
                    show_jieguo.value="";

                }

            }
            //(6)处理等号逻辑
            denghao.onclick = function() {
                funResult();
            }

            function funResult() {
                if(numValue1 != "") {
                    var one = Number(numValue2);
                    var two = Number(numValue1);
                    var jg = "0";
                    switch(czf) {
                        case "+":
                            jg = one + two;
                            break;
                        case "-":
                            jg = one - two;
                            break;
                        case "*":
                            jg = one * two;
                            break;
                        case "/": //处理除数为0
                            if(two == 0) {
                                alert("除数不能为0");
                                numValue1 = "";
                                numValue2 = "";
                                czf = "";
                                show_number.value = "0";

                            } else {

                                jg = one / two;
                            }

                            break;
                    }
                    var n = new Number(jg);
                    var finalR = n.toFixed(4);
                    numValue2 = finalR; //把结果再赋值给numValue2
                    numValue1 = ""; //清空numValue1
                    //去掉首尾无效的0 给值*1 即可
                    show_jieguo.value =numValue2 * 1;
                }

            }
    </script>
</html>

运行结果展示:


点击左边的提示框:


点击屏幕上的网络手机图标:


点击手机圆形主菜单按钮:

点击手机上的计算器按钮:

例输入23+45求和:


点击清空:

再例如(2+3)*5:

小数点运算23.4*45.6:


输入788:

点击退格:

点击主菜单键关机

点击网络手机关闭计算器:

            【简易计算器制作完毕】

原文地址:http://blog.51cto.com/13501268/2133062

时间: 06-26

Java(随笔)——利用HTML,CSS,JavaScript,JQuery编写的简易计算器的相关文章

使用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

c语言:编写一个简易计算器,打印菜单界面,实现加减乘除运算,可以退出菜单界面

.编写一个简易计算器 程序: #include<stdio.h> enum  OP { EXIT,//0 ADD,//1 SUB,//2 MUL,//3 DIV//4 }; void menu()//menu表示菜单 { printf("**** 1.add  ****\n"); printf("**** 2.sub  ****\n"); printf("**** 3.mul  ****\n"); printf("**** 

Java -- JDBC_利用反射及 JDBC 元数据编写通用的查询方法

先利用 SQL 进行查询,得到结果集: 利用反射创建实体类的对象:创建对象: 获取结果集的列的别名: 再获取结果集的每一列的值, 结合 3 得到一个 Map,键:列的别名,值:列的值: 再利用反射为 2 的对应的属性赋值:属性即为 Map 的键,值即为 Map 的值. 使用 JDBC 驱动程序处理元数据 Java 通过JDBC获得连接以后,得到一个Connection 对象,可以从这个对象获得有关数据库管理系统的各种信息,包括数据库中的各个表,表中的各个列,数据类型,触发器,存储过程等各方面的信

Java Web开发——HTML CSS JavaScript 杂记

HTML是一种在互联网上常见的网页制作标注性语言,并不能算作一种程序设计语言.因为它相对程序设计语言来说缺少了其应所有的特征.对于网站设计人员来说,只使用HTML是不够的,需要在页面中引入CSS样式.HTML与CSS的关系是"内容"与"形势"的关系,由HTML来确定网页的内容,CSS来实现页面的表现形式. CSS规则在CSS样式表中包括3部分内容:选择符.属性和属性值.选择符{属性:属性值}选择符:又称选择器,是CSS中很重要的该鸟,所有HTML语言中的标记都是通过

分别用CSS\JavaScript\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/xhtml"> <head> <meta http-equiv="Content-

selenium使用Xpath+CSS+JavaScript+jQuery的定位方法(治疗selenium各种定位不到,点击不了的并发症)

[第一部分]开篇:先认识Xpath的4种定位方法 跟你说,你总是靠那个firebug,chrome的F12啥的右击复制xpath绝对总有一天踩着地雷炸的你死活定位不到,这个时候就需要自己学会动手写xpath,人脑总比电脑聪明,开始把xpath语法给我学起来! 第1种方法:通过绝对路径做定位(相信大家不会使用这种方式) By.xpath("html/body/div/form/input") By.xpath("//input") 第2种方法:通过元素索引定位 By.

让你的eclipse实现写JAVA代码,HTML,CSS,JAVASCRIPT代码提示

1.打开eclipse→Windows→Preferences→Java→Editor→Content Assist 改动Auto Activation triggers for java的值为:zjava 点击applybutton 如图: 2.继续打开JavaScript→Editor→Content Assist 改动Auto Activation triggers for javaScript的值为:zjs 点击applybutton 如图: 3.继续打开web→html Files→E

《java小应用程序(Applet)和java应用程序(Application)分别编写的简单计算器》

Application和Java Applet的区别.Java语言是一种半编译半解释的语言.Java的用户程序分为两类:Java Application和Java Applet.这两类程序在组成结构和执行机制上都有一定的差异,主要体现在以下几方面:(1)运行方式不同.Java Application是完整的程序,可以独立运行:Java Applet程序不能单独运行, 它必须嵌入到用HTML语言编写的Web页面中,通过与Java兼容的浏览器来控制执行.(2)运行工具不同.Java Applicat

JavaScript 编写的简易计算器

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  <title>javascript 简单计算器</title> <script> //定义全局变量 var one="1"; var two="2&quo