<!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. 组件基础之动态tab组件

    <template> <div id="demo31"> <p>-----------------组件基础之动态tab组件一---------- ...

  2. ClipDrawable

    Clip可以译为剪的意思,我们可以把ClipDrawable理解为从位图上剪下一个部分; Android中的进度条就是使用ClipDrawable来实现的,他根据设置level的值来决定剪切 区域的大 ...

  3. 使用iptables为docker容器动态添加端口映射

    1.将当前iptables的配置写入保存到/etc/sysconfig/iptables 2.保存 /etc/init.d/iptables sava 3.修改iptables配置(vi /etc/s ...

  4. nginx重新编译不停服

    找到安装nginx的源码根目录,如果没有就下载新的安装包 .tar.gz 查看ngixn版本极其编译参数 /usr/local/nginx/sbin/nginx -V 进入nginx源码目录 cd n ...

  5. CSS - clearfix清除浮动

    首先,我们来解释一下为什么要使用 clearfix(清除浮动). 通常我们在写html+css的时候,如果一个父级元素内部的子元素是浮动的(float),那么常会发生父元素不能被子元素正常撑开的情况, ...

  6. 利用Gabor变换法分析纹理图像 matlab代码实现

    Gabor变化属于加窗傅里叶变换,Gabor函数可以在频域不同尺度.不同方向上提取相关的特征.Gabor函数与人眼的生物作用相仿,所以经常用于纹理识别上,并取得了较好的效果. 二维Gobor滤波函数: ...

  7. 从Odds：比值比推导出Logtic分类的算法

    在从概率模型推导出逻辑回归算法模型的博文中,我试着从李宏毅老师的课程中讲到的概率模型去推导逻辑分类的算法模型.有幸看到另外一篇博文01 分类算法 - Logistic回归 - Logit函数,我了解到 ...

  8. kali PIN码破解

    airmon-ng start wlan0   //开启网卡airodump-ng wlan0mon    //监听模式,查找开启wps的apreaver -i wlan0mon -b [ap’s m ...

  9. 洛谷 题解 P4955 【[USACO14JAN]Cross Country Skiing 越野滑雪】

    二分+DFS 看到这么多大佬写了并查集,BFS的,还没有人写DFS版的,那么肯定是要来水水积分的啦毕竟这可是道伪紫题呢! 做法楼上楼下也讲得很清楚了吧,详见代码的注释 #include<bits ...

  10. 【Cisco】实现同一个路由器一个端口用动态路由，另一个端口用静态路由

    一.先构建以下网络图: 准备三台路由器,三台交换机,三台主机,连接所有设备并配置端口IP和网关,DCE端口的时钟频率都设置为64000.