素材网 素材网

js随机抽奖塔罗牌翻转效果代码

下载资源()次

阅读次数()次

发布时间:2016-07-10

js随机抽奖塔罗牌翻转效果代码
分享到:

用法简介:

来源:xw素材网

js随机抽奖塔罗牌翻转效果代码。
文件引用:

<script type="text/javascript">
/*	排序*/
	var a=document.getElementsByTagName('button')[0];
	var b=document.getElementsByTagName('button')[1];
	var node=document.getElementById('demo');
	var d=node.getElementsByTagName('div');
	var p=document.getElementsByTagName('p');
	var arr=[];
	var timer;
	var stop;
	var t=0;
	var f=111111;
	var i=0;
	a.removeAttribute('disabled');
	for(var i=0;i<d.length;i++){
		for(var j=0;j<d.length;j++){
			if(d[j].getAttribute('ite')==i){
				arr.push(d[j])
			}
		}
	}
/*	添加css属性*/
	arr[-1]=arr[9];
	function run(){
		arr[t].style.backgroundColor='red';
		arr[t-1].style.backgroundColor='';
		t++;
		if(t==10) t=0;	
	}
/*		开始按钮*/
	function go(){
		for(var i=0;i<p.length;i++){
			p[i].style.display='block';
		}
		if(timer==null){
			timer=setInterval(run,50);
		}
		f=10000;
		clearInterval(stop);		
		b.removeAttribute('disabled');
		a.setAttribute('disabled','disabled');
	}
/*		结束按钮*/
	function end(){			
		b.setAttribute('disabled','disabled');
		if(f==10000){
			setTimeout(function(){
				clearInterval(timer);
				timer=null;
				f=t-1;
				alert('恭喜迩获得'+arr[f].getAttribute('vl'))
				arr[f].getElementsByTagName('p')[0].style.display='none';
			},3000);
		}		
		if(stop==null){
			stop=setInterval(suiji,100);
		}
	}
/*		随机颜色*/
	function changeColor(){
		var a=Math.floor(Math.random()*256);
		var b=Math.floor(Math.random()*256);
		var c=Math.floor(Math.random()*256);
		var colo='rgb('+a+','+b+','+c+')';
		return colo;
	}
/*获奖动作*/
	function suiji(){	
		arr[f].style.backgroundColor=changeColor();
		arr[f].style.transform=' rotateY('+i+'deg)';
		i+=10;
		if(i==90){
		}
		if(i>500){
			clearInterval(stop)
			i=0;
			stop=null;
			arr[f].style.transform=' rotateY('+0+'deg)';
			a.removeAttribute('disabled');
		}
	}
/*字幕动画*/
var tex=document.getElementsByTagName('h1');
setInterval(function(){
	tex[0].style.color=changeColor();
},500)
setInterval(function(){
	tex[1].style.color=changeColor();
},1000)
setInterval(function(){
	tex[2].style.color=changeColor();
},1000)
setInterval(function(){
	document.getElementById('kaluo').style.borderColor=changeColor();
},1000)
</script>


   

相关标签:

网友评论:

评论

发表 剩余字数:20

一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家社会集体的和公民的合法权益,不得利用本站制作、复制和传播不法有害信息!

二、互相尊重,对自己的言论和行为负责。

@ 2013 xwcms.net . All Rights Reserved. xw素材网 | 备案号:晋ICP备13005902号 联系管理员
×

邮箱订阅

什么是邮箱订阅?

邮箱订阅是xw素材网为jquery爱好者与web程序员提供一项以邮箱的方式发送最新jquery资源与素材资源的模式,用户只需在左侧填写正确的邮箱用户名与邮箱地址我们将每天推荐最新优质资源到用户邮箱。当然每份邮箱都会有一个取消订阅按钮,当用户点击取消按钮时我们将会停止对用户发送邮箱资源推送。再次感谢大家对xw素材网的支持与关注。