JS案例----雪花降落

最新推荐文章于 2024-01-12 10:46:12 发布

码农不秃呀

最新推荐文章于 2024-01-12 10:46:12 发布

阅读量108

点赞数

文章标签： javascript html 前端

本文链接：https://blog.csdn.net/weixin_53271010/article/details/126816802

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            height: 100vh;
            background-image: url(img/snow.jpg);
            block-size: cover;
            background-position: center center;
            overflow: hidden;
        }
        p{
            position: absolute;
            top: 50px;
            color:#fff ;
            text-align: center;
        }
    </style>
</head>
<body>
    <!-- <p>❄</p> -->
</body>
<script>
    //获取元素
    var body = document.querySelector("body")
    var timer = null;

    timer = setInterval(function(){
        //1.创建雪花
        if(rand(0,100)<50){
            createSnow();
        }      
        //2.雪花的移动
        snowMove();
       
    },30)

//1.创建
function createSnow(){
    var p = document.createElement('p')
    p.innerHTML='❄'
    //字体大小
    var fs= rand(10,60)
    p.style.fontSize = fs + 'px';
    //宽高
    p.style.width = fs +'px'
    p.style.height = fs +'px'
    //确定left
    var l =rand(0,window.innerWidth - fs)
    p.style.left = l + 'px';
    //雪花的移动速度
    p.speedY = rand(3,10)
    body.appendChild(p)
}

//2.雪花的移动
function snowMove(){
    //获取所有的雪花
    var snows = document.querySelectorAll('p')
    //改变每一个雪花的top值
    for(var i=0;i<snows.length;i++){
        snows[i].style.top = snows[i].offsetTop+snows[i].speedY+'px'
        if(snows[i].offsetTop>window.innerHeight){
            //飞出了屏幕
            body.removeChild(snows[i])
            i--;
        }
    }
}
    function rand(min,max){
        return Math.round(Math.random()*(max-min)+min)
    }
</script>
</html>

效果图