迷你计算机用的知识点
1、if..else if语句 2、switch语句 3、isNaN（） 判断输入值是否为数字 4、parseFloat() 将数字的字符串装换成number，防止使用运算符‘+’变成值变成字符串 5、Math.round() 将数值四舍五入取整 6、Dom的个元素获取 7.扩展：Math.floor（）是去除小数点后的数字取整 Math.random()随机获取0~1之间的数字
迷你计算机DOM
<div class="box"> <h2>小小计算器</h2> <form> <table> <tr> <td><input type="text" name="opt1" placeholder="操作数1" autofocus></td> <td> <select name="option"> <option value="null">请选择操作</option> <option value="add"> + </option> <option value="sub"> - </option> <option value="mul"> * </option> <option value="div"> / </option> </select> </td> <td><input type="text" name="opt2" placeholder="操作数2"></td> <td><button type="button">计算</button></td> </tr> <tr> <td colspan="2" align="right"><h3>结果:</h3></td> <td colspan="2" align="left"><h3 id="result"></h3></td> </tr> </table> </form> </div>
迷你计算机的JS
var opt1=document.getElementsByName('opt1')[0];
var opt2=document.getElementsByName('opt2')[0];
var bt=document.getElementsByTagName('button')[0];
bt.addEventListener('click',vaule);
function vaule() {
if(opt1.value.length===0){
alert('操作数1不能为空');
opt1.focus();
return false //退出函数，否则下面值会判断
}else if(isNaN(opt1.value)){
alert(('操作数1必须是数字'));
opt1.focus();
return false;
}else if(opt2.value.length===0){
alert('操作数2不能为空');
opt2.focus();
return false
}else if(isNaN(opt2.value)){
alert(('操作数1必须是数字'));
opt2.focus();
return false;
}else {
var data1=parseFloat(opt1.value); //parseFloat（） 将数值转换成number
var data2=parseFloat(opt2.value);
}
var option=document.getElementsByName('option')[0];
var optVale=option.value;
switch (optVale) {
case 'null':
alert('请选择操作符');
option.focus();
return false; //退出函数，否则会执行下面结果
case 'add':
var flag='+';
var data=data1+data2;
break;
case 'sub':
var flag='-';
var data=data1-data2;
break;
case 'mul':
var flag='*';
var data=data1*data2;
break;
case 'div':
var flag='/';
if(data2===0){
alert('除数不能为0')
}else {
var data=data1/data2;
data=Math.round(data*100)/100; //Math.round 将数值转换成整数
}
}
var result=document.getElementById('result');
var str='<span style="color:coral">';
str+=data1+flag+data2+'='+data;
str+='</span>';
result.innerHTML=str;
}
</script>
