javascript - 在 js 插槽应用程序中设置最小值和最大值

标签 javascript jquery html slot

我找到了这个 Jquery slots master，现在我想添加功能。

当按下按钮时，它会显示 0001 到 9999 之间的 4 位随机数。 但我想将它的限制设置在 0001-9885 之间

You can see this here

它说请添加更多详细信息，我想我说得够多了......

HTML

<div class="fancy">
    <ul class="slot">
        <!-- In reverse order so the 7s show on load -->
        <li><span>1</span></li>
        <li><span>9</span></li>
        <li><span>8</span></li>
        <li><span>7</span></li>
        <li><span>6</span></li>
        <li><span>5</span></li>
        <li><span>4</span></li>
        <li><span>3</span></li>
        <li><span>2</span></li>
        <li><span>0</span></li>
    </ul>
    <input type="button" id="playFancy" value="Let's Roll" style="background: #ff6a00;  background-image: -webkit-linear-gradient(top, #ff6a00, #ee0979);  background-image: -moz-linear-gradient(top, #ff6a00, #ee0979);  background-image: -ms-linear-gradient(top, #ff6a00, #ee0979);  background-image: -o-linear-gradient(top, #ff6a00, #ee0979);  background-image: linear-gradient(to bottom, #ff6a00, #ee0979);  -webkit-border-radius: 13;  -moz-border-radius: 13;  border-radius: 13px;  font-family: Arial;  color: #ffffff;  font-size: 19px;  padding: 10px 20px 10px 20px;  text-decoration: none; background: #ee0979;  background-image: -webkit-linear-gradient(top, #ee0979, #ff6a00);  background-image: -moz-linear-gradient(top, #ee0979, #ff6a00);  background-image: -ms-linear-gradient(top, #ee0979, #ff6a00);  background-image: -o-linear-gradient(top, #ee0979, #ff6a00);  background-image: linear-gradient(to bottom, #ee0979, #ff6a00);  text-decoration: none;">
    </div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="../jquery.easing.1.3.js" type="text/javascript" charset="utf-8"></script>
<script src="../jquery.jSlots.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">


    // fancy example
    $('.fancy .slot').jSlots({
        number : 4,
        winnerNumber : 1,
        spinner : '#playFancy',
        easing : 'easeOutSine',
        time : 6000,
        loops : 5,
        onStart : function() {
            $('.slot').removeClass('winner');
        },
        onWin : function(winCount, winners) {
            // only fires if you win

            $.each(winners, function() {
                this.addClass('winner');
            });

            // react to the # of winning slots                 
            if ( winCount === 1 ) {
                //alert('You got ' + winCount + ' 7!!!');
            } else if ( winCount > 1 ) {
                //alert('You got ' + winCount + ' 7’s!!!');
            }

        }
    });


</script>

“jQueryjSlots.min.js”

