E Vlad E Vlad - 3 months ago 22
Javascript Question

javascript rain effect

I am very new in javascrip,and I want to make a div in a page with rain effect,I made something,but I don't know how to make it move,It draw random blue points in my div and I want them to go down,this is my code:

<html>
<head>

<style>
.punct
{
background-color:blue;
position:absolute;
width:2px;
height:6px;
}
</style>

<script type="text/javascript">


var cleft;
var ctop;

var x=document.getElementById ('content');
function strop (cleft,ctop,d)
{
if (x==null) x="<div class='punct' style='top:"+ctop+"px;left:"+cleft+"px'></div>";
else x=x+"<div class='punct' id='"+d+"' style='top:"+ctop+"px;left:"+cleft+"px'> </div>";
document.getElementById ('content').innerHTML=x;
}

function randomFromInterval(from,to)
{
return Math.floor(Math.random()*(to-from+1)+from);
}

var y=30;
function start ()
{
if (y!=0){
var a;
var b;
cleft=a;
ctop=b;
a=randomFromInterval (20,1000);
b=randomFromInterval (10,50);
strop(a,b,y);
setTimeout (function () {start ()},500);
y--;
}
}


</script>

</head>
<body>
<div id='content' style='border:2px solid black; height:500px; width:1000px;'></div>
<button onclick='start()'>Start </button>
</body>
</html>

Answer

Javascript only solution \o/

        <script type="text/javascript">
var cleft;
var ctop;

var x=document.getElementById ('content');
function strop (cleft,ctop,d)
{
    if (x==null) x="<div class='punct' id='"+d+"' style='top:"+ctop+"px;left:"+cleft+"px'></div>";
    else x=x+"<div class='punct' id='"+d+"' style='top:"+ctop+"px;left:"+cleft+"px'></div>";

    document.getElementById ('content').innerHTML=x;
}

function randomFromInterval(from,to)
{
    return Math.floor(Math.random()*(to-from+1)+from);
}

var y=130;
var speed = 2;

function start ()
{
    if (y!=0){
        var a;
        var b;
        cleft=a;
        ctop=b;
        a=randomFromInterval (20,1000);
        b=randomFromInterval (10,500);
        strop(a,b,y);
        y--;
    }

    // Move existing droplets
    for (var i=1; i<=130; i++)
    {
        var el = document.getElementById(i.toString());
        if (el !== null)
        {
            var tp = parseInt(el.style.top) + speed + i*.0125;
            if (tp > 500) 
                tp -= 500;
            el.style.top = tp + "px";
        }
    }

    setTimeout (function () {start ()},10);
}

</script>