括号功能未实现，后续更

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>计算器</title>

    <style>

        body,p,input,ul,li,div{

            margin: 0;

            padding: 0;

        }

        #calc{

            position: relative;

            border-radius: 10px;

            margin: 0 auto;

            width: 400px;

            height: 500px;

            background: #ccc;

        }

        p{

            text-align: center;

        }

        .f-text{

            padding-top: 10px;

           box-sizing: border-box;

           border: 0;

            margin: 0 auto;

            font-size: 30px;

            text-align: right;

            width: 400px;

            height: 60px;

        }

        ul{

            list-style-type: none;

        }

        ul li{

            float: left;

            width: 90px;

            height: 50px;

            margin: 25px 10px 0 0;

            font-size: 30px;

            font-family: Arial, Helvetica, sans-serif;

        }

        ul li a{

            margin: 0 auto;

            display: block;

            width: 60px;

            height: 60px;

            line-height: 50px;

            box-sizing: border-box;

            border-radius: 10px;

            box-shadow: white;

            text-align: center;

            text-decoration: none;

            color: white;

            background: black;

        }

        ul li a:hover{

            cursor: pointer;

            color: saddlebrown;

        }

        #formula{

            margin-left: -400px;

            box-sizing: border-box;

            border: 0;

            margin-top: -60px;

            position: absolute;

            width: 400px;

            height: 20px;

        }

    </style>

</head>

<body>

   <div id="calc">

       <p>简易计算器</p>

        <input class="f-text" type="text" readonly="readonly" maxlength="9" value="0" />

            <ul>

                <li class="btn-1"><a href="javascript:void(0)">c</a></li>

                <li class="btn-1"><a href="javascript:void(0)">%</a></li>

                <li class="btn-1"><a href="javascript:void(0)">/</a></li>

                <li class="btn-1"><a href="javascript:void(0)">x</a></li>

                <li><a href="javascript:void(0)">7</a></li>

                <li><a href="javascript:void(0)">8</a></li>

                <li><a href="javascript:void(0)">9</a></li>

                <li class="btn-1"><a href="javascript:void(0)">-</a></li>

                <li><a href="javascript:void(0)">4</a></li>

                <li><a href="javascript:void(0)">5</a></li>

                <li><a href="javascript:void(0)">6</a></li>

                <li class="btn-1"><a href="javascript:void(0)">+</a></li>

                <li><a href="javascript:void(0)">1</a></li>

                <li><a href="javascript:void(0)">2</a></li>

                <li><a href="javascript:void(0)">3</a></li>

                <li class="btn-2"><a href="javascript:void(0)">=</a></li>

                <li class="btn-3"><a href="javascript:void(0)">0</a></li>

                <li><a href="javascript:void(0)">.</a></li>

                <li><a href="javascript:void(0)">(</a></li>

                <li><a href="javascript:void(0)">)</a></li>

            </ul>

        <input id="formula" type="text" readonly="readonly" value=""/>

   </div>

</body>

</html>

<script>

    var calc=document.getElementById("calc");

    var a=calc.getElementsByTagName("a");

    var input=calc.getElementsByTagName("input")[0];

    var formula=document.getElementById("formula");

    var s=false;

    var i;

    for(i=0;i<a.length;i++){

        a[i].onfocus=function(){

            this.blur()

        };

        a[i].onclick=function(){

            switch(this.innerHTML){

                case "c":

                input.value=0;

                formula.value="";

                break;

                case "%":

                count("%")

                break;

                case "x":

                count("*")

                break;

                case "-":

                count("-")

                break;

                case "+":

                count("+")

                break;

                case "(":

                count("(")

                break;

                case ")":

                count(")")

                break;

                case "=":

                s || (formula.value+=input.value);

                input.value=eval(formula.value.replace(/\%\/\*\-\+/,''));//输入的值进行运算后得到的值

                input.value=input.value.substr(0,10).replace("NaN",0);//计算输入变量和输出结果最多前10位，如果不是数字返回0

                s=true;

                break;

                case ".":

                if(input.value.search(/[\.\%\/\*\-\+]/)!=-1)//输入的值为非运算符时

                break;

                default:

                s && (input.value=0,formula.value="",s=false);

                input.value.length<10 &&(input.value=(input.value+this.innerHTML).replace(/^[0\%\/\*\-\+](\d)/,"$1"));

            }

        }

    }

    function count(d){

       var reg = /[\%\/\*\-\+]$/;

        if(s)

        {   //错误处理

            formula.value=input.value + d;

            input.value=d;

            s=false;

        }

        else

        {   //正确处理

            reg.test(input.value) || (formula.value+=input.value);

            console.log('3',/[\%\/\*\-\+]$/.test(input.value));

            input.value=d;

            console.log("n",input.value);

            reg.test(formula.value) || (formula.value+=input.value);

            formula.value=formula.value.slice(-1)!=d ? formula.value.replace(/.$/,d):formula.value

       }

    }

