JavaScript+HTML,简单的计算器实现
成功进化到程序猿快一年多了, 还没写过计算器, 正好今天比较闲,随手写了个计算器,最简单的实现,核心是eval()方法,把字符串作为JS代码处理,把输入的信息拼接成字符串,点等号执行代码得到结果,出异常弹窗提示
只用了几十行JS代码,感觉还可以精简 , 我是一只追求简洁的程序猿
@author beiguapipi 1//存储算式 var all=""; //添加字符串到式子 function add(obj){ if(document.getElementById("jieguo").innerHTML){ window.location.reload(); }else{ all = all+obj.value; document.getElementById("jisuan").innerHTML=all; } } //删除一个最后的字符 function del(){ if(all.length>0){ all= all.substr(0 ,all.length-1) document.getElementById("jisuan").innerHTML=all; } } //计算 function jisuan(){ try{ //将字符串作为JS代码处理 var num = eval(all); if(isNaN(num)){ //如果出异常了,新建异常信息 var e = new Error(); e.message="输入式子不合法"; throw e; }else{ if(num=="Infinity"||num=="-Infinity"){ alert("运算中分母不能为零") window.location.reload(); }else{ document.getElementById("jieguo").innerHTML=num; } } }catch(e){ //输出异常信息,刷新页面 alert(e) window.location.reload(); } }
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>简单计算器</title> <link type="text/css" rel="stylesheet" href="css.css"> <script type="text/javascript" src="control.js" charset="utf-8"></script> </head> <body> <div id="body"> <div id="title"> <span id="sp">简单计算器</span> </div> <div id="area"> <div id="top"> <span id="jisuan"></span> </div> <div id="mid"> 计算结果:<span id="jieguo"></span> </div> <div id="button"> <br> <input onclick="reflush()" id="clear" class="but" type="button" value="清空"> <input onclick="del()" id="del" class="but" type="button" value="退格"> <input onclick="add(this)" class="but" type="button" value="/"> <input onclick="add(this)" class="but" type="button" value="*"><br><br> <input onclick="add(this)" class="but" type="button" value="1"> <input onclick="add(this)" class="but" type="button" value="2"> <input onclick="add(this)" class="but" type="button" value="3"> <input onclick="add(this)" class="but" type="button" value="-"><br><br> <input onclick="add(this)" class="but" type="button" value="4"> <input onclick="add(this)" class="but" type="button" value="5"> <input onclick="add(this)" class="but" type="button" value="6"> <input onclick="add(this)" class="but" type="button" value="+"><br><br> <input onclick="add(this)" class="but" type="button" value="7"> <input onclick="add(this)" class="but" type="button" value="8"> <input onclick="add(this)" class="but" type="button" value="9"><br><br> <input onclick="add(this)" id="num_0" class="but" type="button" value="0"> <input onclick="add(this)" class="but" type="button" value="."><br> <input onclick="jisuan()" id="num_deng" class="but" type="button" value="="> <input onclick="add(this)" class="but" type="button" value="("> <input onclick="add(this)" class="but" type="button" value=")"> </div> </div> </div> </body> </html>
CSS代码
@CHARSET "UTF-8";@CHARSET "UTF-8"; *{ margin: 0px; padding: 0px; } #body{ margin: auto; margin-top:10px; width: 450px; height: 600px; border: solid 5px rgb(241,241,241); background:rgb(255,255,225); } #title{ width: 400px; height: 50px; position: relative; left:25%; } #sp{ font-size: 1cm; font-style: oblique; } #area{ width: 450px; height: 550px; border: solid 1px rgb(0,115,0); float: left; } #top{ width: 400px; height: 35px; border: solid 3px rgb(200,225,225); float: left; position: relative; left:20px; top:15px; font-size: 25px; background-color: rgb(255,255,255) } #jisuan{ float: right; } #mid{ width: 400px; height: 35px; border: solid 3px rgb(200,225,225); float: left; position: relative; left:20px; top:30px; font-size: 25px; background-color: rgb(255,255,255) } #jieguo{ width: 270px; height: 35px; border: solid 1px rgb(200,225,225); float: right; } #button{ width: 400px; height: 400px; border: solid 3px rgb(200,225,225); float: left; position: relative; left:20px; top:50px; } .but{ width: 90px; height: 45px; position: relative; left:10px; } #num_0{ width: 187px; } #num_deng{ height: 108px; position: relative; left:302px; top:-108px; } input{ font-size: 25px; }
JavaScript+HTML,简单的计算器实现的更多相关文章
- 用JavaScript制作简单的计算器
<html > <head> <title>简单计算器</title> <style type="text/css"> ...
- jQuery/javascript实现简单网页计算器
<html> <head> <meta charset="utf-8"> <title>jQuery实现</title> ...
- 利用css和javascript实现简单的计算器
<!doctype html> <html> <head> <!--声明当前页面的编码集--> <meta http-equiv="Co ...
- JAVASCRIPT实现简单计算器
最终效果如下图-2,有bug:就是整数后点击%号结果正确,如果小数后面点击%的话结果就错误!其他都正常,求指点:input的value是string类型的,在JS中改如何正确处理下图-1中的if部分? ...
- javascript 简单的计算器
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx. ...
- js制作简单的计算器
学着做了一个简单的计算器!记录记录!哈哈 <!DOCTYPE html> <html> <head> <title>简单的计算器</title&g ...
- JS实现一个简单的计算器
使用JS完成一个简单的计算器功能.实现2个输入框中输入整数后,点击第三个输入框能给出2个整数的加减乘除.效果如上: 第一步: 创建构建运算函数count(). 第二步: 获取两个输入框中的值和获取选择 ...
- Java简单公式计算器
最近给公司开发业务代码时,碰到一个场景,简单描述是这样的: 客户要向咱们公司定制一件产品,这个产品呢,有很多属性,那公司得根据这些属性报价呀,怎么报价呢?公司针对某种类型的产品有一个基准价,在同类产品 ...
- JS事件 编程练习-自制计算器 使用JS完成一个简单的计算器功能。实现2个输入框中输入整数后,点击第三个输入框能给出2个整数的加减乘除。
编程练习 使用JS完成一个简单的计算器功能.实现2个输入框中输入整数后,点击第三个输入框能给出2个整数的加减乘除. 提示:获取元素的值设置和获取方法为:例:赋值:document.getElement ...
随机推荐
- PHPCMS后台登陆路径修改方法(V9版)
转自:http://hi.baidu.com/geek_cheng/item/b903ebe7b4ac3af9e0a5d4aa?qq-pf-to=pcqq.c2c 最新发布的PHPCMS V9由于采用 ...
- Windows 通用应用尝试开发 “51单片机汇编”总结
一.前言 终于完成windows通用应用“51单片机汇编”,半年前开始玩WindowsPhone开发的第一个真正意义上的App(还很多缺点=_=).开发从1月中旬考完试到今天,期间实习了半个月,玩了几 ...
- React Native 使用问题记录
1.<View></View>之间有空格会报错 Trying to add unknown view tag 2.一些js语法糖注意点http://facebook.githu ...
- Access restriction: The type TaskTopicResolver is not accessible due to restrict
Access restriction: The type TaskTopicResolver is not accessible due to restrict : Eclipse 默认把这些受访问 ...
- Titanium studio安装
在Win7 Titanium Studio的安装过程. 1.准备工作 Titanium存储空间的要求,Titanium Studio 需要1 GB.Android SDK需要1.5 GB.Blackb ...
- Android 振动器
今天介绍一下Android的振动器Vibrator,有三个方法来控制手机振动: 1.void vibrate(long milliseconds):控制手机振动milliseconds毫秒. 2.vo ...
- 将命令添加到shell脚本中然后设置开机自启动
例如开机自启动nginx 编写一个脚本 #vi /usr/local/Monitor_nginx.sh #!/bin/bash if [ "$(ps -ef | grep "ngi ...
- NFS网络文件系统安装配置
简介 NFS(Network File System)FS是由Sun开发并发展起来的一项用于在不同机器,不同操作系统之间通过网络共享数据.客户端用mount命令把远程的NFS文件系统挂载到本地即可,操 ...
- .NET3.5项目转.NET2.0项目技巧
最近有一个项目,一开始开发是用VS2008(.NET3.5)开发的,该项目是一个Windorm客户端软件,由于在大规模的推广过程中,发现在安装.NET3.5Framework的时候浪费了太多时间,而且 ...
- JAVA String,StringBuffer与StringBuilder的区别??
String 字符串常量StringBuffer 字符串变量(线程安全)StringBuilder 字符串变量(非线程安全) 简要的说, String 类型和 StringBuffer 类型的主要性能 ...