catalogue
2, Define an array for storing picture URL s
3, Set start button action event
4. Toggle src attribute of small photo frame
4, Set end button action event
1. Set the listening function for the end button
4. Set src attribute for large photo frame
Hello, Hello, I'm the grey ape! A super bug writing program ape!
Should everyone have played the lottery? But will you use the jquery framework to make an online lottery system yourself?
Today, I'll share with you a super simple online lottery system based on jQuery framework. Put a few pictures of your schoolgirl and see which one you can draw?
Let's take a look at the renderings:
1, Implementation principle
To realize such a lottery system is actually very simple. Let's first talk about the basic idea and implementation principle of such a small lottery system:
The pictures we saw above are actually stored in the array in the form of URL s. When we click the start button, we use a timing circulator to cycle to generate a random number. The range of random numbers is 0 ~ len (array) - 1. Then get the picture link in the subscript array and let it be displayed in the small photo frame. The cycle time can be set by ourselves. When we click the stop button, stop the timing circulator, read the currently randomly generated number, and display the picture under the subscript in the big picture frame.
When we click start again, we can restart the timing circulator and repeat the above steps. At the same time, we also need to set that after clicking the start button, the start button cannot be clicked again, and only the stop button can be clicked; After clicking the stop button, the stop button cannot be clicked again, only the start button can be clicked;
Next, let's implement the above idea.
The implementation part is mainly divided into two parts. One part is the action event after clicking the start button, and the other is the action event after clicking the stop button.
2, Define an array for storing picture URL s
First, we need to find the picture to be used as a lottery option and store its URL in the character array for later access.
// Add url of all circular pictures
var imgArr = ["../img/man00.jpg",
"../img/man01.jpg",
"../img/man02.jpg",
"../img/man03.jpg",
"../img/man04.jpg",
"../img/man05.jpg",
"../img/man06.jpg"
];
3, Set start button action event
After we have determined the material to cycle, the second step is to click the start button. In the click event of the start button, 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 a click response function for the start button. Write the corresponding trigger event in it.
// Click the start button
$("#startID").click(function () {
});2. Set start button failure
After we click the start button, we can only click the stop button. At the same time, the start button cannot be clicked. This setting is determined by the disabled attribute. When the attribute is true, the button cannot be clicked; When the attribute is false, the button can be clicked. Here, we use the prop method to set the element attribute to set its disabled attribute.
// Set whether the start button and stop button are available or not
$("#startID").prop("disabled",true);
$("#stopID").prop("disabled",false);3. Define cycle timer
The method to set the cycle timer in jquery is to use: setInterval() method, which passes in two parameters. The first parameter is a method body to be executed, and the second parameter is a cycle time, with the unit of MS, indicating the cycle time every few seconds. The following definition represents a cycle every 20ms.
The setInterval() method has a return value that can be passed to window Clearinterval() to cancel the value of periodic execution of code.
In this method, we use Math's random() method to generate a random number. Since the range of the number generated by this method is 0 ~ 0.99, we multiply it by 7 to get a random number range of 0 ~ 6;
// Set a cycle timer to cycle for 20 milliseconds
intervalNum = setInterval(function () {
// Get random numbers from 1 to 6
index = Math.floor(Math.random()*7);
},20);4. Toggle src attribute of small photo frame
After generating a random number, we obtain the URL of the image stored in the array through the random number, and then set the URL to the component displaying the image.
// Click the start button
$("#startID").click(function () {
// Set whether the start button and stop button are available or not
$("#startID").prop("disabled",true);
$("#stopID").prop("disabled",false);
// Set a cycle timer to cycle for 20 milliseconds
intervalNum = setInterval(function () {
// Get random numbers from 1 to 6
index = Math.floor(Math.random()*7);
// Set the src attribute of the small photo frame as a picture link
$("#img1ID").prop("src",imgArr[index]);
},20);
});So far, the click event of the start button has been completed. Now click the start button to display the scrolling of the pictures in the small photo frame, but clicking the stop button will not have an event response. Next, let's set the response event of the stop button.
4, Set end button action event
1. Set the listening function for the end button
Set the listening function of the stop button. After clicking the response button, the response event will be triggered.
// Click the stop button
$("#stopID").click(function () {
});2. Set stop button failure
At the same time, we need to set the stop button to be non clickable and the start button to be clickable. We also set the disabled attribute.
// Set whether the start button and stop button are available or not
$("#startID").prop("disabled",false);
$("#stopID").prop("disabled",true);3. Stop timer
After we click the stop button, we need to stop the cycle timer, otherwise it will continue to run. The method to set the timer to stop is clearInterval(), in which the passed in parameter is the value returned by the start button,
// Stop cycle timer clearInterval(intervalNum);
4. Set src attribute for large photo frame
Because we have randomly generated the URL subscript of the picture in the event of the start button, we can directly use the subscript when setting the picture of the large photo frame! Using the prop method to modify the src of the picture to the URL of the randomly generated picture,
// Click the stop button
$("#stopID").click(function () {
// Set whether the start button and stop button are available or not
$("#startID").prop("disabled",false);
$("#stopID").prop("disabled",true);
// Stop cycle timer
clearInterval(intervalNum);
$("#img2ID").prop("src",imgArr[index]);
});Here, the response event of the end button has been realized. Now click the start and stop buttons to realize the complete lottery system,
Finally, integrate it into a complete source code. Come and extract your favorite schoolgirls!
(the pictures used in them need to be added by ourselves as needed)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery Case lottery</title>
<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
<script language="JavaScript" type="text/javascript">
// Add url of all circular pictures
var imgArr = ["../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 number for the lottery
var intervalNum; //Current status value of receive timer
$(function () {
// Set whether the start button and stop button are available or not
$("#startID").prop("disabled",false);
$("#stopID").prop("disabled",true);
// Click the start button
$("#startID").click(function () {
// Set whether the start button and stop button are available or not
$("#startID").prop("disabled",true);
$("#stopID").prop("disabled",false);
// Set a cycle timer to cycle for 20 milliseconds
intervalNum = setInterval(function () {
// Get random numbers from 1 to 6
index = Math.floor(Math.random()*7);
// Set the src attribute of the small photo frame as a picture link
$("#img1ID").prop("src",imgArr[index]);
},20);
});
// Click the stop button
$("#stopID").click(function () {
// Set whether the start button and stop button are available or not
$("#startID").prop("disabled",false);
$("#stopID").prop("disabled",true);
// Stop cycle timer
clearInterval(intervalNum);
$("#img2ID").prop("src",imgArr[index]);
});
});
</script>
</head>
<body>
<!-- Small image frame -->
<div style="border-style:dotted;width:160px;height:100px">
<img id="img1ID" src="../img/man00.jpg" style="width:160px;height:100px"/>
</div>
<!-- Large picture frame -->
<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>
<!-- Start button -->
<input
id="startID"
type="button"
value="Click start"
style="width:150px;height:150px;font-size:22px"
onclick="imgStart()">
<!-- Stop button -->
<input
id="stopID"
type="button"
value="Click stop"
style="width:150px;height:150px;font-size:22px"
onclick="imgStop()">
</body>
</html>If you have questions, remember to leave a message in the comment area or private letter!
I'm a grey ape! See you next time!