</script>

　　

JS 实现计算器功能的更多相关文章

  1. JS事件 编程练习-自制计算器 使用JS完成一个简单的计算器功能。实现2个输入框中输入整数后，点击第三个输入框能给出2个整数的加减乘除。

    编程练习 使用JS完成一个简单的计算器功能.实现2个输入框中输入整数后,点击第三个输入框能给出2个整数的加减乘除. 提示:获取元素的值设置和获取方法为:例:赋值:document.getElement ...

  2. 使用html+css+js实现计算器

    使用html+css+js实现计算器,开启你的计算之旅吧 效果图: 代码如下,复制即可使用: <!DOCTYPE html><html lang="en"> ...

  3. 完成一段简单的Python程序，用于实现一个简单的加减乘除计算器功能

    #!/bin/usr/env python#coding=utf-8'''完成一段简单的Python程序,用于实现一个简单的加减乘除计算器功能'''try: a=int(raw_input(" ...

  4. JS实现注销功能

    JS实现注销功能,代码如下: <script> window.history.forward(1); </script> 这个代码的用法就是: 比如,我们此时有两个页面:Log ...

  5. javaWeb 使用 jsp 和 javaBean 实现计算器功能

    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...

  6. JS全选功能代码优化

    原文:JS全选功能代码优化 JS全选功能代码优化 最近在看javascript MVC那本书,也感觉到自己写的代码也并不优雅,所以一直在想 用另一种模式来编写JS代码,所以针对之前的简单的JS全选功能 ...

  7. CI 结合 vue.js 的搜索功能模块

    CI 结合 vue.js 的搜索功能模块 最近在有优化公司后台的某个模块的搜索功能优化 原先的是这个样子的,很是单调: 老大给我找个图希望我能弄成这样子: 经过不断修改,最后成了这样子 是不是比以前好 ...

  8. 网站开发进阶(十二)JS实现打印功能(包括打印预览、打印设置等)

    JS实现打印功能(包括打印预览.打印设置等) 绪 最近在进行项目开发时,需要实现后台管理端打印功能,遂在网上一阵搜索,搜到了很多相关的文章.其中绝大部分文章都是使用的Lodop5.0(Web打印和套打 ...

  9. C#实现按键计算器功能

    C#实现按键计算器功能 (一次失败的编程) 界面: 代码如下: using System; using System.Collections.Generic; using System.Compone ...

随机推荐

  1. response中setCharacterEncoding和setContentType的区别

    package day08; import java.io.IOException; import javax.servlet.ServletException; import javax.servl ...

  2. Playwright-python 教程

    安装 pip install playwright -i https://mirrors.aliyun.com/pypi/simple/ 使用阿里源,下载速度快一点. python -m playwr ...

  3. SSD算法原理

    Paper: https://arxiv.org/pdf/1512.02325.pdf SSD用神经网络(VGG)提取多层feature map ,来实现对不同大小物体的检测.如下图所示: We us ...

  4. 谈谈redis缓存击穿透和缓存击穿的区别，雪崩效应

    面试经历 在很长的一段时间里,我以为缓存击穿和缓存穿透是一个东西,直到最近去腾讯面试,面试官问我缓存击穿和穿透的区别:我回答它俩是一样的,面试官马上抬起头用他那细长的单眼皮眼睛瞪着我说:"你 ...

  5. 整理之Java容器

    主要参考:JAVA常见容器 Set,List,Map,Vector,ArrayList的区别 Java所有容器见下图: 数组 int[] t = new int[10]; //声明并创建长度为10的数 ...

  6. 紫色飞猪的研发之旅--06go自定义状态码

    在实际开发中,需要前后端需要协商状态码,状态码用于后端返前端时使用.在一个团队中,定义的状态码讲道理应该是一致的,项目开始的起始阶段状态码应该是定义了个七七八八的,随着功能的叠加而不断增加.此系列将围 ...

  7. php open_basedir绕过

    描述 php为了安全性考虑,有一项 open_basedir 的设置,它可将用户访问文件的活动范围限制在指定的区域.根据你web服务器环境,open_basedir可以在几个地方设置. 首先 在php ...

  8. Java基础之SPI机制

    SPI 机制,全称为 Service Provider Interface,是一种服务发现机制.它通过在 ClassPath 路径下的 META-INF/services 文件夹查找文件,自动加载文件 ...

  9. ipsec.conf配置文件多个保护子网解析流程

    Author       : Email         : vip_13031075266@163.com Date          : 2021.01.23 Copyright : 未经同意不得 ...

  10. NLP与深度学习（四）Transformer模型

    1. Transformer模型 在Attention机制被提出后的第3年,2017年又有一篇影响力巨大的论文由Google提出,它就是著名的Attention Is All You Need[1]. ...