I'm a beginner in the world of JavaScript and I'm trying to create a div on a webpage with a rain effect. I've managed to generate random blue points within the div, but I'm struggling to make them move downwards. Here's the code I have so far:
<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>