边框颜色动画改变javascript [英] Border-color animation change javascript

问题描述

我是javascript的新手，我有一个挑战，我不知道从哪里开始。

I'm a newbie at javascript, and I have a challenge that I don't know where to start.

我需要开发一个类似于此的游戏动画。

I need to develop a game similar to this animation.

目标是点击播放动画的按钮然后点亮其中一个奖品。

The goal is to click on the button an animation plays and then one of the prizes light up.

任何人都可以通过javascript / jQuery帮助启动它？

Anybody could help to kick start this with javascript/jQuery?

提前致谢。

最好，$ b $bJoséMiranda

Best, José Miranda

推荐答案

你可以做一些喜欢：

注意：代码注释中的解释

更新：使用css类而不是边框​​颜色

Update : using css class instead of border color

function runplay(){
	var winNumber = 4;//here you can set your ajax call 
	    //or if use php to set the number like <? echo"var winNumber = 4;" ?>
	//return; //use if brwser error
	startplay(winNumber);

}
function startplay(winBoxNumber) {
	var loopcounts = 50;// all animation flash loop
	var selectfrom = 30;// end of random and select the wanted box
	var speed = 100;//animation speed 
	var mswitch = true;//true end with selected , false end with not selected
	var loops = 0;// dont change it
	var run = 1;// dont change it
	winBoxNumber -=1;//convert to real number becose array start from 0
	for (i = 0; i < loopcounts; i++) { 
		setTimeout(
		  function(){
		  	if ($('.box:eq('+run+')').hasClass('random_box_selected')) $('.box:eq('+run+')').removeClass("random_box_selected");
		  	if ($('.box:eq('+winBoxNumber+')').hasClass('win_box_selected'))$('.box:eq('+winBoxNumber+')').removeClass("win_box_selected");
		  	if(loops > selectfrom){
		  		 if(mswitch)$('.box:eq('+winBoxNumber+')').addClass("win_box_selected");
				  	mswitch = !mswitch;
			}else{
				run = Math.floor(Math.random() * 9);
		    	$('.box:eq('+run+')').addClass("random_box_selected");
			}
		  	loops+=1; 
		  }
		, 100 * (i + i/2) );
	}
}

.box{
	width: 24%;
	float: left;
	display: inline-block;
	border: 5px solid rgba(0,0,0,0);
	height: 29%;
	margin: 0.5%;
	background-color: #7f7f7f;

}
.btn {
  border-radius: 9px;
  color: #ffffff;
  font-size: 100%;
  background: #3498db;
  padding: 5px 10px 5px 10px;
  text-decoration: none;
  margin: 3%;
}
.random_box_selected{
	border: 5px solid #b55200;
}
.win_box_selected{
	border-color:#aa0000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn" id="gobtn" onclick="runplay()">start</button>
<div style="width: 100%;height: 70%;position: absolute;">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>

<div class="box">5</div>
<div class="box">6</div>
<div class="box">7</div>
<div class="box">8</div>

<div class="box">9</div>
<div class="box">10</div>
<div class="box">11</div>
<div class="box">12</div>
</div>

这篇关于边框颜色动画改变javascript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！