<!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. USACO06DEC Milk Patterns——Solution

    题目描述 Farmer John has noticed that the quality of milk given by his cows varies from day to day. On f ...

  2. HTTP协议笔记整理

    有人说过,精通HTTP协议能赢过95%的前端工程师,所以我毅然的踏上这条路,哈哈哈,接下来把自己的学习笔记整理出来. 我会从比较底层的模型开始: 1.网络的五层模型 2.TCP/IP协议 3.HTTP ...

  3. Android GridView显示SD卡的图片

    GridView的XML布局: main.xml: <GridViewxmlns:android="http://schemas.android.com/apk/res/android ...

  4. Python3 中日语料分句实现

    0. 背景 因为最近在看平行语料句对齐.词对齐的缘故,想做对齐的话需要先做一个分句. 一开始利用正则和引号开关标志写了一种方法,中间想到一个小技巧,写出来比较简单通用,想把这一小段代码分享一下. 1. ...

  5. zabbix启动报错:Connection to database 'xxx' failed解决方法

    Zabbix 分布式系统监视系统 zabbix是一个基于WEB界面的提供分布式系统监视以及网络监视功能的企业级的开源解决方案. zabbix能监视各种网络参数,保证服务器系统的安全运营:并提供灵活的通 ...

  6. 集合、深浅copy

    集合set: 集合也和列表数组一样有增加,但是集合是真正的没有顺序的  所以集合无法查找的,并且集合的外观你看着好像是字典和列表的组合,因为它是用字典的括号一样 ,但是又是里面并没有键值对  只是一个 ...

  7. Redis 集群缓存测试要点--关于 线上 token 失效 BUG 的总结

    在测试账户系统过程中遇到了线上大面积用户登录态失效的严重问题,事后对于其原因及测试盲点做了一些总结记录以便以后查阅,总结分为以下7点,其中原理性的解释有些摘自网络. 1.账户系统token失效问题复盘 ...

  8. 在ASP.NET MVC中，使用Bundle来打包压缩js和css(转)

    转自:http://www.cnblogs.com/xwgli/p/3296809.html 在ASP.NET MVC4中(在WebForm中应该也有),有一个叫做Bundle的东西,它用来将js和c ...

  9. Java中面向对象三大特征

    也就是说在这里"人"是多态的, 在不同的形态时,特征行为是不一样的, 这里的"人", 同时有两种形态,一种是教师形态,一种是学生形态,所对应的特征行为分别是&q ...

  10. nmap速查表v1.0（中文版）

    基本语法: #nmap [扫描方式] [命令选项] {目标} 扫描目标格式: IPv4 地址: 192.168.1.1IPv6 地址:AABB:CCDD::FF%eth0主机名:www.target. ...