黑马程序员技术交流社区

标题: Dom动态改变层大小 [打印本页]
作者: 柏云杉    时间: 2012-3-30 11:20
标题: Dom动态改变层大小
我在给层的width重新赋值的时候出现了问题。width一直没有改变




下面是全部js代码。 帮忙看看哪里出了问题。

作者: 莫洪刚    时间: 2012-3-30 22:21
我先把功能实现了：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
        window.onload = function () {
            var intelId;
            var addDiv = document.getElementById("addDiv");
            intelId = setInterval(function () {
                var widthDiv = parseInt(addDiv.style.width);
                var heightDiv = parseInt(addDiv.style.height);
                if (heightDiv <= 400) {
                    widthDiv = widthDiv + 0.5 * widthDiv;
                    heightDiv = heightDiv + 0.5 * heightDiv;
                    addDiv.style.width = widthDiv + "px";
                    addDiv.style.height = heightDiv + "px";
                }
                else {
                    clearInterval(intelId);
                }
            }, 100);
        }
    </script>
</head>
<body>
<div id="addDiv" style="width:60px; height:55px; background:Red; position:absolute; left:207px; top:203px;">
</div>
</body>
</html>

<body>
<div id="addDiv" style="width:60px; height:55px; background:Red; position:absolute; left:207px; top:203px;">
</div>

      window.onload = function () {
            var addDiv = document.getElementById("addDiv");
            setInterval(function () {
                var myWidth = parseInt(addDiv.style.width);
                myWidth = myWidth + 0.01 * myWidth;//得到60.6,永远
                alert(myWidth);
            }, 1000);
        }

       window.onload = function () {
            var addDiv = document.getElementById("addDiv");
            var myWidth = parseInt(addDiv.style.width);
            setInterval(function () {
                myWidth = myWidth + 0.01 * myWidth;//这样就可以得到加后的值了
                alert(myWidth);
            }, 1000);
        }
还是parseInt()这个方法的问题，
你第一次得到了层的高度和宽度,转换成整形成功，比如层的高度是50，宽度是60。
那么owidth+0.01*owidth就是一个小数,50+0.01*50=50.5，60+0.01*60=60.6
当第二次执行的时候层的高度和宽度都变成了50.5px,60.6px，
但是转换的时候,parseInt()这个方法还是把50.5px转换成了50,owidth=50,
60.6px，height=60，所以你得到的值是一样的。

解决方法:
owidth=parseInt(divsize.style.width)和
height=parseInt(divsize.style.height)
这以上两句放在函数changeSize的外面应该就可以了.（不要放在inc里面）
作者: 柏云杉    时间: 2012-3-31 13:33
莫洪刚 发表于 2012-3-30 22:21
我先把功能实现了：

很详细  谢谢
作者: 柏云杉    时间: 2012-3-31 13:37
莫洪刚 发表于 2012-3-30 22:21
我先把功能实现了：

还有个问题  我在setInterval和setTimeout里面获取不到window.event对象。怎么解决

setInterval（function（）{
       window.event;              // 这个是null。我也试过传参进来也没用。
},1000）
作者: 孙树迁    时间: 2012-3-31 14:37
关于 window.event ，昨天我刚才用过，不过还是不太清楚，但是会用了，
window.event 百度下，
window.event代表着事件对象的状态。只有在事件发生时生效。如鼠标、键盘等事件被触发时这个对象才存在。window.event这只在IE下是这样的。他并不是标准。。也就是说其他浏览器并不支持。在W3C标准支持的浏览器下事件对向是引发事件涵数的第一个参数，参数名随意,
  1. <html xmlns="http://www.w3.org/1999/xhtml">
  2. <head>
  3.     <title></title>
  4.     <script type="text/javascript">

  6.      //每个浏览器下用的不一样，window.event是 IE下的，event 是firfox等等其他的，
  7.         function getEvent(event) {
  8.             return event ? event : window.event;
  9.         }
  10.         function sayHi(event) {
  11.             alert("HI");
  12.             alert(getEvent(event));
  13.         }

  15.    
  16.     </script>
  17. </head>
  18. <body>
  19. <span onclick="sayHi(event)" >sayHi</span>

  21. </body>
  22. </html>
复制代码
作者: 柏云杉    时间: 2012-3-31 18:09
孙树迁 发表于 2012-3-31 14:37
关于 window.event ，昨天我刚才用过，不过还是不太清楚，但是会用了，
window.event 百度下，
window.even ...

谢谢                          



欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2