计算器：加，减，乘，除：
实例
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>计算器</title>
<style>
*{margin:0;padding:0;}
.box{
width:500px;
height:350px;
background:#eee;
margin:50px auto;
}
.box1 input{
color:red;
text-indent:15px;
}
.box1 input,button{
width:100px;
height:30px;
border:none;
background:#00cc99;
}
.box1 select{
width:100px;
height:30px;
border:none;
}
button:hover{
background:#ff3300;
color:#fff;
cursor:pointer;
}
.box h2{
margin-top:20px;
font-size:16px;
}
.box h2 span{
color:red;
font-size:14px;
text-indent:20px;
}
</style>
</head>
<body>
<div class="box">
<div class="box1">
<input type="text" name="input1">
<select name="jisuan" id="">
<option value="null">请选择操作</option>
<option value="add">+</option>
<option value="sub">-</option>
<option value="mul">*</option>
<option value="div">/</option>
</select>
<input type="text" name="input2">
<button type="button" name="button">计算</button>
</div>
<h2>运算结果：<span id="info"></span></h2>
</div>
<script>
// 1、获取元素
// 通过name来获取元素（name获取的元素是数组方式，所以要给元素一个准确的索引来确定元素是谁）
var inp1 = document.getElementsByName('input1')[0],
inp2 = document.getElementsByName('input2')[0],
jisuan = document.getElementsByName('jisuan')[0],
bth = document.getElementsByName('button')[0],
// 通过id来获取元素
info = document.getElementById('info');
// 2、点击事件：onclick
bth.onclick = function (){
var data1 = 0;
var data2 = 0;
// 判断选择的value值是否正确
if(inp1.value.length === 0){
alert('第一个值不能为空');
inp1.focus();
return false;
}else if(isNaN(inp1.value)){
alert('第一个值必须为数字');
inp1.focus();
}
if(inp2.value.length === 0){
alert('第二个值不能为空');
inp1.focus();
}else if(isNaN(inp2.value)){
alert('第二个值必须为数字');
inp1.focus();
}else{
// input的value值必须转为数值类型，否则不能运算
data1 = parseFloat(inp1.value);
data2 = parseFloat(inp2.value);
}
var timp =0;
var flag ='';
switch (jisuan.value){
case 'null':
alert('操作不对');
break;
case 'add':
flag ='+';
timp = data1 + data2;
break;
case 'sub':
flag ='-';
timp = data1 - data2;
break;
case 'mul':
flag ='*';
timp = data1 * data2;
break;
case 'div':
flag ='/';
if(data2 === 0){
alert('第二个值,除数不能为0');
inp2.focus();
inp2.value = '';
}else{
timp = data1 / data2;
// 留余数二位
timp = Math.round(timp * 100) / 100;
};
break;
}
var str;
str = data1 + ' ' +flag + ' ' + data2 + ' = ' + timp;
info.innerHTML = str;
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
在这个小案例中用到了，获取元素的方法,点击事件方法，类型转换:parseFloat();，取值范围：Math.round()，判断：isNaN()，拼接方法
