<!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. 文件上传对servlet的要求

    request.getParamter(String name)方法不能再使用了 需要使用request.getInputStream()获取输入流对象然后在进行读取数据 解析数据 ServletIn ...

  2. Windows 7开发：UAC数据重定向 - Win32 Native

    Windows 7开发:UAC数据重定向 - Win32 Native 目标 本动手实验中,您将会学习如何: • 故障排除一个文件重定向 问题 • 使用Process Monitor查找引起问题的根本 ...

  3. 面向对象ALV选择列

    通过  gs_layout-box_fname  = 'SEL'.设置选择行,不能取到 SEL列的值 找资料:作者:f122300349 来源:CSDN 原文:https://blog.csdn.ne ...

  4. 关于对VGA、DVI、HDMI的区别

    VGA接口: DVI接口: HDMI接口 可以这么理解: 1. VGA传输普通视频信号,DVI传输高清视频信号,HDMI传输高清视频信号并支持音频传输.2. HDMI的三种接口只有大小区别,功能没有任 ...

  5. delphi7 clientdataset 详解

    delphi Midas SQLServer的自增字段的处理1.新增时,表中有自增字段,但是不希望用Refresh,直接ApplyUpdates直接看见自增字段的值在DataSetProvider.A ...

  6. windows和Linux下定时启动或关闭服务

    http://blog.csdn.net/clare504/article/details/17410643 1.Windows下的定时启动程序可以采用系统的计划和任务,定时启动服务可以在计划任务中添 ...

  7. 如何在ubuntu下重建被grub覆盖的win10引导区?

    如何在ubuntu下重建被grub覆盖的win10引导区? 1.修改grub配置文件: sudo vi /etc/default/grub 2.设置:GRUB_DEFAULT = 2 3.更新配置文件 ...

  8. C++通过Swig跨线程回调Python代码

    C++ 定义 Callback 类. PyThreadStateLock 保证垮线程调用成功: #include <Python/Python.h> class Callback { pu ...

  9. C#实现排列、组合

    排列组合的概念 排列:从n个不同元素中取出m(m≤n)个元素,按照一定的顺序排成一列,叫做从n个元素中取出m个元素的一个排列(Arrangement). 组合:从m个不同的元素中,任取n(n≤m)个元 ...

  10. apue-ubuntu环境搭建

    目录 apue环境搭建 title: apue环境搭建 date: 2019/11/19 19:25:18 toc: true --- apue环境搭建 下载编译 wget http://www.ap ...