liuhaifeng315
2017-01-07 10:37:15
html开发数字雨特效代码
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>数字雨</title> <script src="http://code.jquery.com/jquery-latest.js"></script> <style> *{margin: 0 auto; padding: 0 auto} body{ background-color: black; color: limegreen; position: absolute; } </style> <script> var stopmap={}; $(function(){ var num= cnum(); showtop(num); setInterval(function(){ var num= cnum(); showtop(num); },8000); }); function showtop(num){ for(var i=0;i<num.length;i++){ xunh(num[i]); } } function xunh(aa){ var dwidht= $(innerWidth); var y=0; var data=new Date().getTime(); var time=Math.round(Math.random()*1000); var lable_Id=time+data; var x=Math.floor(Math.random()*(dwidht[0]-100)); var lable="<label id='"+lable_Id+"' style='left:"+x+"px;top:"+y+"px;position:absolute'>"+aa+"</label>"; $(document.body).append(lable); var stopInterval= setInterval(function(){ movy(lable_Id) },Math.round(Math.random()*1000)); stopmap[lable_Id]=stopInterval; } function movy(lableId){ var hwidht= $(innerHeight); var top=$('#'+lableId).css("top"); if(top==undefined){ return; } top=top.substr(0,top.length-2); top=Number(top)+Math.round(Math.random()*5); // console.log(top); if(top>(hwidht[0]-100)){ $('#'+lableId).remove(); console.log(stopmap[lableId]); clearInterval(stopmap[lableId]); return; } $('#'+lableId).css("top",top+"px"); } //随机的数字 function cnum(){ var num=[]; // var chars = ['0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F','G', 'H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z']; var chars = ['☂','✲','♫','♪','❤','☃']; for(var i=0;i<100;i++){ // num.push(chars[Math.floor(Math.random()*35)]); num.push(chars[Math.floor(Math.random()*6)]); // console.log(num[i]); } return num; } </script> </head> <body> </body> </html>
效果展示
猜你喜欢
请下载代码后再发表评论
![最代码相关代码源代码列表](https://static.zuidaima.com/resource/img/heart_ico.png)
![最代码最近下载分享源代码列表](https://static.zuidaima.com/resource/img/heart_ico.png)
![最代码最近浏览分享源代码列表](https://static.zuidaima.com/resource/img/cattle_ico.png)
求学的熊猫 LV8
5月20日
17693282606 LV12
2023年12月21日
dingyuhan LV1
2023年12月17日
许方彬 LV1
2023年12月17日
fesfefe LV13
2023年11月18日
jiemomo LV12
2023年10月19日
yinxunyu12138 LV11
2023年10月10日
ccx0590
2023年9月25日
暂无贡献等级
821068650
2023年7月17日
暂无贡献等级
初心不负丶方得始终 LV10
2023年7月3日