js实现下雪情景

来源：互联网发布：java比较日期相差天数编辑：程序博客网时间：2024/05/16 12:31
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>js实现下雪情景</title>    <style>        body{            background-color: blue;        }        img{            position: absolute;            width: 20px;            height: 20px;        }    </style>    <script>        window.onload = function () {            setInterval(function () {                //随机产生一个雪花                var img = document.createElement("img");                var src = document.createAttribute("src");                src.value = "image/flake.png";                img.setAttributeNode(src);                document.body.appendChild(img);                var left = parseInt(Math.random()*window.innerWidth);                img.style.left = left+"px";                img.style.top = "0px";                //让雪花往下掉                var timer = setInterval(function () {                    var currentTop = parseInt(getStyle(img,"top"));                    currentTop = currentTop + 1;                    if(currentTop > window.innerHeight-20){                        currentTop = window.innerHeight - 20;                        img.style.top = currentTop+"px";                        clearInterval(timer);                    }                    img.style.top = currentTop+"px";                },10);            },500);        }        //获取style样式的css属性,考虑兼容;ie,火狐/谷歌;        function getStyle(parm1,parm2) {            return parm1.currentStyle ? parm1.currentStyle[parm2] : getComputedStyle(parm1)[parm2];  //parm1,要改变的元素代替名;parm2,要改变的属性名        }    </script></head><body></body></html>
阅读全文
0 0