This is the 19th day of my participation in the Gwen Challenge.[More Challenges]
directory
I. Implementation principle
Define an array of image urls
Set the start button action event
1. Set click listening
2. Set the start button to be invalid
Define a cycle timer
4. Switch the SRC attribute of the small photo frame
4. Set the end button action event
1. Set the listener function for the end button
2. The stop button is invalid
3. Stop the timer
4. Set the SRC attribute for the large photo frame
Hello, I’m Grey Ape! A super bug writing program ape!
Have you all played the raffle? But how about creating your own online lottery system using the jquery framework?
Today I will share with you a super simple online lottery system using jQuery framework. Put up some pictures of young girls and see which one you can pick?
Let’s take a look at the effect:
I. Implementation principle
Want to achieve such a lottery system is actually very simple, let’s talk about a do such a small lottery system of basic ideas and implementation principle:
The images we see above are actually stored in an array as urls. After clicking the start button, a timer circulator is used to generate a random number ranging from 0 to Len (array)-1. Then get the picture link in the array of the subscript and let it display in the small picture frame. The time of the loop can be set by ourselves. When we hit the stop button, we stop the timer loop, read the currently randomly generated number, and display the picture under that index in the big picture frame.
When we click Start again, we can restart the timer loop and repeat the above steps. At the same time, we also need to set, after clicking the start button, the start button can not be clicked again, only click the stop button; After clicking the stop button, the stop button can no longer be clicked, only the start button can be clicked;
Now let’s implement the above idea.
The realization part is mainly divided into two parts, one is the action event realized after the start button is clicked, the other is the action event realized after the stop button is clicked.
Define an array of image urls
First we need to find the image we want to use as a lottery option and store its URL in a character array for later access.
/ / add all circulating pictures of var imgArr url = [".. / img/man00. JPG ", ".. / img/man01. JPG ", ".. / img/man02. JPG ", ".. / img/man03. JPG ", "../img/man04.jpg", "../img/man05.jpg", "../img/man06.jpg" ];Copy the codeSet the start button action event
After we have determined the material to loop, the second step is to click the start button event. In the start button click event, the action to be performed is to start a timer, generate a random number, and display the picture in the small picture frame.
1. Set click listening
First we should set up a click response function for the start button. Write the corresponding trigger event to it.
$("#startID").click(function () {});Copy the code2. Set the start button to be invalid
After we click the start button, we can only click the stop button, and the start button cannot be clicked at this time. ** This setting is determined by the disabled property. When the property is true, the button cannot be clicked. When the property is false, the button can be clicked. ** Here we use the prop method that sets the element’s properties to set its Disabled property.
$("#startID").prop("disabled",true); $("#stopID").prop("disabled",false);Copy the codeDefine a cycle timer
To set a loop timer in jquery, use the: **setInterval() method. This method takes two parameters, the first parameter is the body of the method to be executed, and the second parameter is a loop time, in ms, indicating how many seconds it should run. ** The following definition indicates that the cycle occurs every 20ms.
The setInterval() method has a return value that can be passed to window.clearInterval () to cancel the periodic execution of code.
In this method we use the random() method of Math to generate a random number. Since the number generated by this method has a range of 0, 0.99, we multiply it by 7 to get a range of 0, 6.
IntervalNum = setInterval(function () {// Get a random number from 1 to 6 index = math.floor (math.random ()*7); }, 20);Copy the code4. Switch the SRC attribute of the small photo frame
After generating a random number, we get the URL of the image stored in the array through the random number, and then set the URL to the component that displays the image.
$("#startID").click(function () {$("#startID").prop("disabled",true); $("#stopID").prop("disabled",false); IntervalNum = setInterval(function () {// Get a random number from 1 to 6 index = math.floor (math.random ()*7); $("#img1ID").prop(" SRC ",imgArr[index]); }, 20); });Copy the codeAt this point, the start button click event is complete, now click on the Start button, will show the small picture frame scroll, but click on the stop button does not get an event response, let’s set the stop button response event.
4. Set the end button action event
1. Set the listener function for the end button
Set the stop button listener function to trigger the response event after the response button is clicked.
$("#stopID").click(function () {});Copy the code2. The stop button is invalid
We also need to make the stop button unclickable and the start button clickable, again with the Disabled property.
$("#startID").prop("disabled",false); $("#stopID").prop("disabled",true);Copy the code3. Stop the timer
After we hit the Stop button, we need to stop the loop timer, otherwise it will continue to run. The method to set the timer to stop is clearInterval(), which passes in the value returned by the start button.
// Stop the cycle timer clearInterval(intervalNum);Copy the code4. Set the SRC attribute for the large photo frame
Since we have randomly generated the URL subscript of the image in the start button event, we can directly use this subscript when setting the picture of the large frame. Use the prop method to modify the SRC of the image to the URL of the randomly generated image.
$("#startID").prop("disabled",false); $("#startID"). $("#stopID").prop("disabled",true); // Stop the cycle timer clearInterval(intervalNum); $("#img2ID").prop("src",imgArr[index]); });Copy the codeAt this point, the end button response event has been implemented, and now click the start and stop buttons to complete the lottery system.
Finally, it will be integrated into the complete source code, quick to extract your favorite school sister!
(The pictures used need to be added according to your needs)
<! DOCTYPE HTML > < HTML > <head> <meta charset="UTF-8"> <title> /js/jquery-3.3.1.min.js"></script> <script language="JavaScript" type="text/ JavaScript" ["../img/man00.jpg", "../img/man01.jpg", "../img/man02.jpg", "../img/man03.jpg", "../img/man04.jpg", "../img/man05.jpg", "../img/man06.jpg" ]; var index; // Define a random lottery number var intervalNum; $(function () {$("#startID").prop("disabled",false); $("#stopID").prop("disabled",true); $("#startID").click(function () {$("#startID").prop("disabled",true); $("#stopID").prop("disabled",false); IntervalNum = setInterval(function () {// Get a random number from 1 to 6 index = math.floor (math.random ()*7); $("#img1ID").prop(" SRC ",imgArr[index]); }, 20); }); $("#startID").prop("disabled",false); $("#startID"). $("#stopID").prop("disabled",true); // Stop the cycle timer clearInterval(intervalNum); $("#img2ID").prop("src",imgArr[index]); }); }); </script> </head> <body> <! <div style=" margin: 0.0px 0.0px 0.0px 0.0px 0.0px; padding: 0.0px; outline: none; width:160px; height:100px"> <img id="img1ID" src=".. /img/man00.jpg" style="width:160px; height:100px"/> </div> <! <div style="border-style:double; width:800px; height:500px; position:absolute; left:500px; top:10px"> <img id="img2ID" src=".. /img/man00.jpg" width="800px" height="500px"/> </div> <! <input id="startID" type="button" value=" start "style="width:150px; height:150px; font-size:22px" onclick="imgStart()"> <! < p style=" padding-bottom: 0px; padding-bottom: 0px; height:150px; font-size:22px" onclick="imgStop()"> </body> </html>Copy the codeIf you have any questions, leave them in the comments section or in your private message!
I’m grey Ape! See you next time!
