<!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. 阶段5 3.微服务项目【学成在线】_day02 CMS前端开发_03-vuejs研究-vuejs基础-入门程序

    本次测试我们在门户目录中创建一个html页面进行测试,正式的页面管理前端程序会单独创建工程. 在门户目录中创建vuetest目录,并且在目录下创建vue_01.html文件 <!DOCTYPE ...

  2. 每个Xcode开发者应该知道的几个使用技巧

    1.快速打开 快速打开(Open Quickly)命令在Xcode的File菜单中,当然,用快捷键Command+Shift+O会更方便一些.这个命令可以开启一个小窗格用来快速搜索浏览文件.类.算法以 ...

  3. Carthage - Could not find any available simulators for iOS

    升级xcode版本后,用carthage编译第三方库有可能会报这个错误:[Could not find any available simulators for iOS] 两个解决方法: 1. 升级你 ...

  4. golang的下载与安装

    golang的官网可能由于政策原因登陆不上. 所以可以到Go语言中文网下载:https://studygolang.com/dl 我下载的是go1.10.3.windows-amd64.msi安装包, ...

  5. EasyNetQ使用(四)【Request与Response，Send与Receive】

    EasyNetQ也支持Request/Response这种方式的消息模式.这种方式很容易在client/Server应用中执行,客户端发送一个请求到服务器,服务器然后处理请求后返回一个响应.和传统的R ...

  6. Mac下Unity使用Jenkins自动化打包

    重要的事情说三遍:不要使用jenkins dmg安装包直接安装,用brew安装  PS:会有权限问题 重要的事情说三遍:不要使用jenkins dmg安装包直接安装,用brew安装 重要的事情说三遍: ...

  7. Mysql性能优化之---（二）

    建立适当的索引 说起提高数据库性能,索引是最物美价廉的东西了.不用加内存,不用改程序,不用调sql,只要执行个正确的'create index',查询速度就可能提高百倍千倍,这可真有诱惑力.可是天下没 ...

  8. POJ2195 Going Home【KM最小匹配】

    题目链接:http://poj.org/problem?id=2195 Going Home Time Limit: 1000MS   Memory Limit: 65536K Total Submi ...

  9. mybatis+mysql insert添加数据后返回数据主键id

    1.根据useGeneratedKeys获取返回值,部分数据库不支持 修改mybatis xml <insert id="insertUser" useGeneratedKe ...

  10. sysconf获取系统参数

    头文件: #include <unistd.h> 原型:long sysconf(int sysnum); 示例: #include <stdio.h> #include &l ...