<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <title>Document</title>

     <style>

         table {

             width: 600px;

             height: 600px;

             border: 2px solid black;

             margin: 0 auto;

             border: 2px solid black;

         }

         table td {

             border: 2px solid black;

             width: 200px;

             text-align: center;

         }

         p {

             text-align: center;

             height: 10px;

         }

         span {

             color: red;

         }

         #star {

             /* background: gray; */

             font-size: 20px;

         }

         .cj.back {

             background: orange;

         }

         div {

             height: 20px;

             text-align: center;

         }

     </style>

 </head>

 <body>

     <div>

         <p></p>

         <div id="last"></div>

         <table>

             <tr>

                 <td class="cj" id="c1">奖5元</td>

                 <td class="cj" id="c2">谢谢惠顾</td>

                 <td class="cj" id="c3">奖100元</td>

             </tr>

             <tr>

                 <td class="cj" id="c8">再抽一次</td>

                 <td id="star">开始抽奖</td>

                 <td class="cj" id="c4">奖50元</td>

             </tr>

             <tr>

                 <td class="cj" id="c7">奖20元</td>

                 <td class="cj" id="c6">奖500元</td>

                 <td class="cj" id="c5">奖200元</td>

             </tr>

         </table>

     </div>

     <script src="./js/jquery-1.12.4.min.js"></script>

     <script>

         let s = 5;

         let time = setInterval(function () {

             $('p').html(`抽奖倒计时,还有<span>${s}</span>秒`);

             s--;

             if (s < 0) {

                 clearInterval(time)

                 $("#star").css({

                     background: "grey",

                     "font-size": "24px"

                 })

             }

         }, 1000)

         $('#star').on('click', function () {

             let i = 0;

             let t = 0;

             let num = parseInt(Math.random() * 8 + 1)

             console.log(num)

             change = setInterval(function () {

                 i++;

                 if (i > 8) {

                     i = 1;

                     t++;

                 }

                 $('.cj').removeClass('back')

                 $('#c' + i).addClass('back')

                 if (t == 4) {

                     if (i == num) {

                         clearInterval(change)

                         $('#last').html(`恭喜你中奖：${$('#c' + i).text()}`)

                     }

                 }

             }, 200)

         })

     </script>

 </body>

 </html>

用jQuery编写简单九宫格抽奖的更多相关文章

  1. JavaScript编写简单的抽奖程序

    1.需求说明 某公司年终抽奖,需要有如下功能 1)可以根据实际情况设置到场人数的最大值 2) 点击“开始”,大屏幕滚动,点击“停止”,获奖者的编号出现在大屏幕上 3)在界面里显示全部奖项获奖人编号 4 ...

  2. Node 使用webpack编写简单的前端应用

    编写目的 1. 使用 Node 依赖webpack.jQuery编写简单的前端应用. 操作步骤 (1)新建一个目录 $ mkdir simple-app-demo $ cd simple-app-de ...

  3. PHP+jQuery开发简单的翻牌抽奖实例

    PHP+jQuery开发简单的翻牌抽奖实例,实现流程:页面放置6个方块作为奖项,当抽奖者点击某一块时,方块翻转到背面,显示中奖信息,这个奖品是随机的,不是固定的. 在页面上放置6个奖项: <ul ...

  4. Js写九宫格抽奖

    国庆出去转了一圈,回来及时把以前写的一些有用的在这儿记录一下 --------------------------------------------我是分割线-------------------- ...

  5. 使用jQuery+PHP+Mysql实现抽奖程序

    抽奖程序在实际生活中广泛运用,由于应用场景不同抽奖的方式也是多种多样的.本文将采用实例讲解如何利用jQuery+PHP+Mysql实现类似电视中常见的一个简单的抽奖程序. 查看演示 本例中的抽奖程序要 ...

  6. PHP+jQuery实现翻板抽奖

    翻板抽奖的实现流程:前端页面提供6个方块,用数字1-6依次表示6个不同的方块,当抽奖者点击6个方块中的某一块时,方块翻转到背面,显示抽奖中奖信息.看似简单的一个操作过程,却包含着WEB技术的很多知识面 ...

  7. jQuery+PHP掷色子抽奖

    原文 jQuery+PHP掷色子抽奖 本文以大富翁游戏为背景,综合运用jQuery和PHP知识,设计出以掷色子点数来达成抽奖的效果,当然抽奖概率是可控的,开发者可以将本实例稍作修改即可运用到网站中的抽 ...

  8. jQuery系列 第一章 jQuery框架简单介绍

    第一章 jQuery框架简单介绍 1.1 jQuery简介 jQuery是一款优秀的javaScript库(框架),该框架凭借简洁的语法和跨平台的兼容性,极大的简化了开发人员对HTML文档,DOM,事 ...

  9. PHP+jQuery实现翻板抽奖（中奖概率算法）

    在电视节目中有一种抽奖形式暂且叫做翻板抽奖,台上有一个墙面,墙面放置几个大方块,主持人或者抽奖者翻开对应的方块即可揭晓中奖结果.类似的抽奖形式还可以应用在WEB中,本文将使用PHP+jQuery为您讲 ...

随机推荐

  1. html5 表单 填表 select 下拉 textarea多行文本 output Js计算结果

    <select>     下拉 <select>下有很多属性 name        其实有name就有value了,因为button提交的都是? name=value的格式, ...

  2. C++学习笔记(3)----类模板的static成员

    与任何其他类相同,类模板可以声明 static 成员: template <typename T> class Foo { public: static std::size_t count ...

  3. python判断一个数字是整数还是浮点数&判断整除

    判断整数还是浮点数   >>> a=123 >>> b=123.123 >>> isinstance(a,int) True >>&g ...

  4. Fragment初探

    Fragment允许将Activity拆分成多个完全独立封装的可重用的组件,每个组件有它自己的生命周期和UI布局.Fragment最大的优点是为不同屏幕大小创建灵活的UI.每个Fragment都是独立 ...

  5. Vue小案例（一）

    案例需求: 创建一个品牌展示表格,表头有编号(id),品牌名称(name),创建时间(time)和操作,需要实现的功能是对数据的增删操作,和时间的格式化. 思路分析:在开发之前需要想清楚要用到Vue中 ...

  6. 计算fibonacci数（多种方法）

    #include <iostream> using namespace std; //计算fibonacci数 //方法一:二分递归法,时间复杂度为O(2^n),额外空间复杂度为常数 in ...

  7. 网络编程进阶---->>> hamc模块 socketserver模块验证合法性 两者进行通信连接

    我们在工作中经常遇到,你公司内的某一台电脑要去访问你的服务器或者一个服务端电脑,那么你是让每一台都进行连接吗?  那不可能的  你肯定要进行限定的 验证客户端链接的合法性: hamc模块 hamc也是 ...

  8. bmp制作自定义字体（cocostudio使用）

    工具需求:bmpfont 1.步骤 (1)制作 * 把自己的字体放到一个txt文件中,写个脚本抽离出来, 重复了没有关系 * Edit->Select chars from fils(注意:Ed ...

  9. 创建 In-app Billing 商品

    创建可供购买的 In-app Billing 商品 在你发布 In-app Billing 应用前,你需要在 Google Play 开发者控制台 定义可供购买的数字商品列表. 在 Google Pl ...

  10. 多变量线性回归 matlab

    %multivariate_linear_regression data=load('data.txt'); x=data(:,1:2); y=data(:,3); m=length(x(:,1)); ...