JS 实现计算器功能
括号功能未实现，后续更
<!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 实现计算器功能的更多相关文章
- JS事件 编程练习-自制计算器 使用JS完成一个简单的计算器功能。实现2个输入框中输入整数后，点击第三个输入框能给出2个整数的加减乘除。
编程练习 使用JS完成一个简单的计算器功能.实现2个输入框中输入整数后,点击第三个输入框能给出2个整数的加减乘除. 提示:获取元素的值设置和获取方法为:例:赋值:document.getElement ...
- 使用html+css+js实现计算器
使用html+css+js实现计算器,开启你的计算之旅吧 效果图: 代码如下,复制即可使用: <!DOCTYPE html><html lang="en"> ...
- 完成一段简单的Python程序，用于实现一个简单的加减乘除计算器功能
#!/bin/usr/env python#coding=utf-8'''完成一段简单的Python程序,用于实现一个简单的加减乘除计算器功能'''try: a=int(raw_input(" ...
- JS实现注销功能
JS实现注销功能,代码如下: <script> window.history.forward(1); </script> 这个代码的用法就是: 比如,我们此时有两个页面:Log ...
- javaWeb 使用 jsp 和 javaBean 实现计算器功能
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...
- JS全选功能代码优化
原文:JS全选功能代码优化 JS全选功能代码优化 最近在看javascript MVC那本书,也感觉到自己写的代码也并不优雅,所以一直在想 用另一种模式来编写JS代码,所以针对之前的简单的JS全选功能 ...
- CI 结合 vue.js 的搜索功能模块
CI 结合 vue.js 的搜索功能模块 最近在有优化公司后台的某个模块的搜索功能优化 原先的是这个样子的,很是单调: 老大给我找个图希望我能弄成这样子: 经过不断修改,最后成了这样子 是不是比以前好 ...
- 网站开发进阶(十二)JS实现打印功能(包括打印预览、打印设置等)
JS实现打印功能(包括打印预览.打印设置等) 绪 最近在进行项目开发时,需要实现后台管理端打印功能,遂在网上一阵搜索,搜到了很多相关的文章.其中绝大部分文章都是使用的Lodop5.0(Web打印和套打 ...
- C#实现按键计算器功能
C#实现按键计算器功能 (一次失败的编程) 界面: 代码如下: using System; using System.Collections.Generic; using System.Compone ...
随机推荐
- mybatis gengeator一键生成
- CentOS_Server with GUI入门
安装模式: Server with GUI:基本的桌面系统,包括常用的桌面软件,如文档查看工具 Minimal:基本的系统,不含有任何可选的软件包 Basic Server :安装的基本系统的平台支持 ...
- ecshop文件架构
/*ECShop 2.5.1 的结构图及各文件相应功能介绍ECShop2.5.1_Beta upload 的目录┣ activity.php 活动列表┣ affiche.php 广告处理文件┣ aff ...
- MySQL5.7 高可用高性能配置调优
[client]default-character-set = utf8mb4[mysqld]### 基本属性配置port = 3306datadir=/data/mysql# 禁用主机名解析skip ...
- 洛谷P3104 Counting Friends G 题解
题目 [USACO14MAR]Counting Friends G 题解 这道题我们可以将 \((n+1)\) 个边依次去掉,然后分别判断去掉后是否能满足.注意到一点, \(n\) 个奶牛的朋友之和必 ...
- 优化技术专题-线程间的高性能消息框架-深入浅出Disruptor的使用和原理
前提概要 简单回顾 jdk 里的队列: 阻塞队列: ArrayBlockingQueue主要通过:数组(Object[])+ 计数器(count)+ ReetrantLock的Condition (n ...
- Spring AOP 事务配置（实现转账事务）
1. 事务特性 事务特性:ACID 原子性:整体 [原子性是指事务包含的所有操作要么全部成功,要么全部失败] 一致性:数据 [一个事务执行之前和执行之后都必须处于一致性状态] 隔离性:并发 [对于任意 ...
- Servlet处理带尾部斜杠/的URI
有一个需求:让一个Servlet能够同时处理形如/XXX/YYY和/XXX/YYY/的URI,即URI尾部的斜杠有没有都要能处理到. 很容易想到,做两个URL Pattern/XXX/YYY和/XXX ...
- 富文本编辑器-SpringBoot
目录 简介 Editor.md 基础工程搭建 数据库设计 基础项目搭建 文章编辑整合(重点) 图片上传问题 表情包问题 文章展示 简介 项目地址:https://gitee.com/zwtgit/ri ...
- java的split方法中的regex参数
我们需要以|进行分割,为了匹配|本身,正则中采用\|进行转义,而Java中\也表示转义,从java到正则需要必须使用\\|进行转义,即split中的\\表示正则的转义.