Preface: Two days ago, I was looking for components online and accidentally discovered the "SlotMachine component" of our childhood game console effect. After browsing it, it evokes the memories of my childhood.
Let’s take you to take a look at such a magical component - SlotMachine.
1. Component preview
Let's get a simple effect first
Think it's too simple? Don't worry, good show is coming, try your luck first.
What? Not achieving the desired effect yet, good! Below, the real effect will be released.
I clicked for a long time, but I didn’t win the prize. No wonder I couldn’t win when I was a kid. I don’t believe in evil, continue to click and start, and finally won the prize once. It’s really not easy.
And our year-end lottery results, start! stop!
2. Code examples
Since it is a js component, you must first download the component library. First post the open source address
Then let's take a look at the reference of the file:
The code copy is as follows:<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link href="~/Content/jQuery-SlotMachine-master/dist/jquery.slotmachine.css" rel="stylesheet" />
<link href="~/Content/jQuery-SlotMachine-master/css/style.css" rel="stylesheet" />
<link href="~/Content/toastr/toastr.min.css" rel="stylesheet" />
<script type="text/javascript" src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script src="~/Content/jQuery-SlotMachine-master/dist/jquery.slotmachine.js"></script>
<script src="~/Content/toastr/toastr.min.js"></script>
A few points to note here:
1) Quote jquery and bootstrap are both referenced through cdn acceleration. If you don’t understand cdn acceleration, you can Baidu.
2) The Jquery component must be supported by Jquery 2.0 or above. If the version is too low, there will be js exceptions.
3) The bootstrap component is not necessary, but this layout requires some bootstrap style support.
4) The toastr component is not necessary, it is used to display the winning results here.
1. Try the luck effect code
html part
<div id="triky"> <div style="text-align: center"> <h1>Please select the food you want</h1> <div> <div style="margin: auto;"> <div id="triky1"> <div> <img src="/Content/jQuery-SlotMachine-master/img/cookie.png" /> </div> <div> <img src="/Content/jQuery-SlotMachine-master/img/food2.jpg" /> </div> <div> <img src="/Content/jQuery-SlotMachine-master/img/food2.jpg" /> </div> <div> <img src="/Content/jQuery-SlotMachine-master/img/food3.jpg" /> </div> </div> <div> <div style="margin-left:-15px" role="group"> <div id="trikyShuffle" type="button"> Try luck</div> </div> </div> </div> </div> </div> </div> </div> </div> <div></div> </div> </div> </div> <div></div> </div>
JS part
$(function () { //Try luck var triky = $("#triky1").slotMachine({ active: 2, //The index of the item displayed during initialization//delay: 150,//Switch the interval time between two pictures (milliseconds units) //randomize: function () { // return 0;//The index of the selected value after each rotation (starting from 0) //} }); $("#trikyShuffle").click(function () { triky.shuffle(8);//Start the rotation method, parameter 8 means that 8 icons are skipped each rotation}); });Detailed explanation of common JS properties, methods and events
(1) Initialization method var machine = $("#id").slotMachine({}); Returns the currently rotated object. The initialized parameters are passed in the slotMachine() method, for example
active: indicates the index of the displayed item during initialization, starting from 0
delay: Switch the interval time between two pictures (milliseconds units)
auto: Whether to rotate automatically, the value is true or false
spins: When auto is true, this is the number of icons that are skipped each time
stophidden: Whether the animation at the beginning and stop occurs when the animation occurs
randomize:function(activeElementIndex){} This property represents the index of the selected value after each rotation (starting from 0)
direction: the direction of the animation, value (up||down)
(2) Common methods
machine.shuffle( repeat, onStopCallback ); indicates the start of rotation, repeat indicates the number of pictures skipped each time; onstopCallback indicates the event callback method after the rotation stops.
machine.prev(); returns the previous element
machine.next(); returns the next element
machine.stop(); stop rotation
machine.active; gets the index of the selected element
machine.running; detects whether it is rotating, true means it is rotating
machine.stopping; Detection whether it has stopped
machine.destroy(); destroys the rotation node
2. Simple game console effect code example
html part
<div id="randomize"> <div style="text-align: center;max-width: 900px;"> <h1>Simple game console</h1> <div> <div> <div> <div> <div id="machine1"> <div><img src="/Content/jQuery-SlotMachine-master/img/slot1.png" /></div> <div><img src="/Content/jQuery-SlotMachine-master/img/slot2.png" /></div> <div><img src="/Content/jQuery-SlotMachine-master/img/slot3.png" /></div> <div><img src="/Content/jQuery-SlotMachine-master/img/slot4.png" /></div> <div><img src="/Content/jQuery-SlotMachine-master/img/slot5.png" /></div> <div><img src="/Content/jQuery-SlotMachine-master/img/slot6.png" /></div> </div> </div> </div> <div> <div> <div id="machine2"> <div><img src="/Content/jQuery-SlotMachine-master/img/slot1.png" /></div> <div><img src="/Content/jQuery-SlotMachine-master/img/slot2.png" /></div> <div><img src="/Content/jQuery-SlotMachine-master/img/slot3.png" /></div> <div><img src="/Content/jQuery-SlotMachine-master/img/slot4.png" /></div> <div><img src="/Content/jQuery-SlotMachine-master/img/slot5.png" /></div> <div><img src="/Content/jQuery-SlotMachine-master/img/slot5.png" /></div> <div><img src="/Content/jQuery-SlotMachine-master/img/slot6.png" /></div> </div> </div> </div> <div> <div> <div id="machine3"> <div><img src="/Content/jQuery-SlotMachine-master/img/slot1.png" /></div> <div><img src="/Content/jQuery-SlotMachine-master/img/slot2.png" /></div> <div><img src="/Content/jQuery-SlotMachine-master/img/slot3.png" /></div> <div><img src="/Content/jQuery-SlotMachine-master/img/slot4.png" /></div> <div><img src="/Content/jQuery-SlotMachine-master/img/slot5.png" /></div> <div><img src="/Content/jQuery-SlotMachine-master/img/slot6.png" /></div> </div> </div> </div> </div> </div> </div> </div> <div> <div role="group"> <div id="ranomizeButton" type="button"> Start</div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div>
JS part
$(function () { //Simple game console var machine1 = $("#machine1").slotMachine({ active: 0, delay: 500 }); var machine2 = $("#machine2").slotMachine({ active: 1, delay: 500, direction: 'down' }); var machine3 = $("#machine3").slotMachine({ active: 2, delay: 500 }); var arr = []; function onComplete(active) { if (arr.length <= 1) { arr.push(active); } else if (arr.length > 1) { arr.push(active); if (arr[0] == arr[1] && arr[1] == arr[2]) { toastr.success("Congratulations for winning!"); } else if (arr[0] == arr[1] || arr[0] == arr[2] || arr[1] == arr[2]) { toastr.success("It's still a little short, keep cheering"); } else { toastr.success("I can't do luck"); } arr = []; } } $("#ranomizeButton").click(function () { machine1.shuffle(5, onComplete); setTimeout(function () { machine2.shuffle(5, onComplete); }, 500); setTimeout(function () { machine3.shuffle(5, onComplete); }, 1000); }) });3. Single stop effect code example
Html part
<div id="casino" style="padding-top:50px;"> <div> <h1>Raffle</h1> <div> <div id="casino1" style="margin-left: -65px;"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <div role="group"> <div id="slotMachineButtonShuffle" type="button">Start</div> <div id="slotMachineButtonStop" type="button">Stop</div> </div> </div> </div> </div> <div></div> </div>
JS part
$(function () { //Single stop var machine4 = $("#casino1").slotMachine({ active: 0, delay: 500 }); var machine5 = $("#casino2").slotMachine({ active: 1, delay: 550 }); machine6 = $("#casino3").slotMachine({ active: 2, delay: 600 }); var started = 0; $("#slotMachineButtonShuffle").click(function () { started = 3; machine4.shuffle(); machine5.shuffle(); machine6.shuffle(); }); $("#slotMachineButtonStop").click(function () { switch (started) { case 3: machine4.stop(); break; case 2: machine5.stop(); break; case 1: machine6.stop(); break; } started-; }); });3. Summary
The whole process is not complicated. All properties, events, and methods can be understood and applied easily by reading the documentation. There is nothing to say about the demonstration code. You can understand it at first glance. I hope it will be helpful for everyone to learn JavaScript components.