liuhaifeng315的gravatar头像
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>

效果展示

html开发数字雨特效代码

最代码最近下载分享源代码列表最近下载
最代码最近浏览分享源代码列表最近浏览
fangengen 昨天
暂无贡献等级
740833561 前天
暂无贡献等级
wrtiooo 3月22日
暂无贡献等级
乘虚猿 3月19日
最代码贡献等级说明
qinxiaorui 3月19日
最代码贡献等级说明
liu655145 3月17日
暂无贡献等级
wuyong 3月15日
暂无贡献等级
1369022841 3月13日
暂无贡献等级
RhonaCui 3月10日
暂无贡献等级
chiyuderen 3月9日
暂无贡献等级
顶部 客服 微信二维码 底部
>扫描二维码关注最代码为好友扫描二维码关注最代码为好友