网页版的计算器，支持键盘输入，支持删除，按键发亮

最新推荐文章于 2021-06-09 23:08:50 发布
最新推荐文章于 2021-06-09 23:08:50 发布
阅读量1.8k 收藏 2
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010973529/article/details/47320799
版权
<!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 content="text/html; charset=utf-8"/>
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>

<title>网页计算器</title>

<!-- 作者：dang221
    日期：2015年8月6日
    联系方式：（邮箱）dangrenning@163.com
-->

<style id="jsbin-css">

body{

    text-align:center;
}
#caculator{
    width:325px;
    margin:50px auto;<!--居中对齐 -->
    background-color:#9AD1EA;
}
.print{
     width:301px;
    background:#999;
    text-align:right;
    margin:0 5px 10px 8px;
    box-shadow:inset 0 4px 5px #333;
    min-height:40px;
    word-wrap:break-word;
    word-break:break-all;
    height:auto;
}

.add{
    height :90px;
    float:right;
    margin-right:13px;
    line-height:90px;
}
#zero{
    width:146px;
}

span{
    width:66px;
    height:40px;
    background:#eee;
    margin:0 5px 10px 8px;
    text-align:center;
    line-height:40px;
    float:left;
    box-shadow:0 5px 1px #999;
    cursor:pointer;
    border-radius:3px;
}

span:hover{
    background:#87cefa;
    box-shadow:0 5px 1px #1e90ff;
    color:#fff;
}
.hover{
    background:#87cefa;
    box-shadow:0 5px 1px #1e90ff;
    color:#fff;
}
.bottomText{
    text-align:left;
}


</style>
</head>
    <body>
        <div id="caculator">
            <span class="print"></span>
            <span class="clear">C</span> <span class="fn" id="chu">/</span> <span class="fn" id="cheng">*</span> <span class="fn" id="jian">-</span>
            <span class="number">7</span><span class="number">8</span><span class="number">9</span><span class="fn add" id="jia">+</span>
            <span class="number">4</span><span class="number">5</span><span class="number">6</span>
            <span class="number">1</span><span class="number">2</span><span class="number">3</span><span class="add" id="confirm">确定</span>
            <span class="number" id="zero">0</span><span class="number" id="point">.</span>
            <div class="bottomText">此计算器支持使用键盘输入数字以及计算符号、支持backspace删除输入的最后一个字符、回车键清除所有输入</div>
        </div>
        
        
    </body>
    
<script>
var lastIsFn = true;//标记，用来标记最后一个字符是否是运算符，如果是运算符则不允许往后面直接添加运算符
$(document).ready(function(){    
    //号码的点击
    $(".number").click(function(){
        var content = $(".print").html();
        if($(this).attr("id") == "point"){//点号
            if(content.indexOf(".") >= 0){
                return ;
            }
            printCaculate(".",true);
            lastIsFn = true;
            return ;
        }
        $(".print").html(content+$(this).html());
        lastIsFn = false;
    });
    
    $(".fn").click(function(){//运算符的点击
        var content = $(".print").html();
        if(lastIsFn){//上一个是符号
            return ;
        }
        printCaculate($(this).html(),true);
        lastIsFn = true;
    });
    
    $("#confirm").click(function(){//等号的点击
        var content = $(".print").html();
        printCaculate(eval(content),false);
    });
    
    $(".clear").click(function(){
        $(".print").html("");
    });
    
    //添加内容，参数;1.需要添加的内容2.是否在原内容后添加
    function printCaculate(content,isAddToEnd){
        var oldcontent = $(".print").html();
        if(isAddToEnd){
            $(".print").html(oldcontent+content);
        }else{
            $(".print").html(content);
        }
    }
});

