写给新手:js的表单操作(三) 简单计算器
2011-12-26 12:34
357 查看
javascript写的简单的加减乘除计算器,里面涉及到一些方法还是很实用的哦,新手不要错过。
代码:
查看代码
运行效果:
代码:
查看代码
<!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的表单操作(二) 简单的表单提交验证
- js的表单操作 简单计算器
- js的表单操作 简单计算器
- js中对arry数组的各种操作小结 瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据 web前端url传递值 js加密解密 HTML中让表单input等文本框为只读不可编辑的方法 js监听用户的键盘敲击事件,兼容各大主流浏览器 HTML特殊字符
- js表单操作,常用
- js 节点 document html css 表单节点操作
- JS中用document对象操作form表单 案例
- 正则表达式基本语法及表单验证操作详解【基于JS】
- js 父子窗口的表单操作--示例代码
- js对表单数据的抓取与通过ajax方式提交(新手笔记)
- 写给Node.js新手的7个小技巧
- VueJS表单控件操作
- Laravel 中使用 Vue.js 实现基于 Ajax 的表单提交错误验证操作
- js 表单操作
- 关于使用js进行表单提交操作引发的表单重复提交问题
- 写给Node.js新手的7个小技巧
- js-操作表单
- js控制表单操作的常用代码小结
- MVC + AngularJS 初体验(实现表单操作)
- js表单操作