(function(a){a.jSlots=function(c,b){var d=this;d.$el=a(c);d.el=c;    d.$el.data("jSlots",d);d.init=function(){d.options=a.extend({},a.jSlots.defaultOptions,b);d.setup();d.bindEvents();};a.jSlots.defaultOptions={number:3,winnerNumber:1,spinner:"",spinEvent:"click",onStart:a.noop,onEnd:a.noop,onWin:a.noop,easing:"swing",time:7000,loops:6};d.randomRange=function(e,f){return Math.floor(Math.random()*(1+f-e))+e;};d.isSpinning=false;d.spinSpeed=0;d.winCount=0;d.doneCount=0;d.$liHeight=0;d.$liWidth=0;d.winners=[];d.allSlots=[];d.setup=function(){var e=d.$el;var g=e.find("li").first();d.$liHeight=g.outerHeight();d.$liWidth=g.outerWidth();d.liCount=d.$el.children().length;d.listHeight=d.$liHeight*d.liCount;d.increment=(d.options.time/d.options.loops)/d.options.loops;e.css("position","relative");g.clone().appendTo(e);d.$wrapper=e.wrap('<div class="jSlots-wrapper"></div>').parent();d.$el.remove();for(var f=d.options.number-1;f>=0;f--){d.allSlots.push(new d.Slot());}};d.bindEvents=function(){a(d.options.spinner).bind(d.options.spinEvent,function(e){if(!d.isSpinning){d.playSlots();}});};d.Slot=function(){this.spinSpeed=0;this.el=d.$el.clone().appendTo(d.$wrapper)[0];this.$el=a(this.el);this.loopCount=0;this.number=0;};d.Slot.prototype={spinEm:function(){var e=this;e.$el.css("top",-d.listHeight).animate({top:"0px"},e.spinSpeed,"linear",function(){e.lowerSpeed();});},lowerSpeed:function(){this.spinSpeed+=d.increment;this.loopCount++;if(this.loopCount<d.options.loops){this.spinEm();}else{this.finish();}},finish:function(){var e=this;var g=d.randomRange(1,d.liCount);var f=-((d.$liHeight*g)-d.$liHeight);var h=((this.spinSpeed*0.5)*(d.liCount))/g;e.$el.css("top",-d.listHeight).animate({top:f},h,d.options.easing,function(){d.checkWinner(g,e);});}};d.checkWinner=function(f,g){d.doneCount++;g.number=f;if((a.isArray(d.options.winnerNumber)&&d.options.winnerNumber.indexOf(f)>-1)||f===d.options.winnerNumber){d.winCount++;d.winners.push(g.$el);}if(d.doneCount===d.options.number){var e=[];a.each(d.allSlots,function(h,i){e[h]=i.number;});if(a.isFunction(d.options.onEnd)){d.options.onEnd(e);}if(d.winCount&&a.isFunction(d.options.onWin)){d.options.onWin(d.winCount,d.winners,e);}d.isSpinning=false;}};d.playSlots=function(){d.isSpinning=true;d.winCount=0;d.doneCount=0;d.winners=[];if(a.isFunction(d.options.onStart)){d.options.onStart();}a.each(d.allSlots,function(e,f){this.spinSpeed=0;this.loopCount=0;this.spinEm();});};d.onWin=function(){if(a.isFunction(d.options.onWin)){d.options.onWin();}};d.init();};a.fn.jSlots=function(b){if(this.length){return this.each(function(){(new a.jSlots(this,b));});}};})(jQuery);

"jQueryEasing1.3.js"

jQuery.easing['jswing'] = jQuery.easing['swing'];

