-
2019-12-19 09:26:55更多相关内容
-
Excel2021制作随机抽奖系统.docx
2021-09-26 22:47:31Excel2021制作随机抽奖系统.docx -
随机抽奖系统源码
2015-08-14 15:44:17抽奖系统源码,取不重复随机数,手机号码抽奖! -
基于Java实现抽奖系统
2020-08-28 06:11:51主要介绍了基于Java实现抽奖系统,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 -
asp+access公众号用通用领码发码随机抽奖系统
2019-07-24 14:20:39asp+access公众号用通用领码发码系统 一个用户发送相同指令即时领取一条记录,被领取后其他人不可领取。 注意:关注用户无差别回复,注意识别一个用户多个号码关注等现象。 注意:领取用途请勿设置成随机回复:1个奖项... -
数电课程设计--随机抽奖系统设计.docx
2022-07-09 03:22:07数电课程设计--随机抽奖系统设计.docx数电课程设计--随机抽奖系统设计.docx数电课程设计--随机抽奖系统设计.docx数电课程设计--随机抽奖系统设计.docx数电课程设计--随机抽奖系统设计.docx数电课程设计--随机抽奖... -
数电课程设计--随机抽奖系统设计.pdf
2022-07-09 03:04:35数电课程设计--随机抽奖系统设计.pdf数电课程设计--随机抽奖系统设计.pdf数电课程设计--随机抽奖系统设计.pdf数电课程设计--随机抽奖系统设计.pdf数电课程设计--随机抽奖系统设计.pdf数电课程设计--随机抽奖系统设计... -
五分钟学会做一个在线抽奖系统,手把手教你抽奖还学不会嘛?
2021-06-15 13:45:32目录 一、实现原理 二、定义存放图片URL的数组 三、设置开始按钮动作事件 ... 2、设置开始按钮失效 ...但是使用jquery框架自己做一个在线抽奖系统你会嘛? 今天我就来和大家分享一个超简单的利用jQuery框架实现的在目录
Hello,你好呀,我是灰小猿!一个超会写bug的程序猿!
抽奖应该大家都玩过吧?但是使用jquery框架自己做一个在线抽奖系统你会嘛?
今天我就来和大家分享一个超简单的利用jQuery框架实现的在线抽奖系统。放上几张学妹的照片,看你能抽到哪一个呢?
先来带大家看一下效果图:
一、实现原理
想要实现这样一个抽奖系统其实很简单,我们先来讲一个做这样一个小的抽奖系统的基本思路和实现原理:
我们上面看到的图片其实以一个个URL的形式存储在数组中的,当我们点击开始按钮之后,利用一个定时循环器循环生成一个随机数,随机数的范围是0~len(数组)-1。之后获取到该下标的数组中的图片链接,让其显示在小相框中,循环的时间我们可以自己设定。当我们点击了停止按钮之后,让定时循环器停止,读取当前随机生成的数字,并且将该下标下的图片显示在大相框。
当我们再次点击开始的时候,可以重新启动定时循环器,重复上面的步骤。同时我们还要设置,在点击了开始按钮之后,开始按钮就不能够再点击,只能点击停止按钮;点击了停止按钮之后停止按钮就不能再点击,只能点击开始按钮;
接下来我们就来将上面的思路进行实现。
实现部分主要分为两大部分,一部分是开始按钮点击之后实现的动作事件,另一个是点击停止按钮之后实现的动作事件。
二、定义存放图片URL的数组
首先我们需要先找到要作为抽奖选项的图片,将其URL存放到字符数组中,以便之后访问。
// 添加所有循环的图片的url var imgArr = ["../img/man00.jpg", "../img/man01.jpg", "../img/man02.jpg", "../img/man03.jpg", "../img/man04.jpg", "../img/man05.jpg", "../img/man06.jpg" ];
三、设置开始按钮动作事件
在我们确定好要循环的素材之后,第二步就是点击开始按钮的事件了,在开始按钮的点击事件中,要执行的动作是启动一个定时器,生成一个随机数,小相框中显示图片。
1、设置点击监听
首先我们应该为开始按钮设置一个点击响应的函数。在其中写入相应的触发事件。
// 点击开始按钮 $("#startID").click(function () { });
2、设置开始按钮失效
在我们点击了开始按钮之后,设置只能点击停止按钮,同时这个时候开始按钮是无法点击的,该设置是disabled属性决定的,属性为true时,按钮无法点击;属性为false时,按钮可以点击。在这里我们使用设置元素属性的prop方法对其的disabled属性进行设置。
// 设置开始按钮和停止按钮可用不可用 $("#startID").prop("disabled",true); $("#stopID").prop("disabled",false);
3、定义循环定时器
在jquery中设置循环定时器的方法是使用:setInterval()方法,该方法传入两个参数,第一个参数是一个将要执行的方法体,第二个参数是一个循环时间,单位是ms,表示每隔多少秒循环一次。如下的定义表示每20ms循环一次。
setInterval()方法具有一个返回值,该返回值可以传递给 Window.clearInterval() 从而取消对 code 的周期性执行的值。
在该方法中我们使用Math的random()方法来生成一个随机数,由于该方法生成的数的范围是0~0.99,所以我们将其乘以7,得到的随机数范围就是0~6;
// 设置一个循环定时器,循环20毫秒 intervalNum = setInterval(function () { // 得到1~6的随机数 index = Math.floor(Math.random()*7); },20);
4、切换小相框的src属性
当我们生成随机数之后,通过该随机数获取到存放在数组中的图片的url,之后将该URL设置给显示图片的组件。
// 点击开始按钮 $("#startID").click(function () { // 设置开始按钮和停止按钮可用不可用 $("#startID").prop("disabled",true); $("#stopID").prop("disabled",false); // 设置一个循环定时器,循环20毫秒 intervalNum = setInterval(function () { // 得到1~6的随机数 index = Math.floor(Math.random()*7); // 将小相框的src属性设置成图片链接 $("#img1ID").prop("src",imgArr[index]); },20); });
至此,开始按钮的点击事件就已将完成了,现在点击开始按钮,就能够显示小相框中图片的滚动,但是点击停止按钮并不会有事件响应,接下来我们来设置停止按钮的响应事件。
四、设置结束按钮动作事件
1、为结束按钮设置监听函数
设置停止按钮的监听函数,在点击了响应的按钮之后,会触发其中的响应事件。
// 点击停止按钮 $("#stopID").click(function () { });
2、设置停止按钮失效
同时我们需要将停止按钮设置成不可点击,将开始按钮设置为可点击,同样是对disabled属性进行设置。
// 设置开始按钮和停止按钮可用不可用 $("#startID").prop("disabled",false); $("#stopID").prop("disabled",true);
3、停止定时器
在我们点击在停止按钮之后,就需要将循环定时器停止,否则它还将会继续运行下去,设置计时器停止的方法是clearInterval(),其中传入的参数是开始按钮返回的值,
// 停止循环计时器 clearInterval(intervalNum);
4、给大相框设置src属性
因为我们在开始按钮的事件中就已经随机的生成了图片的URL下标,所以我们在设置大相框的图片时,直接使用该下标就可以了!利用prop方法修改图片的src为随机生成的图片的URL,
// 点击停止按钮 $("#stopID").click(function () { // 设置开始按钮和停止按钮可用不可用 $("#startID").prop("disabled",false); $("#stopID").prop("disabled",true); // 停止循环计时器 clearInterval(intervalNum); $("#img2ID").prop("src",imgArr[index]); });
到这里,结束按钮的响应事件就也已经实现了,现在再点击开始和停止按钮就可以实现完整的抽奖系统了,
最后将其整合成完整源码,快来抽取你喜欢的学妹吧!
(其中用到的图片需要大家根据需要自行添加)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jquery案例之抽奖</title> <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script> <script language="JavaScript" type="text/javascript"> // 添加所有循环的图片的url 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; // 定义一个抽奖的随机数字 var intervalNum; //接收定时器的当前状态值 $(function () { // 设置开始按钮和停止按钮可用不可用 $("#startID").prop("disabled",false); $("#stopID").prop("disabled",true); // 点击开始按钮 $("#startID").click(function () { // 设置开始按钮和停止按钮可用不可用 $("#startID").prop("disabled",true); $("#stopID").prop("disabled",false); // 设置一个循环定时器,循环20毫秒 intervalNum = setInterval(function () { // 得到1~6的随机数 index = Math.floor(Math.random()*7); // 将小相框的src属性设置成图片链接 $("#img1ID").prop("src",imgArr[index]); },20); }); // 点击停止按钮 $("#stopID").click(function () { // 设置开始按钮和停止按钮可用不可用 $("#startID").prop("disabled",false); $("#stopID").prop("disabled",true); // 停止循环计时器 clearInterval(intervalNum); $("#img2ID").prop("src",imgArr[index]); }); }); </script> </head> <body> <!-- 小像框 --> <div style="border-style:dotted;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="点击开始" style="width:150px;height:150px;font-size:22px" onclick="imgStart()"> <!-- 停止按钮 --> <input id="stopID" type="button" value="点击停止" style="width:150px;height:150px;font-size:22px" onclick="imgStop()"> </body> </html>
有问题的小伙伴记得在评论区或者私信留言!
我是灰小猿!我们下期见!
-
伪随机抽奖系统
2014-09-20 14:16:47本系统用于各种活动的抽奖,采用伪随机的方式。 -
课堂(抽奖)随机点名系统
2018-03-30 15:28:25带声音的随机点名系统,导入txt文件即可使用,使用课堂或者抽奖现场 -
最牛抽奖系统 随机抽号器 随机抽人名、电话或任意号码。
2017-09-22 15:58:23本最牛抽经系统可以随机抽取姓名、电话、编号等。名单在TXT文本文件中,方便修改。抽过的名单不会重复抽取。 退出程序重新运行,可以继续上次退出没有抽取完的奖项,随时能查已抽奖项。 该系统自动转换一、二、三等... -
Python+HTML随机点名抽奖源码模板抽奖系统
2022-04-21 10:36:01一款不错的Python+HTML随机点名抽奖源码模板,带背景音乐,bootstrap框架自适应手机端,随机数据在others.js里面增加修改。 -
随机抽奖系统
2012-05-09 09:42:18一个简单的抽奖系统(随机数生成软件),可以生成long类型的随机数(默认是10位数的随机数,可以自定义随机数的位数长度) -
java抽奖系统后台 springboot+mybatis redis队列处理高并发.rar
2021-06-18 12:44:30抽奖系统后台 springboot+mybatis redis队列处理高并发 -
JavaScript随机抽奖系统,支持100人.zip
2022-06-23 22:34:00JavaScript随机抽奖系统,支持100人.zip -
VBA自动化年会系统随机抽奖小程序模板.xlsx
2021-09-25 15:38:53VBA自动化年会系统随机抽奖小程序模板.xlsx -
JAVA 随机抽奖系统 实现教程及代码
2021-03-13 07:37:46基于JAVA GUI编写一个简单的随机抽奖程序,具体实现功能如下:1. 创建一个文本文件,其中存放若干条用户信息。2. 通过单击“开始”按钮实现从文本中读取这些用户信息,并将读取的每一条用户信息以滚动的方式逐条循环...基于JAVA GUI编写一个简单的随机抽奖程序,具体实现功能如下:
1. 创建一个文本文件,其中存放若干条用户信息。
2. 通过单击“开始”按钮实现从文本中读取这些用户信息,并将读取的每一条用户信息以滚动的方式逐条循环地显示在图形用户界面上。
3. 在单击“暂停”按钮时实现暂停功能,单击“保存”按钮实现将当前用户界面上显示的用户信息写入一个指定的文件中。
/*
* To change this license header, choose License Headers in Project Properties.
* To change this template file, choose Tools | Templates
* and open the template in the editor.
*/
package gui;
import java.awt.*;
import java.awt.event.*;
import java.io.*;
import javax.swing.*;
/**
*
* @author ICHARM
*/
//按钮状态改变线程类
class ButtonChangeState extends Thread{
LuckyPerson one =null;
public ButtonChangeState(LuckyPerson tmp){
one = tmp;
}
@Override
public void run(){
one.ButtonChangeState();
}
}
//开始按钮事件进程类
class StartButtonEvent extends Thread{
LuckyPerson one =null;
public StartButtonEvent(LuckyPerson tmp){
one = tmp;
}
@Override
public void run(){
one.StartButtonEvent();
}
}
//开始按钮事件监听器
class StartButtonEventListener implements ActionListener{
private LuckyPerson form = null;
public StartButtonEventListener(LuckyPerson One){
this.form = One;
}
@Override
public void actionPerformed(ActionEvent e){
ButtonChangeState obj = new ButtonChangeState(form);
obj.start();
StartButtonEvent obj1 = new StartButtonEvent(form);
obj1.start();
}
}
//停止按钮事件监听器
class StopButtonEventListener implements ActionListener{
private LuckyPerson form = null;
public StopButtonEventListener(LuckyPerson One){
this.form = One;
}
@Override
public void actionPerformed(ActionEvent e){
form.StopButtonEvent();
}
}
//保存按钮事件监听器
class SaveButtonEventListener implements ActionListener{
private LuckyPerson form = null;
public SaveButtonEventListener(LuckyPerson One){
this.form = One;
}
@Override
public void actionPerformed(ActionEvent e){
form.SaveButtonEvent();
}
}
public class LuckyPerson extends JFrame {
private JFrame frame;
private JLabel name;
public JTextArea area2;
private JButton startbutton;
private JButton stopbutton;
private JButton endbutton;
private JScrollPane AreaScrollPane;
private int count = 0;
private int i=0;
private int j=0;
public boolean stopflag = false;
String[] Name =null;
public LuckyPerson() {
frame=new JFrame("抽奖");
frame.setLayout(null);
name=new JLabel("中奖者");
name.setBounds(50, 50, 200, 20);
frame.getContentPane().add(name);
area2=new JTextArea();
area2.setBounds(200, 20, 300, 180);
area2.setEditable(false);
AreaScrollPane = new JScrollPane(area2);
AreaScrollPane.setBounds(200, 20, 300, 180);
AreaScrollPane.setVisible(true);
AreaScrollPane.setVerticalScrollBarPolicy(JScrollPane.VERTICAL_SCROLLBAR_ALWAYS); //设置垂直滚动条总是显示�
startbutton=new JButton("开始");
startbutton.setBounds(50, 220, 90, 30);
startbutton.addActionListener(new StartButtonEventListener(this)); //StatrtButton事件监听器
frame.getContentPane().add(startbutton);
stopbutton=new JButton("暂停");
stopbutton.setBounds(220, 220, 90, 30);
stopbutton.addActionListener(new StopButtonEventListener(this)); //StopButton事件监听器
stopbutton.setEnabled(false);
frame.getContentPane().add(stopbutton);
endbutton=new JButton("保存");
endbutton.setBounds(400, 220, 90, 30);
endbutton.setEnabled(false);
endbutton.addActionListener(new SaveButtonEventListener(this)); //SaveButton事件监听器
frame.getContentPane().add(endbutton);
frame.setSize(555,300);
frame.setVisible(true);
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.setLocationRelativeTo(null);
frame.add(AreaScrollPane, BorderLayout.EAST);
}
//按钮状态改变事件处理函数
public void ButtonChangeState(){
startbutton.setEnabled(false);
stopbutton.setEnabled(true);
endbutton.setEnabled(true);
}
//开始按钮事件处理函数
public void StartButtonEvent(){
try{
FileReader fin = new FileReader("E://抽奖者名单.txt");
BufferedReader in = new BufferedReader(fin);
String line = in.readLine();
Name = new String[100];
while(line != null)
{
line = line.trim();
if(line.length()>0 && count<=100 )
{
Name[count] = line;
count++;
}
line = in.readLine();
}
area2.setText(Name[0]);
for(i = 1; i <= count+1; i++){
if(i == count){
i=0;
}
if(!stopflag){
area2.append("\n" + Name[i]);
name.setText("中奖者:\n"+Name[i]);
j=i;
area2.setSelectionStart(area2.getText().length()); //滚动条自动滚动到底端
area2.paintImmediately(area2.getBounds()); //刷新
}
}
in.close();
fin.close();
}
catch(IOException g)
{
System.out.println("IOException");
}
}
//停止按钮事件处理函数
public void StopButtonEvent(){
stopflag = true;
}
//保存按钮事件处理函数
public void SaveButtonEvent(){
if(stopflag){
try{
FileWriter fw = new FileWriter("E://tmp.txt",true);
BufferedWriter fww = new BufferedWriter(fw);
fww.write(Name[j]);
fww.close();
}
catch(IOException e){
System.out.println("IOException");
}
}
}
public static void main(String[] args) {
LuckyPerson application = new LuckyPerson();
application.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
}
}
JAVA 随机抽奖系统 实现教程及代码
-
随机抽奖程序 asp版 v1.0-ASP源码.zip
2021-12-13 00:19:08ASP源码,压缩包解压密码:www.cqlsoft.com -
用Javascript轻松制作一套简单的抽奖系统
2021-01-19 19:36:56作者:jegg 年底将至,许多公司忙着搞年会,会上一般都会有一些抽奖活动,下面的程序就是用javascript 写的一个简单的抽奖系统与大家共享。 此代码借鉴了网上的一些网友的代码,又加上了一些诸如不重复抽奖之类的... -
模拟抽奖系统_抽奖模拟系统_C#_抽奖模拟程序_模拟抽奖系统_模拟抽号_
2021-09-29 02:10:00C#模拟摇号程序,也就是模拟抽奖程序,抽号器与此相似。程序使用多个线程生成随机字符,核心代码基本是在Form1.cs中。 -
JS做出随机抽奖系统
2021-04-07 08:24:41这次给大家带来JS做出随机抽奖系统,JS做出随机抽奖系统的注意事项有哪些,下面就是实战案例,一起来看一下。用JavaScript实现一个简单的抽奖系统,有【开始】按钮和【停止】按钮。功能:- 点开始按钮开始抽奖,随机...这次给大家带来JS做出随机抽奖系统,JS做出随机抽奖系统的注意事项有哪些,下面就是实战案例,一起来看一下。
用JavaScript实现一个简单的抽奖系统,有【开始】按钮和【停止】按钮。
功能:
- 点开始按钮开始抽奖,随机出现奖品名称;
- 点停止按钮即可停止抽奖;
- 按下回车键可切换开始抽奖和停止抽奖。
效果
html代码:
创建html结构,最基础的要含有显示的奖品名称和开始、停止按钮。
抽奖系统开始抽奖啦!
开 始
停 止
js主要代码片段:
首先,定义data数组,写入各奖品名称。并初始化timer定时器,和键盘事件状态flag(一开始状态为0,按下键盘变成1,再按键盘变成0,如此切换).var data=['Phone7','Ipad','三星笔记本','佳能相机','惠普打印机','谢谢参与','100元充值卡','1000元超市购物券'];
timer = null,
flag = 0;
定义开始抽奖函数playFun();function playFun() {
var title = document.getElementById('title');
var play = document.getElementById('play');
//每次都先清除上一次的定时器任务,避免抽奖效果累加频率会越来越快
clearInterval(timer);
//定时器50毫秒触发一次
timer = setInterval(function(){
//获取奖品下标随机数
var random = Math.floor(Math.random() * data.length);
//显示随机的奖品名称
title.innerHTML = data[random];
}, 50);
//改变将开始按钮背景色
play.style.background = '#666';
}
定义停止抽奖函数stopFun();function stopFun(){
//清除定时器即可结束抽奖
clearInterval(timer);
var play = document.getElementById('play');
//改变将停止按钮背景色
play.style.background = '#036';
}
按回车键切换抽奖状态事件;document.onkeyup = function(event){
event = event || window.event;
//回车键键码为13
if (event.keyCode == 13) {
//如果状态flag值为0则开始抽奖,并把状态值改为1,否则停止抽奖并把状态值改为0
if (flag == 0){
playFun();
flag = 1;
}else{
stopFun();
flag = 0;
}
}
}
js完整代码:var data = ['Phone7', 'Ipad', '三星笔记本', '佳能相机', '惠普打印机', '谢谢参与', '100元充值卡', '1000元超市购物券'],
timer = null, //定时器
flag = 0; //用于键盘事件状态标记
window.onload = function() {
var play = document.getElementById('play'),
stop = document.getElementById('stop');
// 开始抽奖
play.onclick = playFun;
stop.onclick = stopFun;
// 键盘事件
document.onkeyup = function(event) {
event = event || window.event;
if (event.keyCode == 13) {
if (flag == 0) {
playFun();
flag = 1;
} else {
stopFun();
flag = 0;
}
}
}
}
// 开始抽奖
function playFun() {
var title = document.getElementById('title');
var play = document.getElementById('play');
//每次都先清除上一次的定时器任务,避免抽奖效果累加频率会越来越快
clearInterval(timer);
timer = setInterval(function() {
var random = Math.floor(Math.random() * data.length);
title.innerHTML = data[random];
}, 50);
play.style.background = '#999';
}
//停止抽奖
function stopFun() {
clearInterval(timer);
var play = document.getElementById('play');
play.style.background = '#036';
}
css样式:* {
margin: 0;
padding: 0;
}
.title {
font-size: 24px;
font-weight: bold;
width: 400px;
height: 70px;
margin: 0 auto;
padding-top: 30px;
text-align: center;
color: #f00;
}
.btns {
width: 190px;
height: 30px;
margin: 0 auto;
}
.btns span {
font-family: '微软雅黑';
font-size: 14px;
line-height: 27px;
display: block;
float: left;
width: 80px;
height: 27px;
margin-right: 10px;
cursor: pointer;
text-align: center;
color: #fff;
border: 1px solid #eee;
border-radius: 7px;
background: #036;
}
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读:
-
Excel2021表格中模拟一个随机抽奖系统.docx
2021-09-26 22:49:54Excel2021表格中模拟一个随机抽奖系统.docx -
delphi 抽奖系统 随机抽取 奖励
2018-09-11 21:09:11抽奖系统 年会 企业delphi -
html简单易懂的随机抽奖
2021-07-02 12:22:32//请在此段代码前引用jq,否则代码无效 $(document).ready(function... //抽奖完毕,按钮重新进入可编辑状态 } }, tie); } function text(shu, sums, tie, sum, tis) { time(shu, sums, tie, sum, tis) //执行time事件 } -
答题抽奖系统 v1.3.9.zip
2021-06-18 14:06:28采用随机抽题的方式进行答题,答题完毕后,满足设置的条件,可获得抽奖机会,进行抽奖。 系统功能介绍: 一,参数设置 自定义关注设置。 二,活动管理 创建多个答题活动,可以同时进行答题。活动新建后,会有“复制... -
用Python制作一个随机抽奖小工具
2021-07-04 19:15:48最近在工作中面向社群玩家组织了一场活动,需要进行随机抽奖,参考之前小明大佬的案例,再结合自己的需求,做了一个简单的随机抽奖小工具。 今天我就来顺便介绍一下这个小工具的制作过程吧! 先看效果: 1. 核心... -
幸运星随机抽奖系统V329
2013-12-15 20:06:53《幸运星随机摇奖系统》:该软件最新设计,融合各家之长,适合用于各单位年终摇奖、晚会摇奖、商场促销摇奖、展销会摇奖、房展摇奖、车展摇奖等,软件也可用于各单位各部门在日常工作中随机分配任务。主要功能和特点... -
android自定义效果——随机抽奖
2014-10-14 13:47:11一个模拟抽奖的效果,用户设定若干个选项,添加之后,就可以通过程序,来帮助随机选择其中一项出来。这个类似超市里面那种指针转盘抽奖,run之后是一个动态效果图,初始快速转动,最后慢慢停在某个选项上。