<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body{text-align: center;}
#ad{height: 5px;display: none;}
</style>
<script type="text/javascript">
function getStyle(obj,attr){
if(obj.currentStyle) {
return obj.currentStyle[attr];
} else if(window.getComputedStyle) {
return window.getComputedStyle(obj,null)[attr];
}
}
window.onload=function(){
var oad=document.getElementById('ad');
var oadHeight=getStyle(oad,"height");
var timer;
var h=0;
setTimeout(function(){
oad.style.display="block";
timer=setInterval(function(){//执行不到
if(oadHeight<200){
h=h+5;
oad.style.height=h+'px';
}else{
clearInterval(timer);
}
},30)
},2000)
}
</script>
</head>
<body>
<div id="ad"><img src="./ad.png"></div>
<div class="goods"><img src="./数字商品-10-23.jpg"></div>
</body>
<html>
因为oadHeight返回的不是"5"，而是"5px", 那么在执行if(oadHeight < 200）的时候，就相当于if("5px" < 200), 在js中一个非纯数字字符串在和一个数字比较时，该字符串被自动转成NaN, 而NaN与任何数字比较都会返回false，因此以上判断返回false,所以执行else中的语句，清楚定时器timer，结束。因此就出现了执行不到if中语句的现象。