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 相关文章推荐
超酷的网页音乐播放器DewPlayer使用方法
Dec 18 Javascript
jQuery实现订单提交页发送短信功能前端处理方法
Jul 04 Javascript
jQuery基于BootStrap样式实现无限极地区联动
Aug 26 Javascript
微信小程序 绘图之饼图实现
Oct 24 Javascript
vue的传参方式汇总和router使用技巧
May 22 Javascript
解决循环中setTimeout执行顺序的问题
Jun 20 Javascript
angular6.x中ngTemplateOutlet指令的使用示例
Aug 09 Javascript
Vue源码探究之状态初始化
Nov 14 Javascript
JavaScript常见继承模式实例小结
Jan 11 Javascript
ES6中Set和Map数据结构,Map与其它数据结构互相转换操作实例详解
Feb 28 Javascript
原生JavaScript实现日历功能代码实例(无引用Jq)
Sep 23 Javascript
基于javascript的无缝滚动动画1
Aug 07 Javascript
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
php学习之 循环结构实现代码
2011/06/09 PHP
PHP autoload与spl_autoload自动加载机制的深入理解
2013/06/05 PHP
关于php操作mysql执行数据库查询的一些常用操作汇总
2013/06/24 PHP
php中如何防止表单的重复提交
2013/08/02 PHP
PHP和JavaScrip分别获取关联数组的键值示例代码
2013/09/16 PHP
PHP开发中常见的安全问题详解和解决方法(如Sql注入、CSRF、Xss、CC等)
2014/04/21 PHP
php数组添加与删除单元的常用函数实例分析
2015/02/16 PHP
使用JavaScript创建新样式表和新样式规则
2016/06/14 PHP
浅谈Laravel中的一个后期静态绑定
2017/08/11 PHP
对php 判断http还是https,以及获得当前url的方法详解
2019/01/15 PHP
firefox中JS读取XML文件
2006/12/21 Javascript
JQuery 绑定事件时传递参数的实现方法
2009/10/13 Javascript
jquery实现当滑动到一定位置时固定效果
2014/06/17 Javascript
jQuery中:reset选择器用法实例
2015/01/04 Javascript
Javascript 高阶函数使用介绍
2015/06/15 Javascript
vue 实现通过手机发送短信验证码注册功能
2018/04/19 Javascript
详解Vue的watch中的immediate与watch是什么意思
2019/12/30 Javascript
vue 解决setTimeOut和setInterval函数无效报错的问题
2020/07/30 Javascript
javascript实现电商放大镜效果
2020/11/23 Javascript
python的变量与赋值详细分析
2017/11/08 Python
linecache模块加载和缓存文件内容详解
2018/01/11 Python
详解Python之unittest单元测试代码
2018/01/24 Python
终端命令查看TensorFlow版本号及路径的方法
2018/06/13 Python
对pandas将dataframe中某列按照条件赋值的实例讲解
2018/11/29 Python
PyTorch 对应点相乘、矩阵相乘实例
2019/12/27 Python
关于Pytorch的MNIST数据集的预处理详解
2020/01/10 Python
基于python和flask实现http接口过程解析
2020/06/15 Python
python绘制分布折线图的示例
2020/09/24 Python
奥巴马演讲稿
2014/01/08 职场文书
区三好学生主要事迹
2014/01/30 职场文书
年终总结会主持词
2014/03/25 职场文书
道德模范事迹材料
2014/12/20 职场文书
监考失职检讨书
2015/01/26 职场文书
学习社交礼仪心得体会
2016/01/22 职场文书
一条慢SQL语句引发的改造之路
2022/03/16 MySQL
Python Pandas解析读写 CSV 文件
2022/04/11 Python