<!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. 【echats】echats悬浮事件频繁触发、过于灵敏、快速抖动等异常现象，适用与tooltip有关

    方案:transitionDuration设为0: 如图,发现关闭tooltip后现象消失,猜测与tooltip有关. 经过仔细观察,鼠标在快速移动时tooltip会延迟移动,就是这个时间差,让鼠标悬 ...

  2. 【Codeforces】Helvetic Coding Contest 2017 online mirror比赛记

    第一次打ACM赛制的团队赛,感觉还行: 好吧主要是切水题: 开场先挑着做五道EASY,他们分给我D题,woc什么玩意,还泊松分布,我连题都读不懂好吗! 果断弃掉了,换了M和J,然后切掉了,看N题: l ...

  3. 一行代码解决各种IE的兼容问题

    一行代码解决各种IE的兼容问题  在网站开发中不免因为各种兼容问题苦恼,针对兼容问题,其实IE给出了解决方案Google也给出了解决方案百度也应用了这种方案去解决IE的兼容问题 百度源代码如下 < ...

  4. 【VS2012】F5不能自动编译新修改

    VS2012正常使用时,如果文件有修改,按F5运行时,会自动对修改的文件进行重新编译.今天遇到的情况却并没有.度娘了下,网上有相同的问题,解决办法是“工具->选项->项目和解决方案-> ...

  5. Install Java JDK JRE on Ubuntu/Debian with Apt-Get

    Introduction As a lot of articles and programs require to have Java installed, this article will gui ...

  6. Mac安装Dart的SDK

    最近了解到谷歌推迟Flutter兼容开发iOS.Android移动应用的框架,该框架使用的语音是Dart.作为一个iOS开发者来说,不感兴趣就不正常了,于是开始从学习Dart开始,所有的开发语音其实都 ...

  7. 三层构架 和 MVC 是什么?

    作者:肖继潮链接:https://www.zhihu.com/question/24291079/answer/27339010著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 企 ...

  8. BigInteger方法总结

    BigInteger 可以用来解决数据的溢出问题. 下面我总结几种关于BigInteger的常用用法: 1.probablePrime和nextprobablePrime.(判断质数,并返回) Big ...

  9. Frequently Used Algo

    1. 链表 链表逆转 class Solution { public: ListNode* reverseList(ListNode* head) { ListNode* prev = NULL; w ...

  10. Mysql常用语句与函数（待续）

    -- 查询语句select class from stu_info where sid=1000000102;select * from stu_info t where t.age=88; -- t ...