js的表单操作 简单计算器


Posted in Javascript onDecember 29, 2011

代码:

<!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; 
color:#333; 
} 
#jsq input{/*输入框样式*/ 
border:#ccc 1px solid; 
border-right:#e2e2e2 1px solid; 
border-bottom:#e2e2e2 1px solid; 
height:18px; 
line-height:18px; 
padding:3px; 
} 
#jsq span{ 
color:#999 
} 
#jsq input.btn{/*按钮样式*/ 
border:#e6e6e6 1px solid; 
background-color:#e2e2e2; 
width:30px; 
height:24px; 
text-align:center; 
line-height:16px; 
cursor:pointer; 
margin:0 3px; 
color:#999; 
} 
#jsq input.btn:hover{/*按钮悬浮样式*/ 
border:#e2e2e2 1px solid; 
background-color:#f2f2f2; 
color:#333; 
} 
</style> 
<script type="text/javascript"> 
function imyeah(type){ //计算函数 
var result=0; 
num1 = Number(document.jisuanqi.num1.value); //Number()可以吧字符串强制转换成数字,例如“123abc”会转换成“123” 
num2 = Number(document.jisuanqi.num2.value); 
if(num1=="" || num2==""){return false;} //如果没输入计算数则不执行 
switch(type){ //判断要执行的计算符号 
case 0:result=num1+num2;break; //计算“+” 
case 1:result=num1-num2;break; //计算“-” 
case 2:result=num1*num2;break; 
case 3:result=num1/num2;break; 
case 4:result=num1%num2;break; 
} 
document.jisuanqi.jieguo.value=result; //显示计算结果 
} 
</script> 
</head> 
<body> 
<form name="jisuanqi" id="jsq" action="" method="get" /> 
<p> 第一个数: 
<input type="text" size="10" name="num1" value="" /> 
</p> 
<p> 第二个数: 
<input type="text" size="10" name="num2" value="" /> 
</p> 
<p> 计算结果: 
<input type="text" size="10" name="jieguo" onClick="imyeah(0)" value="+" onfocus="this.select()" /> <span>左键"+",右键"选中复制"</span> 
</p> 
<p> 
<input type="button" class="btn" value="–" onClick="imyeah(1)"/> <!--定义按钮--> 
<input type="button" class="btn" value="×" onClick="imyeah(2)"/ > 
<input type="button" class="btn" value="÷" onClick="imyeah(3)"/> 
<input type="button" class="btn" value="%" onClick="imyeah(4)"/> 
</p> 
</body> 
</html>

运行效果:
js的表单操作 简单计算器
Javascript 相关文章推荐
JavaScript 对象、函数和继承
Jul 07 Javascript
js点击button按钮跳转到另一个新页面
Oct 10 Javascript
angularJS 入门基础
Feb 09 Javascript
浅谈Javascript数组的使用
Jul 29 Javascript
jQuery toggle 代替方法
Mar 22 Javascript
基于WebUploader的文件上传js插件
Aug 19 Javascript
JS简单获取客户端IP地址的方法【调用搜狐接口】
Sep 05 Javascript
javascript 闭包详解及简单实例应用
Dec 31 Javascript
javaScript+turn.js实现图书翻页效果实例代码
Feb 16 Javascript
AngularJS 实现购物车全选反选功能
Oct 24 Javascript
js实现按钮开关单机下拉菜单效果
Nov 22 Javascript
Vue通过阿里云oss的url连接直接下载文件并修改文件名的方法
Dec 25 Vue.js
javascript写的简单的计算器,内容很多,方法实用,推荐
Dec 29 #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
You might like
新版mysql+apache+php Linux安装指南
2006/10/09 PHP
深入php define()函数以及defined()函数的用法详解
2013/06/05 PHP
CodeIgniter框架数据库事务处理的设计缺陷和解决方案
2014/07/25 PHP
详解HTTP Cookie状态管理机制
2016/01/14 PHP
PHP ajax+jQuery 实现批量删除功能实例代码小结
2018/12/06 PHP
JavaScript CSS修改学习第六章 拖拽
2010/02/19 Javascript
写了10年的Javascript也未必全了解的连续赋值运算
2011/03/25 Javascript
node.js中的forEach()是同步还是异步呢
2015/01/29 Javascript
JS实现的文字与图片定时切换效果代码
2015/10/06 Javascript
JS实现按比例缩放图片的方法(附C#版代码)
2015/12/08 Javascript
浅谈js控制li标签排序问题 js调用php函数的方法
2016/10/16 Javascript
ReactJs快速入门教程(精华版)
2016/11/28 Javascript
深入理解Angularjs中$http.post与$.post
2017/05/19 Javascript
js轮播图的插件化封装详解
2017/07/17 Javascript
node.js实现的装饰者模式示例
2017/09/06 Javascript
node.js利用socket.io实现多人在线匹配联机五子棋
2018/05/31 Javascript
微信小程序的线程架构【推荐】
2019/05/14 Javascript
js实现随机点名功能
2020/12/23 Javascript
python模块简介之有序字典(OrderedDict)
2016/12/01 Python
Python打开文件,将list、numpy数组内容写入txt文件中的方法
2018/10/26 Python
对Python3 序列解包详解
2019/02/16 Python
浅析python 中大括号中括号小括号的区分
2019/07/29 Python
Python中 CSV格式清洗与转换的实例代码
2019/08/29 Python
Python统计分析模块statistics用法示例
2019/09/06 Python
Python基于Dlib的人脸识别系统的实现
2020/02/26 Python
python脚本使用阿里云slb对恶意攻击进行封堵的实现
2021/02/04 Python
Tory Burch德国官网:美国时尚生活品牌
2018/01/03 全球购物
沙龙级头发造型工具:FOXYBAE
2018/07/01 全球购物
Hotels.com印度:酒店预订
2019/05/11 全球购物
店长岗位职责
2013/11/21 职场文书
二年级体育教学反思
2014/01/15 职场文书
大学生作弊检讨书
2014/02/19 职场文书
2014全年工作总结
2014/11/27 职场文书
给老婆的检讨书
2015/01/27 职场文书
你喜欢篮球吗?Python实现篮球游戏
2021/06/11 Python
anaconda python3.8安装后降级
2021/06/11 Python