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 相关文章推荐
js实现一个链接打开两个链接地址的方法
May 12 Javascript
jQuery实现返回顶部效果的方法
May 29 Javascript
js带点自动图片轮播幻灯片特效代码分享
Sep 07 Javascript
node.js下LDAP查询实例分享
Sep 30 Javascript
JS实现的简洁二级导航菜单雏形效果
Oct 13 Javascript
BootStrap中Datetimepicker和uploadify插件应用实例小结
May 26 Javascript
Bootstrap和Angularjs配合自制弹框的实例代码
Aug 24 Javascript
JavaScript浏览器对象模型BOM(BrowserObjectModel)实例详解
Nov 29 Javascript
微信小程序 request接口的封装实例代码
Apr 26 Javascript
Iphone手机、安卓手机浏览器控制默认缩放大小的方法总结(附代码)
Aug 18 Javascript
微信小程序之蓝牙的链接
Sep 26 Javascript
vue 项目接口管理的实现
Jan 17 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
全局记录程序片段的运行时间 正确找到程序逻辑耗时多的断点
2011/01/06 PHP
PHP用星号隐藏部份用户名、身份证、IP、手机号等实例
2014/04/08 PHP
使用php-timeit估计php函数的执行时间
2015/09/06 PHP
jquery tools之tabs 选项卡/页签
2009/07/25 Javascript
JQuery扩展插件Validate—4设置错误提示的样式
2011/09/05 Javascript
javascript firefox 自动加载iframe 自动调整高宽示例
2013/08/27 Javascript
js拼接html注意问题示例探讨
2014/07/14 Javascript
node.js中的fs.lstat方法使用说明
2014/12/16 Javascript
jQuery实现拖拽效果插件的方法
2015/03/23 Javascript
jquery使用animate方法实现控制元素移动
2015/03/27 Javascript
jquery实现的蓝色二级导航条效果代码
2015/08/24 Javascript
Bootstrap中文本框的宽度变窄并且加入一副验证码图片的实现方法
2016/06/23 Javascript
vue.js入门教程之绑定class和style样式
2016/09/02 Javascript
js前端导出Excel的方法
2017/11/01 Javascript
解决vue-cli webpack打包开启Gzip 报错问题
2019/07/24 Javascript
Python深入06——python的内存管理详解
2016/12/07 Python
对numpy中的where方法嵌套使用详解
2018/10/31 Python
Python3实现爬虫爬取赶集网列表功能【基于request和BeautifulSoup模块】
2018/12/05 Python
python与C、C++混编的四种方式(小结)
2019/07/15 Python
详解python opencv、scikit-image和PIL图像处理库比较
2019/12/26 Python
Python实现桌面翻译工具【新手必学】
2020/02/12 Python
Python实现链表反转的方法分析【迭代法与递归法】
2020/02/22 Python
django 模版关闭转义方式
2020/05/14 Python
html5是什么_动力节点Java学院整理
2017/07/07 HTML / CSS
家用个人磨皮机:Trophy Skin
2017/03/30 全球购物
加拿大拼图大师:Puzzle Master
2020/12/28 全球购物
关于.NET, HTML的五个问题
2012/08/29 面试题
shell程序中如何注释
2012/02/17 面试题
幼儿园家长寄语
2014/04/02 职场文书
四风剖析查摆对照检查材料思想汇报
2014/09/24 职场文书
2014年单位法制宣传日活动总结
2014/11/01 职场文书
优秀员工推荐材料
2014/12/20 职场文书
师德师风个人总结
2015/02/06 职场文书
小学思品教学反思
2016/02/20 职场文书
SQL Server查询某个字段在哪些表中存在
2022/03/03 SQL Server
进阶篇之linux环境下安装MySQL数据库
2022/04/09 MySQL