前端如何用原生js开发烟花效果?

前端开发要写原生js吗?|js前端开发 设计作业|网站前端开发

html 代码

<!DOCTYPE html>
<head>
<metacharset=”UTF-8″>
<title>前端js开发:烟花效果</title>
<style type=”text/css”>
body{
background:black;
overflow:hidden;
}
div{
position:absolute;
}
</style>
</head>
<body>
<script type=”text/javascript”>
window.onload = function () {}
functionrgb(){//创建颜色随机值
varstr=Math.ceil(Math.random() *16777215).toString(16);
while (str.length <6) {
str=’0’+str;
}
returnstr;
}
document.onclick = function (event) {
varoEvent= event || window.event;
vart=oEvent.clientY;
varl=oEvent.clientX;
varoRdeDiv=document.createElement(‘div’);//创建一个div
oRdeDiv.style.width =’4px’;
oRdeDiv.style.height =’30px’;
oRdeDiv.style.background =’red’;
document.body.appendChild(oRdeDiv);//向body添加一个div元素
oRdeDiv.style.top = document.documentElement.clientHeight+’px’;
oRdeDiv.style.left =oEvent.clientX+’px’;
//alert(oRdeDiv.offsetTop)
vartimer=setInterval(function(){//让创建的这个div从下往上打上来!
oRdeDiv.style.top =oRdeDiv.offsetTop-20+’px’;
if (oRdeDiv.offsetTop<=t) {
clearInterval(timer);
document.body.removeChild(oRdeDiv);
vari=0;
varaDiv= [];
for (vari=0;i<50;i++) {//创建多个div
varoDiv=document.createElement(‘div’);
oDiv.style.background =’#’+rgb();
oDiv.style.width =’2px’;
oDiv.style.height =’2px’;
oDiv.style.left =l+’px’;
oDiv.style.top =t+’px’;
document.body.appendChild(oDiv);
aDiv.push(oDiv);
oDiv.speedX=Math.random() *20-10;//添加一个x轴的速度
oDiv.speedY=Math.random() *20-10;//添加一个y轴的速度
}
varnewtimer=setInterval(function(){//让每个div随机往下掉,以达到烟花效果
varcount=0;
for (vari=0;i<aDiv.length;i++) {
if (!aDiv[i]) continue;//当aDiv[i]为空不再进行循环操作
aDiv[i].style.left =aDiv[i].offsetLeft+aDiv[i].speedX+’px’;
aDiv[i].style.top =aDiv[i].offsetTop+aDiv[i].speedY+’px’;
aDiv[i].speedY++;//y轴的速度越来越大以便烟花向下掉
varwinWidth= document.documentElement.clientWidth|| document.body.clientWidth;
varwinHeight= document.documentElement.clientHeight|| document.body.clientHeight;
if (aDiv[i].offsetLeft<0||aDiv[i].offsetLeft>winWidth||aDiv[i].offsetTop>
winHeight) {
document.body.removeChild(aDiv[i]);
aDiv[i] =null;
}
count++;
}
if (count==0) {//当所有的div小块掉出屏幕是清除定时器
clearInterval(newtimer);
}
},30)
}
},30)
}
</script>
</body>
</html>

前端开发js插件|js前端开发从入门到精通|js是由前端开发员写的吗?

» 本文来自:前端开发者 » 《前端如何用原生js开发烟花效果?》
» 本文链接地址:https://www.rokub.com/3753.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!