jQuery。缓慢增长的div框框儿 

<!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>
    <title></title>
    <style type="text/css">
        #tempdiv
        {
            width: 10px;
            height: 10px;
            border-color: Blue;
            border-width: 1px;
            border-style: dotted;
        }
    </style>
    <script type="text/javascript">

        var intervalid;
        function OnloadEvent() {
            intervalid = setInterval("GrowingDiv()", 1);
        }
        function f1() {
            var tempdiv = document.getElementById("tempdiv");
            tempdiv.innerHTML = tempdiv.innerHTML + "a";
        }

        function GrowingDiv() {
            var tempdiv = document.getElementById("tempdiv");
            //alert(tempdiv.style.width);
            var tempwidth = tempdiv.style.width;
            var tempheight = tempdiv.style.height;

            tempwidth = parseInt(tempwidth, 10);
            tempheight = parseInt(tempheight, 10);

            if (tempwidth > 1000) {
                clearInterval(intervalid);
            }

            tempwidth = tempwidth + 1;
            tempdiv.style.width = tempwidth + "px";

            tempheight = tempheight + 1;
            tempdiv.style.height = tempheight + "px";
            //clearInterval(intervalid);
        }
    </script>
</head>
<body onload="OnloadEvent()">
    <div id="tempdiv" style="width: 10px; height: 10px;">
    </div>
</body>
</html>

 

posted on 2015-03-20 10:07  大牛牛  阅读(337)  评论(0)    收藏  举报

导航