<!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. ztree 获取当前选中节点的子节点集合

    功能:获取当前选中节点的子节点id集合. 步骤:1.获取当前节点 2.用ztree的方法transformToArray()获取当前选中节点(含选中节点)的子节点对象集合. 3.遍历集合,取出需要的值 ...

  2. Android解析WindowManagerService（一）WMS的诞生

    前言 此前我用多篇文章介绍了WindowManager,这个系列我们来介绍WindowManager的管理者WMS,首先我们先来学习WMS是如何产生的.本文源码基于Android 8.0,与Andro ...

  3. 使用wm_concat函数导致字符串过长

    场景:使用select wm_concat(xxxxx) from table 的时候 返回的字符串过长 解决方案 :使用to_clob 将字符串转成 clob类型,但是由于使用的前端框架不能解析cl ...

  4. C# 元素组合算法

    class Program { static void Main(string[] args) { string[] a = { "A", "B", " ...

  5. 听说是个集成版的监控,不知道你听过没? C+C+N

    Cnyunwei-Cacti+Nagios 下载地址1:http://pan.baidu.com/s/1mgn1rsc 下载地址2:http://sourceforge.net/projects/cn ...

  6. python的enumerate函数

    python的enumerate函数用于循环索引和元素 例如 foo = 'abc' for i , ch in enumerate(foo): print ch, '(%d)' % i 输出结果: ...

  7. Linux Samba配置文件常用参数详解

    目录 1.全局参数 2.共享参数   Samba的主配置文件叫smb.conf,默认在/etc/samba/目录下. smb.conf含有多个段,每个段由段名开始,直到下个段名.每个段名放在方括号中间 ...

  8. 沉淀，再出发：结合案例看python

    沉淀,再出发:结合案例看python 一.前言 关于python,如果不经过大型程序开发的洗礼,我们很难说自己已经懂得了python了,因此,我们需要通过稍微结构化的编程来学习python. 二.一个 ...

  9. VS 2012 在 windows 8 中无法使用 Deubgger.Lunch() 对服务进行调试

    找到了外文资料:   Debugger.Launch() not displaying JIT debugger selection popup on Windows 8/8.1   If execu ...

  10. github发布静态页面

    github发布静态页面:https://wangc1993.github.io/2019/01/07/2/