<!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. Swift 自动引用计数（ARC）

    Swift 使用自动引用计数(ARC)这一机制来跟踪和管理应用程序的内存 通常情况下我们不需要去手动释放内存,因为 ARC 会在类的实例不再被使用时,自动释放其占用的内存. 但在有些时候我们还是需要在 ...

  2. Robot Framework 学习资源汇总

    学习网站 http://robotframework.org/ http://www.testtao.cn/?cat=43 https://www.jianshu.com/c/483e8ffcbc79 ...

  3. 【404】int main(int argc,char * argv[]) windows 下的使用

    参考:int main(int argc,char * argv[]) windows 下的使用 参考:Theprogram can't start because libgcc_s_dw2-1.dl ...

  4. zip炸弹

    故障系统有人提了zip炸弹的故障,了解了一些关于zip炸弹的常识. 42.zip 是很有名的zip炸弹.一个42KB的文件,解压完其实是个4.5PB的“炸弹”. 更有甚者,一个叫做 droste.zi ...

  5. Python实现的选择排序算法原理与用法实例分析

    Python实现的选择排序算法原理与用法实例分析 这篇文章主要介绍了Python实现的选择排序算法,简单描述了选择排序的原理,并结合实例形式分析了Python实现与应用选择排序的具体操作技巧,需要的朋 ...

  6. ivy使用Maven阿里云镜像的问题

    ivy默认使用的Maven仓库下载速度有点慢,所以想改成国内的,添加如下resolver: <ibiblio name="working-chinese-mirror" ro ...

  7. Python随笔日记（1）

    Python学习 1.安装python .之后在Windows中配置环境变量(计算机\属性\高级系统设置\环境变量\系统变量\path后加入 :路径) 2.注意变量的命名的规则 字母.数字.下划线 p ...

  8. Docker存储容易忽略的使用细节

    一.Docker容器使用前其实有个非常重要的步骤就是规划好部署的磁盘区域,因为docker容器默认存储的路径是在/var/lib/docker的根目录内,随着使用时间越长部署的内容越多,基本的根目录的 ...

  9. vue v-slot

    参考链接:https://www.jianshu.com/p/7020636d68a5

  10. fcntl和flock两个系统调用的区别

    总的来说,flock函数只能锁定整个文件,无法锁定文件的某一区域.而fcntl可以利用struct flock结构体,来实现文件里部分区域锁定的操作. 附:fcntl(文件描述词操作) 相关函数 op ...