手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >js的表单操作 简单计算器
js的表单操作 简单计算器
摘要:代码:复制代码代码如下:写给新手:js简单计算器body{font-size:12px;color:#333;}#jsqinput{/*输入...

代码:

复制代码 代码如下:

<!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" value="+" onfocus="this.select()" /> <span>左键"+",右键"选中复制"</span>

</p>

<p>

<input type="button" value="–"/> <>

<input type="button" value="×"/ >

<input type="button" value="÷"/>

<input type="button" value="%"/>

</p>

</body>

</html>

运行效果:

js的表单操作 简单计算器1

【js的表单操作 简单计算器】相关文章:

angular2使用简单介绍

javascript操作ul中li的方法

详解AngularJS中的表格使用

javascript实现表格增删改操作实例详解

Node.js的MongoDB驱动Mongoose基本使用教程

理解javascript定时器中的单线程

javascript结合Flexbox简单实现滑动拼图游戏

js实现字符串转日期格式的方法

js实现发送验证码后的倒计时功能

javascript实现简单的省市区三级联动

精品推荐
分类导航