热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

js抽奖程序(跑马灯效果)

显示效果图:<divid"gameContent"><tableid"gameTable"><t
显示效果图:


12345
166
157
148
131211109


#gameContent{position:absolute;right:19px;top:19px;width:360px;}#gameContent table{ float:right;border-collapse:separate;border-spacing: 2px;}#gameContenttd{width:30px;height:30px;text-align:center;vertical-align:middle;border:1pxsolid #ffdd99; background:#fff9ed;}#gameContentp{position:absolute;right:36px;top:36px;width:100px;height:100px;background:url("../image/game.jpg") no-repeat 0 0;padding-left:0;}#gameContent p.waitGame{background:url("../image/game.jpg") no-repeat -200px 0;}#gameBtn{z-index:999;display:block;width:100px;height:100px;}#gameBtn:hover{cursor:pointer;background:url("../image/game.jpg")no-repeat -100px 0;}
function GetSide(m, n) {
//初始化数组
var arr = [];
for (var i = 0; i arr.push([]);
for (var j = 0; j arr[i][j]= i * n + j;
}
}
//获取数组最外圈
var resultArr =[];
var tempX = 0,
tempY = 0,
direction = "Along",
count = 0;
while (tempX>= 0 && tempX= 0 && tempY count++;
resultArr.push([tempY, tempX]);
if (direction == "Along") {
if (tempX== n - 1)
tempY++;
else
tempX++;
if (tempX== n - 1 && tempY == m - 1)
direction = "Inverse"
}
else {
if (tempX== 0)
tempY--;
else
tempX--;
if (tempX== 0 && tempY == 0)
break;
}
}
return resultArr;
}

$(document).ready(function () {
var index = 0, //当前亮区位置
prevIndex = 0, //前一位置
Speed = 300, //初始速度
Time, //定义对象
arr = GetSide(5, 5), //初始化数组
EndIndex = 0, //决定在哪一格变慢
cycle = 0, //转动圈数
EndCycle = 0, //计算圈数
flag = false, //结束转动标志
quick = 0, //加速
gameTable =document.getElementByIdx_x("gameTable");
$("#gameBtn").click(function () {
var stopNum = Math.floor(Math.random() * 15 +1);//点击产生随机数,最后将停在次数上
$.COOKIE("stopNum",stopNum);//存入COOKIE,使得全局可以调用
$(this).hide(); //开始后隐藏开始按钮
$(this).parent().addClass("waitGame");
cycle = 0;
flag = false;
EndIndex = Math.floor(Math.random() * 16);
EndCycle = 1;
Time = setInterval(Star, Speed);
});

function Star(num){
gameTable.rows[arr[index][0]].cells[arr[index][1]].style.border ="1px solid pink";
gameTable.rows[arr[index][0]].cells[arr[index][1]].style.background= "pink";
if (index > 0) {
prevIndex= index - 1;
}
else {
prevIndex= arr.length - 1;
}
gameTable.rows[arr[prevIndex][0]].cells[arr[prevIndex][1]].style.border= "1px solid #ffdd99";
gameTable.rows[arr[prevIndex][0]].cells[arr[prevIndex][1]].style.background= "#fff9ed";
index++;
quick++;

if (index >= arr.length) {
index =0;
cycle++;
}

//跑马灯变速
if (flag == false) {
//走五格开始加速
if (quick== 5) {
clearInterval(Time);
Speed = 50;
Time = setInterval(Star,Speed);
}
//跑N圈减速
if (cycle== EndCycle + 1 && index ==EndIndex) {
clearInterval(Time);
Speed = 300;
flag = true; //触发结束
Time = setInterval(Star,Speed);
}
}
if (flag == true&& index == $.COOKIE("stopNum") -1) {
quick =0;
clearInterval(Time);
$("#gameContent p").removeClass("waitGame");
$("#gameBtn").show(); //停止后显示开始按钮
}
}
})
参考来源:http://www.cnblogs.com/caism/archive/2011/10/12/2208738.html

