首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

javascript写的简单的计算器，内容很多，方法实用，推荐

Posted in Javascript onDecember 29, 2011

最近用javascript写了一个简单的计算器，自己测试感觉还好，先给大家观赏下界面：

javascript写的简单的计算器，内容很多，方法实用，推荐

界面就是这样了，但是功能如何呢？

现在只是个简单的标准计算器，能进行加减乘除连续运算，以及求余运算。如果发生被除数为零的错误，下面会给出提示，就像这样：

javascript写的简单的计算器，内容很多，方法实用，推荐

自己不知道写的怎么样，但是对于新手来说，这肯定是一份大餐，里面可以接触到的东西不少，可以拿来学习。如果有高手看出里面的疏漏、错误等望不吝赐教，给予指点。

下面贴上代码，希望里面的注释足够多了。
js部分： 

var num=0,result=0,numshow="0"; 

var operate=0; //判断输入状态的标志 

var calcul=0; //判断计算状态的标志 

var quit=0; //防止重复按键的标志 

function command(num){ 

var str=String(document.calculator.numScreen.value); //获得当前显示数据 

str=(str!="0") ? ((operate==0) ? str : "") : ""; //如果当前值不是"0"，且状态为0，则返回当前值，否则返回空值; 

str=str + String(num); //给当前值追加字符 

document.calculator.numScreen.value=str; //刷新显示 

operate=0; //重置输入状态 

quit=0; //重置防止重复按键的标志 

} 

function dzero(){ 

var str=String(document.calculator.numScreen.value); 

str=(str!="0") ? ((operate==0) ? str + "00" : "0") : "0"; //如果当前值不是"0"，且状态为0，则返回当str+"00"，否则返回"0"; 

document.calculator.numScreen.value=str; 

operate=0; 

} 

function dot(){ 

var str=String(document.calculator.numScreen.value); 

str=(str!="0") ? ((operate==0) ? str : "0") : "0"; //如果当前值不是"0"，且状态为0，则返回当前值，否则返回"0"; 

for(i=0; i<=str.length;i++){ //判断是否已经有一个点号 

if(str.substr(i,1)==".") return false; //如果有则不再插入 

} 

str=str + "."; 

document.calculator.numScreen.value=str; 

operate=0; 

} 

function del(){ //退格 

var str=String(document.calculator.numScreen.value); 

str=(str!="0") ? str : ""; 

str=str.substr(0,str.length-1); 

str=(str!="") ? str : "0"; 

document.calculator.numScreen.value=str; 

} 

function clearscreen(){ //清除数据 

num=0; 

result=0; 

numshow="0"; 

document.calculator.numScreen.value="0"; 

} 

function plus(){ //加法 

calculate(); //调用计算函数 

operate=1; //更改输入状态 

calcul=1; //更改计算状态为加 

} 

function minus(){ //减法 

calculate(); 

operate=1; 

calcul=2; 

} 

function times(){ //乘法 

calculate(); 

operate=1; 

calcul=3; 

} 

function divide(){ //除法 

calculate(); 

operate=1; 

calcul=4; 

} 

function persent(){ //求余 

calculate(); 

operate=1; 

calcul=5; 

} 

function equal(){ 

calculate(); //等于 

operate=1; 

num=0; 

result=0; 

numshow="0"; 

} 

// 

function calculate(){ 

numshow=Number(document.calculator.numScreen.value); 

if(num!=0 && quit!=1){ //判断前一个运算数是否为零以及防重复按键的状态 

switch(calcul){ //判断要输入状态 

case 1:result=num+numshow;break; //计算"+" 

case 2:result=num-numshow;break; //计算"-" 

case 3:result=num*numshow;break; 

case 4:if(numshow!=0){result=num/numshow;}else{document.getElementById("note").innerHTML="被除数不能为零！"; setTimeout(clearnote,4000)} break; 

case 5:result=num%numshow;break; 

} 

quit=1; //避免重复按键 

} 

else{ 

result=numshow; 

} 

numshow=String(result); 

document.calculator.numScreen.value=numshow; 

num=result; //存储当前值 

} 

function clearnote(){ //清空提示 

document.getElementById("note").innerHTML=""; 

}

html部分： 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

<title>写给新手：js表单操作（四） 简单计算器（二）</title> 

<style type="text/css"> 

