<!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. JavaWeb学习总结(九):Cookie进行会话管理

    一.会话的概念 会话可简单理解为:用户开一个浏览器,点击多个超链接,访问服务器多个web资源,然后关闭浏览器,整个过程称之为一个会话. 有状态会话:一个同学来过教室,下次再来教室,我们会知道这个同学曾 ...

  2. svn add @2x image 文件

    svn add `svn status . | grep "^?" | awk '{print $2"@"}'`

  3. Java 开源博客 Solo 1.5.0 发布 - 新皮肤

    Solo 1.5.0 正式发布了!这个版本主要是加入了 一款新皮肤 next,感谢一直以来关注和支持我们的朋友! 只需一个命令即可启动(不需要安装数据库.部署容器):也可以通过 war 方式部署容器, ...

  4. 开博缘由 , 可点下看看 http://www.cnblogs.com/jshare

    记录日常用中用到.遇到的问题 实现过程,仅供参考 不定时更新 ------------------- 之前看过一个文章,大概说的是开发和用到的过的代码,可以提取出一些代码片段,长时间下来,你会发现部分 ...

  5. 【Android Studio使用教程1】Android Studio导入项目的几种方法

    本篇教程中使用到的Android Studio版本为1.0, Eclipse ADT版本23.0.4.请尝试更新到该版本. Android Studio默认使用 Gradle 构建项目, Eclips ...

  6. jekyll开发静态网站

    一.Ruby环境安装配置 首先下载ruby安装ruby download ,安装完ruby后,再安装rubyGems:运行gem update --system即可. 然后下载DevKit-mingw ...

  7. Google 嘘! 嘘!

    https://www.gufen.gq(无广告,原guso.ml,ggso.ga,guge.ga) https://c.aiguso.tk (无广告,体验良好) https://d.freedo.g ...

  8. 【Oracle】数据库中sql%notfound的用法

    SQL%NOTFOUND 是一个布尔值.与最近的sql语句(update,insert,delete,select)发生交互,当最近的一条sql语句没有涉及任何行的时候,则返回true.否则返回fal ...

  9. leetcode summary-section II

    151 Reverse Words in a String class Solution { public: void reverseWords(string &s) { string res ...

  10. ASP.NET中的身份验证有那些?你当前项目采用什么方式验证请解释

    ASP.NET身份验证模式包括Windows.Forms(窗体).Passport(护照)和None(无). l  Windows身份验证—常结合应用程序自定义身份验证使用使用这种身份验证模式时,AS ...