括号功能未实现,后续更

<!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. Gradient checking

    所需文件:本地下载 Gradient Checking Welcome to the final assignment for this week! In this assignment you wi ...

  2. freeswitch新增模块

    概述 freeswitch的架构由稳定的核心模块和大量的外围插件式模块组成.核心模块保持稳定,外围模块可以动态的加载/卸载,非常灵活方便. 外围模块通过核心提供的 Public API与核心进行通信, ...

  3. rabbitMq可靠性投递之手动ACK

    #手动应答#spring.rabbitmq.listener.simple.acknowledge-mode=manual#spring.rabbitmq.listener.simple.acknow ...

  4. Springboot 整合通用mapper和pagehelper展示分页数据(附github源码)

    简介 springboot 设计目的就是为了加速开发,减少xml的配置.如果你不想写配置文件只需要在配置文件添加相对应的配置就能快速的启动的程序. 通用mapp 通用mapper只支持对单表的操作,对 ...

  5. GoLang设计模式06 - 对象池模式

    这次介绍最后一个创建型模式--对象池模式.顾名思义,对象池模式就是预先初始化创建好多个对象,并将之保存在一个池子里.当需要的时候,客户端就可以从池子里申请一个对象使用,使用完以后再将之放回到池子里.池 ...

  6. 全局CSS样式表

    看api手册使用即可 1.按钮和图片 2.表格.表单 表单的lable作用就是点击前面的文字可以聚焦到对应的输入框中

  7. 富文本编辑器-SpringBoot

    目录 简介 Editor.md 基础工程搭建 数据库设计 基础项目搭建 文章编辑整合(重点) 图片上传问题 表情包问题 文章展示 简介 项目地址:https://gitee.com/zwtgit/ri ...

  8. EL-ADMIN学习笔记

    一,支持接口限流,避免恶意请求导致服务层压力过大 常见的限流功能一般有两个关注点: 1.限流原则,即以什么样的条件对请求进行识别以及放行.常见的作法是给予每个调用API的系统不同的唯一编码,用于监控某 ...

  9. Lambda函数接口和方法构造器应用

    函数式接口 什么是函数式接口? 在java中'有且仅有一个抽象方法的接口',就称为函数式接口. 可以通过Lambda表达式来创建该接口的对象.(若Lambda表达式抛出一个受检异常,那么该异常需要在目 ...

  10. Linux安装Cockpit监控服务

    CentOS/RHEL 8的新特性之一就是自带了一个cockpit的监控服务.通过c/s架构模式运行,客户端输入ip:端口即可访问 这类似于glances监控. 如果你不是使用的centos/rhel ...