body { 

font-size:12px; 

font-family:Arial, Georgia, "Times New Roman", Times, serif; 

color:#555; 

text-align:center; 

background-color:#e2e2e2; 

} 

h6{ 

margin:0; 

font-size:12px; 

} 

#calculator { 

width:240px; 

height:auto; 

overflow:hidden; 

margin:10px auto; 

border:#fff 1px solid; 

padding-bottom:10px; 

background-color:#f2f2f2; 

} 

#calculator div { 

clear:both; 

} 

#calculator ul{ 

padding:0; 

margin:5px 14px; 

border:#fff 1px solid; 

height:auto; 

overflow:hidden 

} 

#calculator li{ 

list-style:none; 

float:left; 

width:32px; 

height:32px; 

margin:5px; 

display:inline; 

line-height:32px; 

font-size:14px; 

background-color:#eaeaea; 

} 

#calculator li.tool{ 

background-color:#e2e2e2; 

} 

#calculator li:hover{ 

background-color:#f9f9f9; 

cursor:pointer; 

} 

#calculator li:active{ 

background-color:#fc0; 

cursor:pointer; 

} 

#calculator li.tool:active{ 

background-color:#d8e8ff; 

cursor:pointer; 

} 

#calcu-head { 

text-align:left; 

padding:10px 15px 5px; 

} 

span.imyeah { 

float:right; 

color:#ccc; 

} 

span.imyeah a{ 

color:#ccc; 

} 

.screen{ 

width:200px; 

height:24px; 

line-height:24px; 

padding:4px; 

border:#e6e6e6 1px solid; 

border-bottom:#f2f2f2 1px solid; 

border-right:#f2f2f2 1px solid; 

margin:10px auto; 

direction:ltr; 

text-align:right; 

font-size:16px; 

color:#999; 

} 

#calcu-foot{ 

text-align:left; 

padding:10px 15px 5px; 

height:auto; 

overflow:hidden; 

} 

span#note{ 

float:left; 

width:210px; 

height:auto; 

overflow:hidden; 

color:red; 

} 

span.welcome{ 

clear:both; 

color:#999; 

} 

span.welcome a{ 

float:right; 

color:#999; 

} 

</style> 

<script language="javascript"> 

//此处插入上面的js代码 

</script> 

</head> 

<body> 

<div id="calculator"> 

<div id="calcu-head"><span class="imyeah">© <a href="http://www.cnblogs.com/imyeah/" target="_blank">I'm Yeah!</a></span><h6>简单的计算器</h6></div> 

<form name="calculator" action="" method="get"> 

<div id="calcu-screen"> 

<!--配置显示窗口，使用onfocus="this.blur();"避免键盘输入--> 

<input type="text" name="numScreen" class="screen" value="0" onfocus="this.blur();" /> 

</div> 

<div id="calcu-btn"> 

<ul> <!--配置按钮--> 

<li onclick="command(7)">7</li> 

<li onclick="command(8)">8</li> 

<li onclick="command(9)">9</li> 

<li class="tool" onclick="del()">←</li> 

<li class="tool" onclick="clearscreen()">C</li> 

<li onclick="command(4)">4</li> 

<li onclick="command(5)">5</li> 

<li onclick="command(6)">6</li> 

<li class="tool" onclick="times()">×</li> 

<li class="tool" onclick="divide()">÷</li> 

<li onclick="command(1)">1</li> 

<li onclick="command(2)">2</li> 

<li onclick="command(3)">3</li> 

<li class="tool" onclick="plus()">+</li> 

<li class="tool" onclick="minus()">-</li> 

<li onclick="command(0)">0</li> 

<li onclick="dzero()">00</li> 

<li onclick="dot()">.</li> 

<li class="tool" onclick="persent()">%</li> 

<li class="tool" onclick="equal()">=</li> 

</ul> 

</div> 

<div id="calcu-foot"> 

<span id="note"></span> 

<span class="welcome">欢迎使用javascript计算器！<a href="http://www.cnblogs.com/imyeah" target="_blank">反馈</a></span> 

</div> 

</form> 

</div> 

</body> 

</html>

javascript写的简单的计算器，内容很多，方法实用，推荐

- Author -

