"June" Children's Day is coming, hurry to end up like the stars rain it ~ ta

Preface: single came off tomorrow - oh ha ha ha said to be very efficacious than Heart ❥ (^ _-)

Tomorrow is Children's Day, as a child of my own first wish a happy holiday, I give myself the fate of the stars rain it ~

Then I also dig the majority of the Friends of Happy Children's Day of Kazakhstan, we are all lovely kids drop ~

Description: This rain results achieved under the stars is actually very simple, can be achieved mainly by a timer and create elements, another thing is to use a random number oh man of few words, said the code below:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    #box{
        position: relative;
        width: 100%;
        height: calc(100vh - 60px);
        background: #000;
        margin-top: 20px;
    }
    h2{
        text-align: center;
        color:pink;
        padding-top: 50px;
    }
    span{
        position: absolute;
        color: yellow;
        font-size: 40px;
    }
    </style>
</head>
<body>
    <input type="button" value="start" id="btn">
    <div id="box"></div>
<script>
    document.getElementById('btn').onclick=function(){
        setInterval(function(){
            let x = parseInt(Math.random()*1100);
            let y = parseInt(Math.random()*600);
            let size = parseInt(Math.random()*40+12)
            document.getElementById('box').innerHTML="<h2>爱你哦~</h2><span id='xing'>★</span>";
            let xing = document.getElementById('xing');
            xing.style.top = y + "px";
            xing.style.left = x + "px";
            xing.style.fontSize = size + "px";
        },10)
    }
    
</script>
</body>
</html> 
复制代码

Because I can not record images gif format, here is not the renderings friends - we can run on their own to see Oh

Note: There must span plus give position: Absolute , let it flow out of the document, otherwise the position of the stars is no way to move

After the Stars and Rain achieve this, we can achieve love rain, money rain, a shower of petals, photo rain ..... In short, what you want to rain on what the rain is not very romantic le (boo ~ focus is do not spend money (bad smile)) ~

Thought for a moment, I still love the rain to parts of the code has come to let go, though, and above there is no difference, then why should I put it? ? In order to facilitate their future copy (a word or lazy chant)

span{
        position: absolute;
        color: red;
        font-size: 40px;
        transform: rotate(90deg);
    }
    
<script>
    document.getElementById('btn').onclick=function(){
        setInterval(function(){
            let x = parseInt(Math.random()*1100);
            let y = parseInt(Math.random()*600);
            let size = parseInt(Math.random()*80+12)
            document.getElementById('box').innerHTML="<h2>爱你哦~</h2><span id='xing'>❥</span>";
            let xing = document.getElementById('xing');
            xing.style.top = y + "px";
            xing.style.left = x + "px";
            xing.style.fontSize = size + "px";
        },10)
    }
    
</script>
复制代码

Finally: I want to say, although the realization of the code is not difficult, but I have the heart ah ~

Most Finally, once again I wish you all Happy Children's Day it ~

Reproduced in: https: //juejin.im/post/5cf0f365f265da1b7b317147

"June" Children's Day is coming, hurry to end up like the stars rain it ~ ta

Guess you like