我对这个轮盘赌剧本有一些问题。我从这里的另一篇文章中找到了这个，但是当我为自己尝试时，似乎有一些问题。该脚本应该在加载时生成图像，但它不想加载超过1.我也出于某种原因似乎无法在文本框中键入。在这个脚本的CodePen（https://codepen.io/kingkode/pen/EyKwJW）上一切正常！代码在笔中。如果有人可以在本地尝试一下，看看他们是否也无法让他们在自己身边工作，那真的很有帮助。谢谢！
if (!String.prototype.format) {
String.prototype.format = function () {
var args = arguments;
return this.replace(/{(\d+)}/g, function (match, number) {
return typeof args[number] != 'undefined'
? args[number]
: match;
});
};
}
$(window).load(function () {
console.log('Window loaded!');
var $roulette = $('#roulette-images-list');
$roulette.html(generateRouletteImages(200));
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
function getPositionOfWinner(winner) {
var widthOfImg = $('#roulette-img0').width();
var minDistanceToEdgeAllowed = 4;
var desiredImg = $('#roulette-img' + winner.toString());
var minPos = desiredImg.position().left + minDistanceToEdgeAllowed;
var maxPos = desiredImg.position().left + widthOfImg - minDistanceToEdgeAllowed;
console.log('Position.Left: {0} | Offset().left: {1}'.format(desiredImg.position().left, desiredImg.offset().left));
return getRandomInt(minPos, maxPos);
}
function printLeftOfRouletteSpinner() {
var pos = $('#roulette-images-list').position().left;
if (pos % 100 == 0) console.log(pos);
}
function timelineFinished(destImg){
// this is where you highlight your winner
$('#roulette-img' + destImg).css({
border: '3px solid red'
});
}
function rouletteSpin(destImg) {
if (!destImg) destImg = 40;
var tl = new TimelineMax({ onUpdate: printLeftOfRouletteSpinner, onComplete: timelineFinished, onCompleteParams: [ destImg ] }),
rouletteImages = $('#roulette-images-list'),
startLeft = rouletteImages.position().left;
tl//.to(rouletteImages, 0, {x: 5000})
.to(rouletteImages, 10, {x: getPositionOfWinner(destImg) * -1, ease:Power4.easeOut});
// .to(rouletteImages, 0, {x: 0}, 11);
}
$('#spin').click(function () {
var winner = $('#winner-text').val();
//if (isNaN(winner) || winner > 49) alert('Enter 0 through 49');
rouletteSpin(winner);
});
function getRandomColor() {
return ((1 << 24) * Math.random() | 0).toString(16)
}
function generateRouletteImages(howMany) {
var imgTemplate = '<img src="{0}" class="{1}" id="roulette-img{2}">';
var imgClass = 'roulette-img';
var imgSrcTemplate = 'http://placehold.it/{0}/{1}?text={2}';
var completedRouletteImages = [];
for (var i = 0; i < howMany; i++) {
var color = getRandomColor();
var imgSrc = imgSrcTemplate.format('80', color, i);
var completedTemplate = imgTemplate.format(imgSrc, imgClass, i);
completedRouletteImages.push('<li>' + completedTemplate + '</li>');
}
return completedRouletteImages;
}
});@import url("//fonts.googleapis.com/css?family=Poiret+One");
html {
min-height: 100%;
}
body {
height: 100%;
font-family: 'Poiret One', sans-serif;
/*background-color: #2B2F34;*/
/*background-image: url('/img/bg.png');*/
background: #4d4d4d;
background: -moz-radial-gradient(center, ellipse cover, #4d4d4d 0%, #333 56%, #1a1a1a 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #4d4d4d), color-stop(56%, #333), color-stop(100%, #1a1a1a));
background: -webkit-radial-gradient(center, ellipse cover, #4d4d4d 0%, #333 56%, #1a1a1a 100%);
background: -o-radial-gradient(center, ellipse cover, #4d4d4d 0%, #333 56%, #1a1a1a 100%);
background: -ms-radial-gradient(center, ellipse cover, #4d4d4d 0%, #333 56%, #1a1a1a 100%);
background: radial-gradient(ellipse at center, #4d4d4d 0%, #333 56%, #1a1a1a 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4d4d4d', endColorstr='#1a1a1a', GradientType=1);
}
#roulette-container {
margin-top: 25px;
overflow: hidden;
border: 1px solid #000;
-webkit-box-shadow: 3px 3px 50px 0 #2b2b2b;
box-shadow: 3px 3px 20px 0 #2b2b2b;
}
#roulette-container-background {
margin: 0;
position: absolute;
left: 0;
width: 100%;
height: 100%;
-webkit-animation: sparkle 1500ms linear infinite;
-moz-animation: sparkle 1500ms linear infinite;
-o-animation: sparkle 1500ms linear infinite;
animation: sparkle 1500ms linear infinite;
opacity: 0.05;
}
#roulette-images {
height: 82px;
}
#roulette-images ul {
position: absolute;
left: 50%;
margin: 0;
padding: 0;
white-space: nowrap;
}
#roulette-images ul li {
display: inline;
list-style-type: none;
margin-right: 4px;
}
#roulette-images ul li img {
min-width: 80px;
margin-top: 1px;
margin-bottom: 1px;
}
.roulette-indicator {
position: absolute;
left: 50%;
margin: 0;
width: 1px;
height: 82px;
background-color: #fff;
z-index: 1;
}
.input-section {
margin-top: 50px;
}<div class="container">
<div class="row">
<div id="roulette-container" class="col-md-10 col-md-offset-1">
<div id="roulette-container-background"></div>
<div id="roulette-indicator-id" class="roulette-indicator"></div>
<div id="roulette-images">
<ul id="roulette-images-list">
<li><img src="http://placehold.it/50/d9d9d9?text=1"></li>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="form form-group input-section">
<label for="winner-text" style="color: #ffffff; text-align: center;font-size: 24pt">Winner: </label>
<input type="text" class="input-lg" id="winner-text" style="width:auto;margin:auto">
<button class="btn btn-info" id="spin">Spin</button>
</div>
<span style="color:#ffffff;font-align:center;">Enter a number between 0 and 199.</span>
</div>
</div>
</div>
答案 0 :(得分：0)
尝试浏览器调试。例如，如果使用Firefox或IE查看开发人员工具，并查找任何控制台错误（这是您将看到缺少资源的地方）。尝试在调试器中使用断点，看看有什么或没有被击中。这通常是故障排除的良好起点。