<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>抽签</title>
    <script src="jquery-3.4.1.min.js"></script>
</head>
<script>
    $(function () {
        var names = [
            "张三",
            "李四",
            "诸葛亮",
            "刘备",
            "曹操",
            "韩非",
            "张良",
            "卫庄",
            "盖聂",
        ];
        var time;
        var index;
        $("#start").prop("disabled", false);
        $("#stop").prop("disabled", true);
        $("#start").click(function () {
            time = setInterval(function () {
                $("#start").prop("disabled", true);
                $("#stop").prop("disabled", false);
                index = Math.floor((Math.random() * 10) + 1);
                $("#name").prop("value", names[index]);
            });
        });
        $("#stop").click(function () {
            clearInterval(time);
            $("#start").prop("disabled", false);
            $("#stop").prop("disabled", true);
        });
    });
</script>
<body>
    <input type="text" id="name" value="张三" style="width: 250px;height: 50px;border: 2px solid black;text-align: center;
margin-left:450px;margin-top: 100px;red;color: white; font-size: 26px">
    <input type="button" id="start" value="开始" style="width: 70px;height: 35px; margin-left: 100px">
    <input type="button" id="stop" value="结束" style="width: 70px;height: 35px;">
</body>
</html>

抽奖JQ的更多相关文章

  1. JQ广告弹窗&随机抽奖————JQ

    1.JQ广告弹窗 <div id="flo"> <img src="image.jpeg"> </div> <scri ...

  2. 一个好玩的jq+php实现转盘抽奖程序

    前台页面: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <met ...

  3. jq 抽奖转盘

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. jq动画设置图片抽奖(修改效果版)

    效果:点击开始,图片转动,按钮显示"停止",点击停止,选出中奖号码,,最后一个数字停止时,按钮变为"again",点击"again"开始转动 ...

  5. jq动画设置图片抽奖

    (因为自己是前端刚入门的小白所以中间出现很多问题,不过这对于我来说就是一次经验的积累) 预想效果:点击"开始",图片循环旋转,不是同时的效果,而是有一定的时间差.点击"开 ...

  6. jq demo 九宫格抽奖

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...

  7. jq 抽奖

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...

  8. jq转盘抽奖

    之前项目的时候要写一个抽奖,自己写了以后就记录一下. 先是html <div class="turntable_zhan"> <img class="y ...

  9. jQuery幸运大转盘_jQuery+PHP抽奖程序的简单实现

    jQuery幸运大转盘_jQuery+PHP抽奖程序的简单实现 在线实例 查看演示 完整代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 ...

随机推荐

  1. JVM-类加载子系统

    类的生命周期 1.加载 将.class二进制字节流流从磁盘读到内存中(通过文件的全限定名读取) 2.连接 2.1验证:验证字节码文件的正确性 2.2准备:给类的静态变量分配内存,并赋予默认值(比如 i ...

  2. 跨域form下载方式 批量下载

    downloadFileForm:function(fid) { var url = "https://file.xxxx.com/fileDownload.do"; var in ...

  3. unity读取灰度图生成等值线图

    准备灰度图 grayTest.png,放置于Assets下StreamingAssets文件夹中.   在场景中添加RawImage用于显示最后的等值线图.   生成等值线的过程,使用Marching ...

  4. Jmeter 逻辑控制器 之 Runtime Controller

    一.认识 Runtime Controller  控制其下样例执行的时间长度. 设置界面:  Runtime (seconds):运行时间,单位秒.即控制其下样例执行多长时间.与线程组中的调度器的持续 ...

  5. Apache Jmeter教程(一) - 入门

    一.下载Jmeter 登录官网Jmeter下载,得到压缩包jmeter-5.0.tgz,下载地址:http://jmeter.apache.org/download_jmeter.cgi. 二.安装 ...

  6. IJG JPEG使用说明

    IJG JPEG库使用说明 版权所有:1994-1998,Thomas G. Lane 本文档是IJG软件的一部分. 分发和使用的条件请参看README文档. 本文档讲述如何在应用程序中使用IJG(I ...

  7. 日志.VC

    1. int WriteLog(char* _pcFullFileName, char* _pcWrite, int _iWriteLen, unsigned long * _pdwWritten) ...

  8. MySQL中的日期和时间：使用和说明，以及常用函数

    1.首先需要注意: 1.1 MySQL中把日期和时间是分开的. 以字符串2007-12-31 00:59:59为例: 日期部分:2007-12-31.这部分也可以叫做一个日期表达式. 时间部分:00: ...

  9. 牛客小白月赛16 H 小阳的贝壳 （差分+线段树）

    链接:https://ac.nowcoder.com/acm/contest/949/H来源:牛客网 题目描述 小阳手中一共有 n 个贝壳,每个贝壳都有颜色,且初始第 i 个贝壳的颜色为 colico ...

  10. select示例

    #include <sys/select.h> #include <sys/time.h> #include <sys/types.h> #include < ...