javascript - 如何创建水平老虎机效果?
问题描述
我有一项任务需要完成。
我需要一台水平老虎机,随机选择除其中 2 个项目之外的项目(因此,如果有 4 个项目,则旋转应仅停止其中 2 个项目),当旋转停止在项目时,它应自动重定向到另一个页面.
这是代码:
$(document).ready(function () {
// Clone the first element and append it to the end of the list
var list = $('#slotmachine>ul:first');
var firstItem = list.find('li:first');
firstItem.clone().appendTo(list);
function moveTo(val) {
val = -val % 1200;
if (val > 0) val -= 1200;
$('#slotmachine').css({
left: val
});
}
function spin(count) {
$('#slotmachine').stop().animate({
left: -1200
}, 2000, 'linear', function () {
if (count == 0) {
var slot = Math.floor(Math.random() * 4),
left = -slot * 200,
time = 2000 * slot / 4;
console.log(count, slot, top, time)
$(this).css({
left: 0
}).animate({
left: left
},time, 'easeOutQuad')
} else {
$(this).css({
left: 3
})
spin(count - 1)
};
});
}
$('#start').click(function () {
$('#slotmachine').css({
left: 0
})
spin(1)
});
$('#moveTo').click(function () {
moveTo($('#pos').val());
});
});
#viewbox {
display:flex;
width: 300px;
height: 200px;
border: solid 1px #000;
position: relative;
}
#viewbox .wrapper {
position: relative;
}
#viewbox ul {
display:flex;
list-style: none;
margin: 0;
padding: 0;
}
#viewbox li {
display: block;
width: 300px;
height: 200px;
text-align: center;
font-size: 170px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="viewbox">
<div class="wrapper" id="slotmachine">
<ul>
<li style="background:#f00">1</li>
<li style="background:#ff0">2</li>
<li style="background:#0f0">3</li>
<li style="background:#0ff">4</li>
</ul>
</div>
</div>
<input type="button" value="start" id="start" />|
<input type="button" value="move To" id="moveTo" />
<input type="text" id="pos" value="0" size="5" />
现在不是按照想要的方式工作......
我怎样才能做到这一点?
解决方案
推荐阅读
- php - Heroku:只有“/”在我的 php 应用程序上工作
- python - 如果 ttk 小部件名称或 StringVar 不是全局的,则默认文本不会显示
- python - 使用 sqlite3 和 python 按索引将表拆分为 2 个新表
- reactjs - 为什么调试器要求我再次弹出?
- django - 从模板将参数传递给视图函数而不在 URL 中公开它
- oracle - 如何为 PL SQL 中的现有表创建唯一 ID?
- python - 二进制中的负数(一个补码和二进制补码)
- r - 针织,在带有时间戳列的帧上使用 group_by()
- openshift - 如何将从 dockerhub/dockerio 导入的新 ImagestreamTag 添加到现有的 Imagestream?
- django - Django:将多个外键存储在模型的同一属性中