mdxy-dxy

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
js 日期转换成中文格式的函数
Jul 07 Javascript
让IE8支持DOM 2（不用框架！）
Dec 31 Javascript
优化Node.js Web应用运行速度的10个技巧
Sep 03 Javascript
Vue.js实现一个自定义分页组件vue-paginaiton
Sep 05 Javascript
JavaScript每天必学之数组和对象部分
Sep 17 Javascript
jQuery用FormData实现文件上传的方法
Nov 21 Javascript
JavaScript表单验证的两种实现方法
Feb 11 Javascript
js 毫秒转天时分秒的实例
Nov 17 Javascript
angularjs 获取默认选中的单选按钮的value方法
Feb 28 Javascript
解决vue-cli webpack打包后加载资源的路径问题
Sep 25 Javascript
JS实现深度优先搜索求解两点间最短路径
Jan 17 Javascript
Vue使用JSEncrypt实现rsa加密及挂载方法
Feb 07 Javascript
JavaScript中两个感叹号的作用说明
Dec 28 #Javascript
javascript （用setTimeout而非setInterval）
Dec 28 #Javascript
js字符编码函数区别分析
Dec 28 #Javascript
javascript获得服务器端控件的ID的实现代码
Dec 28 #Javascript
Jquery异步请求数据实例代码
Dec 28 #Javascript
javascript判断ie浏览器6/7版本加载不同样式表的实现代码
Dec 26 #Javascript
js使用函数绑定技术改变事件处理程序的作用域
Dec 26 #Javascript
大话西游(1) 铁拳(1) 遗弃(1) 东方异文石(1) LOL(1) 吸血鬼(1) 绿林侠盗(1) 模拟人生(1) 战锤40K(1) 死亡搁浅(1)
You might like
一步一步学习PHP(3) php 函数
2010/02/15 PHP
PHP新手NOTICE错误常见解决方法
2011/12/07 PHP
php安全配置 如何配置使其更安全
2011/12/16 PHP
PHP测试程序运行时间的类
2012/02/05 PHP
PHP register_shutdown_function()函数的使用示例
2015/06/23 PHP
thinkPHP模板中函数的使用方法示例
2016/11/30 PHP
PHP7 安装event扩展的实现方法
2019/10/08 PHP
关于文本限制字数的js代码
2007/04/02 Javascript
新浪中用来显示flash的函数
2007/04/02 Javascript
开发跨浏览器javascript常见注意事项
2009/01/01 Javascript
利用jquery.qrcode在页面上生成二维码且支持中文
2014/02/12 Javascript
在jQuery中处理XML数据的大致方法
2015/08/14 Javascript
Bootstrap教程JS插件弹出框学习笔记分享
2016/05/17 Javascript
AngularJS基础 ng-class-odd 指令示例
2016/08/01 Javascript
教你JS中的运算符乘方、开方及变量格式转换
2016/08/09 Javascript
深入Vue-Router路由嵌套理解
2018/08/13 Javascript
vux-scroller实现移动端上拉加载功能过程解析
2019/10/08 Javascript
nodejs中使用worker_threads来创建新的线程的方法
2021/01/22 NodeJs
Python中的is和id用法分析
2015/01/26 Python
用实例分析Python中method的参数传递过程
2015/04/02 Python
Python生成不重复随机值的方法
2015/05/11 Python
Python使用bs4获取58同城城市分类的方法
2015/07/08 Python
django初始化数据库的实例
2018/05/27 Python
详解python3中zipfile模块用法
2018/06/18 Python
Python对数据进行插值和下采样的方法
2018/07/03 Python
使用 css3 实现圆形进度条的示例
2017/07/05 HTML / CSS
德国最大的拼图在线商店：Puzzle.de
2016/12/17 全球购物
苏宁红孩子母婴商城：redbaby
2017/02/12 全球购物
iHerb俄罗斯：维生素、补品和天然产品
2020/07/09 全球购物
MIKI HOUSE美国官方网上商店：日本领先的婴儿和儿童高级时装品牌
2020/06/21 全球购物
历史专业个人求职信范文
2013/12/07 职场文书
普通党员四风问题对照检查材料
2014/09/27 职场文书
小学教师自我剖析材料
2014/09/29 职场文书
2015年企业员工工作总结范文
2015/05/21 职场文书
2019年第四季度财务部门工作计划
2019/11/02 职场文书
详解Vue3使用axios的配置教程
2022/04/29 Vue.js