//键盘监听
    $(window).keydown(function(event){
        var number = event.keyCode - 48;
        if(0 <= number <= 9){
            $(".number:contains('"+number+"')").trigger("click");
            lightTheKey($(".number:contains('"+number+"')"));
        }
        number =  event.keyCode - 96;
        if(0 <= number <= 9){
            $(".number:contains('"+number+"')").trigger("click");
            lightTheKey($(".number:contains('"+number+"')"));
        }
      switch(event.keyCode) {
        case 32:{
            $(".clear").trigger("click");
            lightTheKey($(".clear"));
            break;
        }
        case 61:{
            if(event.shiftKey){
                $("#jia").trigger("click");
                lightTheKey($("#jia"));
                break;
            }else{
                $("#jian").trigger("click");
                lightTheKey($("#jian"));
                break;
            }
        }
        case 53:{
            if(event.shiftKey){
                $("#chu").trigger("click");
                lightTheKey($("#chu"));
            }
            break;
        }
        case 173:{
            $("#jian").trigger("click");
            lightTheKey($("#jian"));
            break;
        }
        case 56:{
            if(event.shiftKey){
                $("#cheng").trigger("click");
                lightTheKey($("#cheng"));
            }
            break;
        }
        case 106 :{
            $("#cheng").trigger("click");
            lightTheKey($("#cheng"));
            break;
        }
        case 107 :{
            $("#jia").trigger("click");
            lightTheKey($("#jia"));
            break;
        }
        case 13 :{
            $("#confirm").trigger("click");
            lightTheKey($("#confirm"));
            break;
        }
        case 109 :{
            $("#jian").trigger("click");
            lightTheKey($("#jian"));
            break;
        }
        case 110 :{
            $(".number:contains('.')").trigger("click");
            lightTheKey($(".number:contains('.')"));
            break;
        }
        case 111 :{
            $("#chu").trigger("click");
            lightTheKey($("#chu"));
            break;
        }
        case 8 :{
            deleteLast();
            break;
        }
      }
    });
    
    //删除最后一个字符
    function deleteLast(){
        var content = $(".print").html();
        var last = content.charAt(content.length-1);
        if(last =="+" ||
            last =="-" ||
            last =="*" ||
            last =="/" ||
            last =="."
        ){
            lastIsFn = false;
        }
        $(".print").html(content.substr(0,content.length-1));
    }
    //按下按键式对应的span发亮
    function lightTheKey(e){
        $(e).addClass("hover");
        setTimeout(function(){
            $(e).removeClass("hover");
        },90);
    }
</script>

</html>

