<!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. List 的删除

    List 不要在循环中使用remove 删除.可以新加一个List ,把符合条件的元素加入到这个list 中,然后调用removeAll . 比如:(增强for 循环需要判断 list 是否是 nul ...

  2. Redis的各项功能解决了哪些问题？(转)

    http://www.cnblogs.com/linianhui/p/what-problem-does-redis-solve.html 先看一下Redis是一个什么东西.官方简介解释到:Redis ...

  3. php文件断点上传

    前段时间做视频上传业务,通过网页上传视频到服务器. 视频大小 小则几十M,大则 1G+,以一般的HTTP请求发送数据的方式的话,会遇到的问题:1,文件过大,超出服务端的请求大小限制:2,请求时间过长, ...

  4. JVM-类加载子系统

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

  5. kubernetes之StatefulSet部署zk和kafka

    前提 至少需要三个node节点,否则修改亲和性配置 如果外部访问,需要自己暴露 需要有个storageClass,这样做的原因是避免手动创建pv了 部署zk和kafka 参考: https://www ...

  6. JDBC获得DB2表结构并且将表中数据脱敏后转移的程序示例

    完整项目地址:https://github.com/zifeiy/totomi 代码示例: import java.io.File; import java.io.FileInputStream; i ...

  7. HDU1003 最大连续子序列

    Max Sum Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Sub ...

  8. Vuetify Warning: Unable to locate target [data-app]

    今天在大改 nuxt 项目 layout 的时候,将 Vuetify 的 side nav 换成 Element 的折叠式 nav 后,发现了一个 Warning,虽然不影响使用,但是控制台输出一堆, ...

  9. 关于RNN（Recurrent Neural Network）的一篇文章

    文章链接:https://blog.csdn.net/zhaojc1995/article/details/80572098 写的很好!

  10. 《剑指offer》字符串专题 (牛客11.01)

    字符串的题目难度不一,涉及到的考点有字符串处理.字符串匹配(自动机.正则).模拟,以及递归.动态规划等算法. 难度 题目 知识点 ☆ 02. 替换空格 从后往前 ☆☆ 27. 字符串的排列 回溯,St ...