括号功能未实现，后续更

<!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. 【C语言】第2章 算法 — 程序的灵魂

    第2章 算法 - 程序的灵魂 一个程序主要包括以下两方面的信息: 对数据的描述.在程序中要指定用到哪些数据以及这些数据的类型和数据的组织形式 也就是数据结构(data structure) 对操作的描 ...

  2. jwt《token》

    payload与claims只能存在一个这部分是jwt源码:依赖如下:官方文档的依赖 <dependency> <groupId>io.jsonwebtoken</gro ...

  3. python 截屏操作

    方法1: 用pyscreenshot,https://pypi.org/project/pyscreenshot/ 方法2:用autopy,https://pypi.org/project/autop ...

  4. python matplotlib 绘图+显示数值

    参考:https://www.jb51.net/article/152685.htm 用plt.text函数 import numpy as np import matplotlib.mlab as ...

  5. Windows系统一些好用的办公工具

    在日常办公过程中,总有一些工具令人觉得方便,提高了工作效率.以下是根据我的习惯,收集了一些好用的工具,在此记录且不定期更新. 文件名 说明 Everything 文件搜索工具,搜索速度快 ALTRun ...

  6. 【机器学习｜数学基础】Mathematics for Machine Learning系列之线性代数（1）：二阶与三阶行列式、全排列及其逆序数

    @ 目录 前言 二阶与三阶行列式 二阶行列式 三阶行列式 全排列及其逆序数 全排列 逆序数 结语 前言 Hello!小伙伴! 非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出-   自我介绍 ...

  7. jvm学习笔记：程序计数器

    程序计数器(PC Register) The Java Virtual Machine can support many threads of execution at once (JLS §17). ...

  8. 算法：实现strStr()，字符串indexOf方法

    描述 给定一个 haystack 字符串和一个 needle 字符串,在 haystack 字符串中找出 needle 字符串出现的第一个位置 (从0开始).如果不存在,则返回  -1. 个人思路: ...

  9. C#导出数据—使用Word模板

    前言 本文主要介绍C#使用标签替换的方法导出数据,导出的数据模板使用Word文档. 模板建立 首先创建一个Word文档,然后建立一个基础模板.然后将上方菜单切换到插入菜单. 然后在想填充数据的地方添加 ...

  10. jquery监听动态添加的input的change事件

    使用下面方法在监听普通的input的change事件正常 $('#pp').on('change', 'input.videos_poster_input', function () { consol ...