dang221
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
支持键盘输入的在线网页计算器
11-21
支持键盘输入的在线网页计算器，包含有防下载代码 用法：点一下淡黄色部分即可进行键盘输入运算
大数字支持键盘输入计算器
11-21
该计算器是大数字类与MFC相结合的例子，由于有一个大数字的类作为支持，该程序可以对数字处理精确到1000位以上的有效数字，作者还是对数字显示以1024作为了限制。该程序支持+、-、*、/、%、^、开根号、开立方8中操作。而且作者规避了一些bug，计算器不会core掉。
纯JS计算器 实现键盘输入、历史回点
hhhhhhhhh的博客
01-09 3286
2018-10-9-2018-10-11 这几天用原生JS学习写计算器的过程中，遇到了如下几个问题（按遇到的顺序阐述）: 1.静态布局问题 关于这点，如果以后还有布局问题，首先应该考虑到div的排布堆叠问题，计算好每个div的各类参数。关于美感问题，不作考虑，现阶段只关注功能实现问题。 2 JS设计 2.1 在计算器显示屏的显示环节中，缺乏了对JS语言类型的认识，未理解弱语言类型的意思，JS会...
js编写计算器(改良版) 支持键盘输入
wukongpai的博客
07-20 906
[color=green][size=medium] .style1 { width: 22%; margin: 20px 0 0 0; } table tr td{ text-align:center; } #Text1 { width: 258px; height: 38px; } .style2 { width: 41px; } .Bu...
简易版网页计算器
笑语轻柔
09-11 1522
需求： 通过用鼠标点击数字按钮和运算符按钮，实现现实中计算器的功能，能够做加减乘除及取余运算。并能够清零和取消上一次错误输入。 1、简单界面的实现：            首先建一个表单，在表单里插入一个表格。此界面的实现可以通过代码框中通过用表单与表格各标签功能实现，也可以在设计框中通过插入的方式实现。 2、鼠标点击数字键在窗口中相应数字显现的实现：          在每一
计算器支持键盘输入C#
07-19
标题中的“计算器支持键盘输入C#”指的是使用C#编程语言开发的一款计算器应用程序，它特别强调了对键盘输入的支持。在计算机程序设计中，C#是一种面向对象的、现代的编程语言，常用于构建Windows桌面应用、游戏以及...
js网页版计算器的简单实现
10-27
介绍了网页版计算器的简单实现代码，有需要的朋友可以参考一下
Labview 计算器 全模拟Windows支持键盘输入
11-17
3. **事件结构**：LabVIEW中的事件结构是处理用户交互的关键，比如当用户点击按钮或输入键盘时，相应的事件将触发相应的函数执行。 4. **键盘输入模拟**：实现键盘输入功能意味着计算器能够接收并处理来自键盘的...
网页版计算器代码HTML手机计算器
04-27
这样的计算器设计简洁，易于使用，尤其在没有物理计算器或者电脑不支持内置计算器软件的情况下，能够提供极大的便利性。 1. HTML 结构：HTML（HyperText Markup Language）是网页的基础框架，用于定义页面内容和...
鼠标键盘按键计算器
10-28
开启后可以记录鼠标和按键的次数。可以用于图片点状计数等方面。
鼠标键盘按键计算器用于计算鼠标的点击次数和键盘的按键次数
07-24
鼠标键盘按键计算器 用于计算鼠标的点击次数和键盘的按键次数
C# 计算器（可以用键盘输入）
05-09
一个简单的计算器，没什么功能 只能完成基本的计算
鼠标键盘计数器
09-06
一款功能强大而且非常好用鼠标键盘计数器，可以统计所有键盘按键的次数，也有一个临时计数器共用户使用。
键盘计数器
09-05
windows系统下的exe软件，记录敲击键盘和左右键鼠标的数量，有保存txt文件的功能
矩阵键盘的简易计算器（带仿真代码）
11-10
矩阵键盘，通过数码管显示，简易的计算器，已通过下板子调试
在线计算器源码（HTML+CSS+jQuery）
吴圩在CSDN的博客
07-08 4102
一、简介 最近学习前端内容，做为练习，试开发了一个在线的计算器。 具有如下功能： +-*/运算；开平方根运算；支持键盘输入（delete键设置为初始化功能）。 目前存在的BUG： 输入小数时，初次输入小数点，其会显示在数字最左侧，经测试，应为input标签的问题；负数的输入；结果为负时，负号（即减号）显示在数字的右侧。 以上1和3两个BU
HTML5实现网页计算器清空操作,使用event.target实现简单的网页版计算器
weixin_36284522的博客
06-09 566
一次偶然的机会使用了手机上自带的计算器，对手机上的计算器感兴趣，想用已学的知识在网页上实现，一直想不出怎样用简单的方式去获取按键值的思绪，偶然间在其他练习上使用了event.target，便开始研究event.target的使用，最后发现使用event.target.value就能完成这功能，最后用简单的代码通过按键的点击实现简单的四则运算计算器。虽然将我想要的计算器实现了，但其中还有许多地方需要...
html 实现一个网页版计算器,输入两个数和运算符,得出结果
最新发布
05-16
HTML是一种标记语言，用于构建网页。它本身并不能实现计算功能，需要配合JavaScript实现。实现网页版计算器需要以下步骤： 1. 使用HTML创建UI界面，包括数字和运算符按钮、输入框和结果框等元素。 2. 配置JavaScript文件，实现相应的计算功能。可以通过传入两个数和运算符，计算出结果并将其输出到结果框中。 3. 实现交互逻辑，使得用户点击数字和运算符按钮时能够在输入框中看到相应的输入，最终得到计算结果。 具体来说，HTML可以如下实现： ``` <!DOCTYPE html> <html> <head> <title>网页版计算器</title> </head> <body> <h1>网页版计算器</h1> <input type="text" id="num1" placeholder="输入第一个数字"> <input type="text" id="num2" placeholder="输入第二个数字"> <br> <button onclick="calculate('+')">+</button> <button onclick="calculate('-')">-</button> <button onclick="calculate('*')">*</button> <button onclick="calculate('/')">/</button> <br> <h2>结果：</h2> <input type="text" id="result" readonly> <script> function calculate(operator) { var num1 = Number(document.getElementById("num1").value); var num2 = Number(document.getElementById("num2").value); var result = 0; if (operator === '+') { result = num1 + num2; } else if (operator === '-') { result = num1 - num2; } else if (operator === '*') { result = num1 * num2; } else if (operator === '/') { result = num1 / num2; } document.getElementById("result").value = result; } </script> </body> </html> ``` 以上代码实现了一个简单的网页版计算器。用户可以在输入框中输入两个数字，然后通过点击加、减、乘、除按钮计算相应的结果，并在结果框中显示。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值