JavaScript 类型转换
2019-03-27 本文已影响135人
Devops海洋的渔夫
仅供学习，转载请注明出处
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>
2019年全套Java、Android、HTML5前端、Python、大数据视频，价值数万资源大放送
寻找资源的地址如下：
扫描微信公众号
寻找价值数万的视频资源
