DOM方式把层手动/自动变大

来源：互联网发布：单片机仿真器有什么用编辑：程序博客网时间：2024/06/11 07:51

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>层自动变大</title>
<script type="text/javascript">
var showIntervalId;
function showDiv(){
  showIntervalId = setInterval("inc()",100);//妹0.1秒调用一次inc()函数

}
function inc(){
  var div1 = document.getElementById("div1");//取得div1的元素

  var oldwidth = div1.style.width;//div1的宽度
  oldwidth = parseInt(oldwidth,10);//变为十进制
  var oldheight = div1.style.height;//div1的高度
  oldheight=parseInt(oldheight,10);//变为十进制

  if(oldwidth >=200){
   clearInterval(showIntervalId);//如果宽度大于200则停止计时器
  }
  oldwidth+=10; //宽度自动累加10xp
  oldheight+=10;//高度自动累加10px
  div1.style.width=oldwidth + "px";//重新设置宽度
  div1.style.height=oldheight + "px";//重新设置高度
}

</script>
</head>
<body>
<div id="div1" style="width:10px;height:100px;border:solid 1px red" />
自动变大变小自动变大变小自动变大变小自动变大变小自动变大变小自动变大变小自动变
大变小自动变大变小自动变大变小自动变大变小
自动变大变小自动变大变小自动变大变小自动变大变小自动变大变小自动变大变小自动变
大变小自动变大变小自动变大变小自动变大变小
</div>
<input type="button" value="手动放大" onclick="var div1=document.getElementById('div1');
div1.style.width='200px';div1.style.height='200px'
" />
<input type="button" value="自动放大" onclick="showDiv()"/>
</body>
</html>