老虎机风格的数字jquery

slot machine style numbers jquery

本文关键字：jquery 数字 风格 老虎机      更新时间：2023-09-26

我试图在我的网站上实现一个老虎机风格的滚动数字，但我需要能够预设什么最终数字将是当插槽停止旋转，我真的可以使用一些明确的例子开始，甚至一个工作的例子，我可以操纵。有人有时间告诉我怎么做吗?作为我所寻找的参考，我一直试图得到老虎机插件位于这里:https://github.com/matthewlein/jQuery-jSlots为我需要的工作，但我无法找到一种方法来设置每个数字应该落在什么上，只能得到标准的随机结果。

您需要修改第160行的finish函数，以使用您的数字而不是随机的数字。您还需要与jSlots对象通信，告诉它使用哪些数字。

您应该能够稍微修改插件代码。这不是一个完整的解决方案，但这里有一些东西可以让你开始。改变playSlots函数接受一组数字，这将是你想要的最终数字。

base.playSlots = function(values) {
    base.values = values;
    ...etc
}

你可以这样称呼它:

playSlots([7, 7, 7]);

槽需要知道它们对应于数组中的哪个位置，因此您必须稍微修改一下设置。在setup函数中，您应该在实例化时将索引传递给Slot()对象。

for (var i = base.options.number - 1; i >= 0; i--){
    base.allSlots.push( new base.Slot(i) );
}

在槽构造函数中，应该存储对它的引用。

base.Slot = function(slotIndex) {
    this.slotIndex = slotIndex;
    etc...
};

最后，在最后一次旋转时调用的finish方法中，将生成的随机数替换为预先选择的数字。

finish : function() {
    ...etc
    var endNum = base.values[this.slotIndex];
    ..etc
}

我要做的是:

<div id="spinner"></div>

查找body标签并添加:onLoad="setbg() "

然后js代码

function roll() {
    var spinners = new Array;
    spinners[0] = spin(0);
    spinners[1] = spin(1);
    spinners[2] = spin(2);
    spinners[3] = spin(3);
    spinners[4] = spin(4);
    spinners[5] = spin(5);
    spinners[6] = spin(6);
    spinners[7] = spin(7);
    spinners[8] = spin(8);
    spinners[9] = spin(9);
    spinners[10] = spin(10);
    spinners[11] = spin(11);
    document.getElementById('spinner').innerHTML = '<img src="rolling.png"> math.floor(math.random()*spinners.length);
} 
function spin(spinnumber) {
    if (spinnumber == 0) {
        document.getElementById('spinner').innerHTML = '<img src="spinimage0.png" />';
    } else if (spinnumber == 1) {
        document.getElementById('spinner').innerHTML = '<img src="spinimage1.png" />';
    } else if (spinnumber == 2) {
        document.getElementById('spinner').innerHTML = '<img src="spinimage2.png" />';
    } else if (spinnumber == 3) {
        document.getElementById('spinner').innerHTML = '<img src="spinimage3.png" />';
    else if (spinnumber == 4) {
        document.getElementById('spinner').innerHTML = '<img src="spinimage4.png" />';
    } else if (spinnumber == 5) {
        document.getElementById('spinner').innerHTML = '<img src="spinimage5.png" />';
    } else if (spinnumber == 6) {
        document.getElementById('spinner').innerHTML = '<img src="spinimage6.png" />';
    } else if (spinnumber == 7) {
        document.getElementById('spinner').innerHTML = '<img src="spinimage7.png" />';
    } else if (spinnumber == 8) {
        document.getElementById('spinner').innerHTML = '<img src="spinimage8.png" />';
    } else if (spinnumber == 9) {
        document.getElementById('spinner').innerHTML = '<img src="spinimage9.png" />';
    } else if (spinnumber == 10) {
        document.getElementById('spinner').innerHTML = '<img src="spinimage10.png" />';
    } else if (spinnumber == 10) {
        document.getElementById('spinner').innerHTML = '<img src="spinimage10.png" />';
    } else if (spinnumber == 11) {
        document.getElementById('spinner').innerHTML = '<img src="spinimage11.png" />';
    }
}
function setbg({
    document.getElementById('spinner').innerHTML = '<img src="spinnerbg.png">'
};

注意，你需要spinnerbg.png, spinimage0-11.png, rolling.png这些图片。

相关文章：