js的表单操作 简单计算器_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>

运行效果:

时间: 2024-11-03 13:00:52

js的表单操作 简单计算器_javascript技巧的相关文章

纯js代码实现简单计算器_javascript技巧

本文实例分享了纯js代码实现简单计算器代码,相信大家会喜欢.具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html> <html> <head> <title> new document </title> <script type="text/javascript"> function count(){ var txt1 = parseInt( document.getElementById(

纯JS实现可拖拽表单的简单实例_javascript技巧

因为要用到可拖拽表单,个人要比较喜欢自己动手,不怎么喜欢在不懂实现或者原理的情况下用插件,所以查找资料实现了一个. 思路:放入:用mousedown判断鼠标点击的位置是否在触发控件的位置,如果是,mousemove的时候clone一个控件,修改透明度,然后放入容器内的时候remove这个控件,并且在容器内生成一个放入的控件(放入的控件和触发的控件可以不一样) 拖拽:同样的, mousedown的时候判断是哪个控件,mousemove的时候需要放一个占位div放在原有的位置上,并将元素修改透明度然

js实现简单计算器_javascript技巧

参考部分资料,编写一个简单的计算器案例,虽然完成了正常需求,但是也有不满之处,待后续实力提升后再来补充,先把不足之处列出: 1:本来打算只要打开页面,计算器的输入框会显示一个默认为0的状态,但是在输入框加入默认显示为0的时候,选择数据输入时,该0会显示输入数字的前面,例如"0123",由于能力有限,待后续实力提升再来补充完善! 2:目前只能实现鼠标控制选择按钮,待完善键盘录入功能. 3:乘法的那个符号在本来想改成"×"这个符号的,待后续完善. 附图片一张: html

JS获取checkbox的个数简单实例_javascript技巧

JS获取多选框checkbox被选中的个数. var checkbox = document.getElementsByName("likes[]"); //此处通过此种方式才能获得多选框为数组. //like为name = "like[]" , 获得时必须加上[] var checked_counts = 0; for(var i=0;i<checkbox.length;i++){ if(checkbox[i].checked){ //被选中的checkbo

js调用屏幕宽度的简单方法_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="Co

js实现楼层效果的简单实例_javascript技巧

今天自己写个楼层效果,有一点烦躁,小地方犯错误.各位大神来修改不足啊!!! <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>楼层切换</title> <style> *{padding: 0;margin: 0;} li{list-style: none;} .main img{width:

js不间断滚动的简单实现_javascript技巧

CSS: ul, li { margin: 0; padding: 0; } #scrollDiv { width: 300px; height: 25px; line-height: 25px; border-bottom: #4c8cd1 1px solid; overflow: hidden; } #scrollDiv li { height: 25px; padding-left: 10px; } JS: <script> function AutoScroll(obj) { $(ob

js进行表单验证实例分析_javascript技巧

本文实例讲述了js进行表单验证的方法.分享给大家供大家参考.具体实现方法如下: 1. 传统的表单验证代码 复制代码 代码如下: <!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/199

JS添加删除DIV的简单实例_javascript技巧

JS添加删除DIV的简单实例 function addDiv(w,h){ //如果原来有"divCell"这个图层,先删除这个图层 deleteDiv(); //创建一个div var my = document.createElement("divCell"); //添加到页面 document.body.appendChild(my); //通过样式指定该div的位置方式,若是想要自己设置div的位置,这句话必须有,把它注释掉你就可以知道效果拉~试试看 my.s