JavaScript 类型转换

138 阅读1分钟

仅供学习,转载请注明出处

1、直接转换 parseInt() 与 parseFloat()

alert('12'+7); //弹出127
alert( parseInt('12') + 7 );  //弹出19 
alert( parseInt(5.6));  // 弹出5
alert('5.6'+2.3);  // 弹出5.62.3
alert(parseFloat('5.6')+2.3);  // 弹出7.8999999999999995
alert(0.1+0.2); //弹出 0.3000000000000004
alert((0.1*100+0.2*100)/100); //弹出0.3
alert((parseFloat('5.6')*100+2.3*100)/100); //弹出7.9

2、隐式转换 “==” 和 “-”

if('3'==3)
{
    alert('相等');
}
// 弹出'相等'

alert('10'-3);  // 弹出7

3、NaN 和 isNaN

alert( parseInt('123abc') );  // 弹出123
alert( parseInt('abc123') );  // 弹出NaN

练习

制作一个计算器,可以计算加、减、乘、除,用户输入非数字或者置空可以提示

实现了基本算法之后,再加上输入非数字的判断,如下:

完整代码如下:

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script type="text/javascript">
		window.onload = function(){
			// 获取文本框的两个数值
			var oNum1 = document.getElementById('input1');
			var oNum2 = document.getElementById('input2');

			var iBtn1 = document.getElementById('input3');
			var iBtn2 = document.getElementById('input4');
			var iBtn3 = document.getElementById('input5');
			var iBtn4 = document.getElementById('input6');

			var iSpan = document.getElementsByTagName('span')[0];

			// 加法
			iBtn1.onclick = function(){
				checkNum(oNum1.value,oNum2.value); //检查输入是否为数字
				var result = parseFloat(oNum1.value) + parseFloat(oNum2.value);
				result = Math.floor(result);
				iSpan.innerHTML = result;
			}

			// 减法
			iBtn2.onclick = function(){
				checkNum(oNum1.value,oNum2.value); //检查输入是否为数字
				var result = parseFloat(oNum1.value) - parseFloat(oNum2.value);
				result = Math.floor(result);
				iSpan.innerHTML = result;
			}

			// 乘法
			iBtn3.onclick = function(){
				checkNum(oNum1.value,oNum2.value); //检查输入是否为数字
				var result = parseFloat(oNum1.value) * parseFloat(oNum2.value);
				result = Math.floor(result);
				iSpan.innerHTML = result;
			}

			// 除法
			iBtn4.onclick = function(){
				checkNum(oNum1.value,oNum2.value); //检查输入是否为数字
				var result = parseFloat(oNum1.value) / parseFloat(oNum2.value);
				result = Math.floor(result);
				iSpan.innerHTML = result;
			}

			function checkNum(num1,num2){

                    var reg=/^[0-9]+.?[0-9]*$/; //判断字符串是否为数字 ,判断正整数用/^[1-9]+[0-9]*]*$/

                    if(!reg.test(num1)){
                        alert("请输入数字");
                        return false;
                    }

                    if(!reg.test(num2)){
                        alert("请输入数字");
                        return false;
                    }

            }

		}
	</script>
</head>
<body>
	<input type="text" name="num1" id="input1">
	<input type="text" name="num2" id="input2">
	<input type="button" name="fn" id="input3" value="加">
	<input type="button" name="fn" id="input4" value="减">
	<input type="button" name="fn" id="input5" value="乘">
	<input type="button" name="fn" id="input6" value="除">
	<div>结果:<span></span></div>
</body>
</html>