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 相关文章推荐
一个加密JavaScript的开源工具PACKER2.0.2
Nov 04 Javascript
28个JS验证函数收集
Mar 02 Javascript
关于javascript DOM事件模型的两件事
Jul 22 Javascript
探讨jQuery的ajax使用场景(c#)
Dec 03 Javascript
jquery自定义下拉列表示例
Apr 25 Javascript
jQuery中prevUntil()方法用法实例
Jan 08 Javascript
javascript给span标签赋值的方法
Nov 26 Javascript
js判断移动端是否安装某款app的多种方法
Dec 18 Javascript
深入理解JS addLoadEvent函数
May 20 Javascript
Angular.js实现获取验证码倒计时60秒按钮的简单方法
Oct 18 Javascript
Vue.js实现图片的随意拖动方法
Mar 08 Javascript
JS原生瀑布流效果实现
Apr 26 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
You might like
杏林同学录(四)
2006/10/09 PHP
PHP怎么实现网站保存快捷方式方便用户随时浏览
2013/08/15 PHP
php中怎么搜索相关联数组键值及获取之
2013/10/17 PHP
PHP树的深度编历生成迷宫及A*自动寻路算法实例分析
2015/03/10 PHP
基于jquery的关于动态创建DOM元素的问题
2010/12/24 Javascript
用JavaScript仿PS里的羽化效果代码
2011/12/20 Javascript
文本框input聚焦失焦样式实现代码
2012/10/12 Javascript
通过一段代码简单说js中的this的使用
2013/07/23 Javascript
js鼠标悬浮出现遮罩层的方法
2015/01/28 Javascript
深入理解js数组的sort排序
2016/05/28 Javascript
Javascript 实现匿名递归的实例代码
2017/05/25 Javascript
浅谈vue,angular,react数据双向绑定原理分析
2017/11/28 Javascript
vue2过滤器模糊查询方法
2018/09/16 Javascript
在vue项目中引入highcharts图表的方法
2019/01/21 Javascript
javascript面向对象创建对象的方式小结
2019/07/29 Javascript
layui复选框限制选择个数的方法
2019/09/18 Javascript
浅析JavaScript 函数防抖和节流
2020/07/13 Javascript
[10:18]2018DOTA2国际邀请赛寻真——找回自信的TNCPredator
2018/08/13 DOTA
python str与repr的区别
2013/03/23 Python
用Python制作简单的朴素基数估计器的教程
2015/04/01 Python
django orm 通过related_name反向查询的方法
2018/12/15 Python
django使用xadmin的全局配置详解
2019/11/15 Python
Python图像处理库PIL的ImageFilter模块使用介绍
2020/02/26 Python
django执行数据库查询之后实现返回的结果集转json
2020/03/31 Python
python输出数学符号实例
2020/05/11 Python
python线程池 ThreadPoolExecutor 的用法示例
2020/10/10 Python
python+flask编写一个简单的登录接口
2020/11/13 Python
python 使用openpyxl读取excel数据
2021/02/18 Python
CSS3实现的渐变幻灯片效果
2020/12/07 HTML / CSS
Lululemon加拿大官网:加拿大知名体育服装零售商
2019/04/12 全球购物
中东奢侈品购物网站:Ounass
2020/09/02 全球购物
小学校园活动策划
2014/01/30 职场文书
建筑工地宣传标语
2014/06/18 职场文书
观看《信仰》心得体会
2016/01/15 职场文书
vue.js 使用原生js实现轮播图
2022/04/26 Vue.js
码云(gitee)通过git自动同步到阿里云服务器
2022/12/24 Servers