JavaScript 类型转换
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.92、隐式转换 “==” 和 “-”
if('3'==3)
{
alert('相等');
}
// 弹出'相等'
alert('10'-3); // 弹出73、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.03.27 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录