jQuery.extend( jQuery.easing,
{
def: 'easeOutQuad',
swing: function (x, t, b, c, d) {
    //alert(jQuery.easing.default);
    return jQuery.easing[jQuery.easing.def](x, t, b, c, d);
},
easeInQuad: function (x, t, b, c, d) {
    return c*(t/=d)*t + b;
},
easeOutQuad: function (x, t, b, c, d) {
    return -c *(t/=d)*(t-2) + b;
},
easeInOutQuad: function (x, t, b, c, d) {
    if ((t/=d/2) < 1) return c/2*t*t + b;
    return -c/2 * ((--t)*(t-2) - 1) + b;
},
easeInCubic: function (x, t, b, c, d) {
    return c*(t/=d)*t*t + b;
},
easeOutCubic: function (x, t, b, c, d) {
    return c*((t=t/d-1)*t*t + 1) + b;
},
easeInOutCubic: function (x, t, b, c, d) {
    if ((t/=d/2) < 1) return c/2*t*t*t + b;
    return c/2*((t-=2)*t*t + 2) + b;
},
easeInQuart: function (x, t, b, c, d) {
    return c*(t/=d)*t*t*t + b;
},
easeOutQuart: function (x, t, b, c, d) {
    return -c * ((t=t/d-1)*t*t*t - 1) + b;
},
easeInOutQuart: function (x, t, b, c, d) {
    if ((t/=d/2) < 1) return c/2*t*t*t*t + b;
    return -c/2 * ((t-=2)*t*t*t - 2) + b;
},
easeInQuint: function (x, t, b, c, d) {
    return c*(t/=d)*t*t*t*t + b;
},
easeOutQuint: function (x, t, b, c, d) {
    return c*((t=t/d-1)*t*t*t*t + 1) + b;
},
easeInOutQuint: function (x, t, b, c, d) {
    if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b;
    return c/2*((t-=2)*t*t*t*t + 2) + b;
},
easeInSine: function (x, t, b, c, d) {
    return -c * Math.cos(t/d * (Math.PI/2)) + c + b;
},
easeOutSine: function (x, t, b, c, d) {
    return c * Math.sin(t/d * (Math.PI/2)) + b;
},
easeInOutSine: function (x, t, b, c, d) {
    return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;
},
easeInExpo: function (x, t, b, c, d) {
    return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b;
},
easeOutExpo: function (x, t, b, c, d) {
    return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
},
easeInOutExpo: function (x, t, b, c, d) {
    if (t==0) return b;
    if (t==d) return b+c;
    if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b;
    return c/2 * (-Math.pow(2, -10 * --t) + 2) + b;
},
easeInCirc: function (x, t, b, c, d) {
    return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;
},
easeOutCirc: function (x, t, b, c, d) {
    return c * Math.sqrt(1 - (t=t/d-1)*t) + b;
},
easeInOutCirc: function (x, t, b, c, d) {
    if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b;
    return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b;
},
easeInElastic: function (x, t, b, c, d) {
    var s=1.70158;var p=0;var a=c;
    if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
    if (a < Math.abs(c)) { a=c; var s=p/4; }
    else var s = p/(2*Math.PI) * Math.asin (c/a);
    return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
},
easeOutElastic: function (x, t, b, c, d) {
    var s=1.70158;var p=0;var a=c;
    if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
    if (a < Math.abs(c)) { a=c; var s=p/4; }
    else var s = p/(2*Math.PI) * Math.asin (c/a);
    return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
},
easeInOutElastic: function (x, t, b, c, d) {
    var s=1.70158;var p=0;var a=c;
    if (t==0) return b;  if ((t/=d/2)==2) return b+c;  if (!p) p=d*(.3*1.5);
    if (a < Math.abs(c)) { a=c; var s=p/4; }
    else var s = p/(2*Math.PI) * Math.asin (c/a);
    if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
    return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;
},
easeInBack: function (x, t, b, c, d, s) {
    if (s == undefined) s = 1.70158;
    return c*(t/=d)*t*((s+1)*t - s) + b;
},
easeOutBack: function (x, t, b, c, d, s) {
    if (s == undefined) s = 1.70158;
    return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
},
easeInOutBack: function (x, t, b, c, d, s) {
    if (s == undefined) s = 1.70158; 
    if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
    return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
},
easeInBounce: function (x, t, b, c, d) {
    return c - jQuery.easing.easeOutBounce (x, d-t, 0, c, d) + b;
},
easeOutBounce: function (x, t, b, c, d) {
    if ((t/=d) < (1/2.75)) {
        return c*(7.5625*t*t) + b;
    } else if (t < (2/2.75)) {
        return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
    } else if (t < (2.5/2.75)) {
        return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
    } else {
        return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
    }
},
easeInOutBounce: function (x, t, b, c, d) {
    if (t < d/2) return jQuery.easing.easeInBounce (x, t*2, 0, c, d) * .5 + b;
    return jQuery.easing.easeOutBounce (x, t*2-d, 0, c, d) * .5 + c*.5 + b;
}

});

最佳答案 

function myFunction() {
    var x = document.getElementById("demo")
    x.innerHTML = Math.floor((Math.random() * 8556) + 1);
}
<!DOCTYPE html>
<html>
<body>

<p>Click the button to display a random number between 1 and 8556.</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

</body>
</html>

Math.floor((Math.random() * 9885) + 1);

不确定这是否是您要找的。

希望对你有帮助

- https://www.w3schools.com/jsref/jsref_random.asp

关于javascript - 在 js 插槽应用程序中设置最小值和最大值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45482659/

上一篇：javascript - 如何在受 javascript 滚动和高度范围限制的滚动时按比例减小元素高度？

下一篇：javascript - 从 d3 选择中获取原始元素

相关文章：

javascript - 在 Redux 存储中存储不可序列化的数据项的实际风险是什么？

javascript - 我在为家庭作业构建模块时获得了意想不到的值(value)

jquery - CSS3 旋转替代方案？

javascript - 如何检测在javascript中单击了哪个按钮？

html - 如何使 Bootstrap 进度条在 <td> 之间跨越整个宽度？

javascript - 在 if block 中访问变量

javascript - Mozilla Firefox 边距空间

javascript - 警报后背景变化

javascript - PHP JSON header 导致 JSON.parse 出错(使用 jQuery)

jquery - 如何在css中单击图标时更改颜色

©2024 IT工具网  联系我们