推荐阅读
  • Leetcode学习成长记:天池leetcode基础训练营Task01数组
    前言这是本人第一次参加由Datawhale举办的组队学习活动,这个活动每月一次,之前也一直关注,但未亲身参与过,这次看到活动 ... [详细]
  • 本文详细介绍了 Spark 中的弹性分布式数据集(RDD)及其常见的操作方法,包括 union、intersection、cartesian、subtract、join、cogroup 等转换操作,以及 count、collect、reduce、take、foreach、first、saveAsTextFile 等行动操作。 ... [详细]
  • Ihavetwomethodsofgeneratingmdistinctrandomnumbersintherange[0..n-1]我有两种方法在范围[0.n-1]中生 ... [详细]
  • 遗传算法中选择算子为何置于交叉算子和变异算子之前?本文探讨了这一问题,并详细介绍了遗传算法中常用的选择算子类型及其作用机制。此外,还分析了不同选择算子对算法性能的影响,为实际应用提供了理论依据。 ... [详细]
  • 2018 HDU 多校联合第五场 G题:Glad You Game(线段树优化解法)
    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=6356在《Glad You Game》中,Steve 面临一个复杂的区间操作问题。该题可以通过线段树进行高效优化。具体来说,线段树能够快速处理区间更新和查询操作,从而大大提高了算法的效率。本文详细介绍了线段树的构建和维护方法,并给出了具体的代码实现,帮助读者更好地理解和应用这一数据结构。 ... [详细]
  • 分享一款基于Java开发的经典贪吃蛇游戏实现
    本文介绍了一款使用Java语言开发的经典贪吃蛇游戏的实现。游戏主要由两个核心类组成:`GameFrame` 和 `GamePanel`。`GameFrame` 类负责设置游戏窗口的标题、关闭按钮以及是否允许调整窗口大小,并初始化数据模型以支持绘制操作。`GamePanel` 类则负责管理游戏中的蛇和苹果的逻辑与渲染,确保游戏的流畅运行和良好的用户体验。 ... [详细]
  • 本文介绍了UUID(通用唯一标识符)的概念及其在JavaScript中生成Java兼容UUID的代码实现与优化技巧。UUID是一个128位的唯一标识符,广泛应用于分布式系统中以确保唯一性。文章详细探讨了如何利用JavaScript生成符合Java标准的UUID,并提供了多种优化方法,以提高生成效率和兼容性。 ... [详细]
  • 探索聚类分析中的K-Means与DBSCAN算法及其应用
    聚类分析是一种用于解决样本或特征分类问题的统计分析方法,也是数据挖掘领域的重要算法之一。本文主要探讨了K-Means和DBSCAN两种聚类算法的原理及其应用场景。K-Means算法通过迭代优化簇中心来实现数据点的划分,适用于球形分布的数据集;而DBSCAN算法则基于密度进行聚类,能够有效识别任意形状的簇,并且对噪声数据具有较好的鲁棒性。通过对这两种算法的对比分析,本文旨在为实际应用中选择合适的聚类方法提供参考。 ... [详细]
  • PHP 5.5.31 和 PHP 5.6.17 安全更新发布
    PHP 5.5.31 和 PHP 5.6.17 已正式发布,主要包含多个安全修复。强烈建议所有用户尽快升级至最新版本以确保系统安全。 ... [详细]
  • 本文介绍了如何在Python中使用插值方法将不同分辨率的数据统一到相同的分辨率。 ... [详细]
  • 2020年9月15日,Oracle正式发布了最新的JDK 15版本。本次更新带来了许多新特性,包括隐藏类、EdDSA签名算法、模式匹配、记录类、封闭类和文本块等。 ... [详细]
  • C#实现文件的压缩与解压
    2019独角兽企业重金招聘Python工程师标准一、准备工作1、下载ICSharpCode.SharpZipLib.dll文件2、项目中引用这个dll二、文件压缩与解压共用类 ... [详细]
  • Spring Data JdbcTemplate 入门指南
    本文将介绍如何使用 Spring JdbcTemplate 进行数据库操作,包括查询和插入数据。我们将通过一个学生表的示例来演示具体步骤。 ... [详细]
  • 使用PyQt5与OpenCV实现电脑摄像头的图像捕捉功能
    本文介绍了如何使用Python中的PyQt5和OpenCV库来实现电脑摄像头的图像捕捉功能。通过结合这两个强大的工具,用户可以轻松地打开摄像头并进行实时图像采集和处理。代码示例展示了如何初始化摄像头、捕获图像并将其显示在PyQt5的图形界面中。此外,还提供了详细的步骤说明和代码注释,帮助开发者快速上手并实现相关功能。 ... [详细]
  • 精通jQuery:深入解析事件处理机制与应用技巧
    本文详细探讨了jQuery的事件处理机制及其应用技巧,通过具体的代码示例,逐一解析了每个jQuery代码片段与其对应的HTML结构。文章以标记为基准,CSS作为通用样式,确保每段代码都能独立运行。HTML和CSS代码统一放置在文章末尾,方便读者参考和实践。 ... [详细]
author-avatar
奋斗的小鸟
这个家伙很懒,什么也没留下!
Tags | 热门标签
RankList | 热门文章
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有