我有一个从 0 到 9 的随机数轮。轮子向下或向上旋转以落在随机数上。我怎样才能使轮子只旋转下来? (一旦它达到 9,下一个数字是 0、1、2...9、0、1、2)而不必有很多 div。
function roll() {
var randomNum = Number((Math.random() * 100).toFixed(2));
var firstDigit = Number(Math.floor((randomNum) / 10 - 5));
var win = firstDigit;
if (win > 4) {
var rollm = win * 40 - 40 * 15;
document.getElementById("roll").style = "margin-top: " + rollm + "px ";
}
if (win < 4) {
var rollm = 180 - 40 * win - 380;
document.getElementById("roll").style = "margin-top: " + rollm + "px ";
}
if (win == 4) {
var rollm = 360;
document.getElementById("roll").style = "margin-top: -" + rollm + "px ";
}
}
body {
color: #fff;
}
#roll {
transition: .5s ease;
}
.ticker {
width: 0;
height: 0;
border-style: solid;
border-width: 15px 0px 15px 26px;
border-color: transparent #fff transparent;
margin: 0 -20px;
transform: translateY(-75px);
}
#roll {
width: 40px;
height: 360px;
background: #0077ee;
margin: 0 auto;
}
.roll-h {
width: 40px;
height: 120px;
margin: 0 auto;
overflow: hidden;
}
.shadow {
height: 40px;
margin: 0 auto;
transform: translateY(40px);
}
.black,
.his-h {
width: 40px;
height: 40px;
font-size: 20px;
line-height: 40px;
font-weight: 700;
text-align: center;
float: left;
}
.black {
background: black;
}
.floatleft {
float: left;
}
<div style="margin:0 auto; display:inline-block">
<div class="shadow"></div>
<div class="roll-h">
<div id="roll">
<div class="black">9</div>
<div class="black">0</div>
<div class="black">1</div>
<div class="black">2</div>
<div class="black">3</div>
<div class="black">4</div>
<div class="black">5</div>
<div class="black">6</div>
<div class="black">7</div>
<div class="black">8</div>
<div class="black">9</div>
<div class="black">0</div>
</div>
</div>
<div class="ticker"></div>
</div>
<button onClick="roll()" id="spin">Spin</button>
最佳答案
我稍微修改了您的代码段以实现您要求的行为。
但是有两个问题。首先,您将需要几乎两倍的 div 来正确地设置动画。其次,transitionend
事件是not supported in all browsers , 有时它需要加上前缀,所以如果你关心支持 IE < 10 之类的东西,那么开箱即用它不适合你。
编辑
如 the other answer 中所述您可以考虑仅在单击按钮时重置“滚轮”位置,而不是使用 transitionend
事件。这很好,但它需要更复杂的实现,因为您需要记住(以某种方式)您需要重置到哪个位置。
function roll() {
var win = Math.floor(Math.random() * 10);
var roll = document.getElementById("roll");
var onTransitionend = function () {
roll.classList.remove("animated");
roll.style = "margin-top: " + (- win * 40) + "px ";
roll.removeEventListener("transitionend", onTransitionend);
};
roll.classList.add("animated");
roll.style = "margin-top: " + (- win * 40 - 400) + "px ";
roll.addEventListener("transitionend", onTransitionend);
}
body {
color: #fff;
}
#roll.animated {
transition: .5s ease;
}
.ticker {
width: 0;
height: 0;
border-style: solid;
border-width: 15px 0px 15px 26px;
border-color: transparent #fff transparent;
margin: 0 -20px;
transform: translateY(-75px);
}
#roll {
width: 40px;
// height: 360px;
background: #0077ee;
margin: 0 auto;
}
.roll-h {
width: 40px;
height: 120px;
margin: 0 auto;
overflow: hidden;
}
.shadow {
height: 40px;
margin: 0 auto;
transform: translateY(40px);
}
.black,
.his-h {
width: 40px;
height: 40px;
font-size: 20px;
line-height: 40px;
font-weight: 700;
text-align: center;
float: left;
}
.black {
background: black;
}
.floatleft {
float: left;
}
<div style="margin:0 auto; display:inline-block">
<div class="shadow"></div>
<div class="roll-h">
<div id="roll">
<div class="black">9</div>
<div class="black">0</div>
<div class="black">1</div>
<div class="black">2</div>
<div class="black">3</div>
<div class="black">4</div>
<div class="black">5</div>
<div class="black">6</div>
<div class="black">7</div>
<div class="black">8</div>
<div class="black">9</div>
<div class="black">0</div>
<div class="black">1</div>
<div class="black">2</div>
<div class="black">3</div>
<div class="black">4</div>
<div class="black">5</div>
<div class="black">6</div>
<div class="black">7</div>
<div class="black">8</div>
<div class="black">9</div>
<div class="black">0</div>
</div>
</div>
<div class="ticker"></div>
</div>
<button onClick="roll()" id="spin">Spin</button>
关于javascript - 如何制作数字轮循环?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41658679/