<!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. javascript变量的引用类型值

    JavaScript变量可以用来保存俩种类型的值:基本类型和引用类型值 前言 JS变量可以用来保存两种类型的值:基本类型值和引用类型值.基本类型的值源自一下5种基本数据类型:Underfined.Nu ...

  2. PHP读取Excel类文件

    想要使用PHP读取Excel文件必然要用到PHPExcel开源类库,网上资源应该挺多的.但是每一种的操作必然都是不同的,可原理应该都是大同小异. 这个文件夹里包含的就是PHPExcel类文件,在外面还 ...

  3. SQL-字符串运算符和函数

    COALESCE(columnname,string) 函数 将 NULL 值作为字符串(用空字符串或其他字符串替换 NULL)- 接受一列输入值(字段)如果该字段为 NULL,则返回后面替换的字符串 ...

  4. FineReport如何手动推送APP消息

    在报表填报成功后,发送消息至APP会提示数据已更新.再次期间用户需要有查看该模板的权限,如果没有的话,则无法接受到提示信息.那么在FineReport移动端中,如何手动推送APP消息呢? 具体用法 在 ...

  5. (C#) 多线程访问int, bool 等值类型变量

    参考: https://stackoverflow.com/questions/154551/volatile-vs-interlocked-vs-lock/154803

  6. 4类Storage方案（AS开发实战第四章学习笔记）

    4.1 共享参数SharedPreferences SharedPreferences按照key-value对的方式把数据保存在配置文件中,该配置文件符合XML规范,文件路径是/data/data/应 ...

  7. restful知识点之五解析器_响应器_分页器

    解析器 request.post:当数据时content-type urlencoded类型时才有数据 当content-type:是formdata时需要从request.body里取数据 requ ...

  8. Intel酷睿前世今生（一）

    Intel酷睿系列自诞生起就树立了桌面CPU霸主的地位,酷睿i系列更是无人能敌.它是Intel阻击AMD多核构架的救赎主,也是AMD复兴梦想的收割者.而Intel酷睿系列已经经历几代了,不知还有多少看 ...

  9. awk 截取某段时间的日志

    好久没有截取nginx/haproxy 中 的日志了,竟有点不熟悉了. 记录一下,以免以后忘记. NGINX 日志格式: 192.168.1.26 - - [14/Sep/2017:16:48:42 ...

  10. December 07th 2016 Week 50th Wednesday

    Life is a flower, and love is the honey of the flower. 人生是花儿,而爱情就是花的蜜. My life is not as beautiful a ...