原生js实现跑马灯抽奖效果
目前好多的微信活动都有一些抽奖活动，其中就有跑马灯。
<!DOCTYPE html>
<html>
<head>
<title>跑马灯效果</title>
<style>
table .pao{
border:1px solid #e5e5e5;
padding:10px 20px;
}
table .on{
border-color:red;
color:red;
}
</style>
<script>
window.onload = function(){
var paomadeng = {
currentIndex : 1, //当前索引
indexCount : 12, //个数
timer : 0, //定时器
currentCycle : 0, //当前圈数
cycles : 4, //跑的圈数
speed : 400, //速度，即定时器的时间间隔
key : 0, //钥匙,随机数
btn : 0, //触发按钮
classPrefix : "pao-", //元素类名class前缀 reset : function(){
//触发对象
paomadeng.btn = this;
paomadeng.btn.style.display = "none"; clearInterval(paomadeng.timer);
paomadeng.currentCycle = 0;
paomadeng.speed = 400;
paomadeng.key = Math.ceil(Math.random() * paomadeng.indexCount);
console.log("key:" + paomadeng.key); paomadeng.run();
},
run : function(){
console.log("speed:" + paomadeng.speed); var before = paomadeng.currentIndex == 1 ? paomadeng.indexCount : paomadeng.currentIndex - 1; //设置上一索引的类名
var beforeNode = document.getElementsByClassName(paomadeng.classPrefix + before)[0];
var beforeClassNewName = beforeNode.className.replace("on","");
beforeNode.className = beforeClassNewName;
//设置当前索引的类名
var currentNode = document.getElementsByClassName(paomadeng.classPrefix + paomadeng.currentIndex)[0];
currentNode.className += " on"; //注意前面有空格 paomadeng.upSpeed();
paomadeng.downSpeed(); paomadeng.currentIndex += 1;
paomadeng.currentIndex = paomadeng.currentIndex > paomadeng.indexCount ? 1: paomadeng.currentIndex;
},
//加速
upSpeed : function(){
//前2圈且speed>100时加速
if(paomadeng.currentCycle < 2 && paomadeng.speed > 100){
paomadeng.speed -= 5 * paomadeng.currentIndex ;
paomadeng.stop();
paomadeng.start();
}
},
//增加圈数 并 减速
downSpeed : function(){
//增加圈数
if(paomadeng.currentIndex == paomadeng.indexCount){
paomadeng.currentCycle += 1;
} //如果当前所跑圈数小于总圈数-1 并且 速度小于400，那么减速
if(paomadeng.currentCycle > paomadeng.cycles-1 && paomadeng.speed < 400){
paomadeng.speed += 20;
paomadeng.stop();
paomadeng.start();
} //如果当前所跑圈数大于总圈数 且 索引值等于key，那么停止奔跑
if(paomadeng.currentCycle > paomadeng.cycles && paomadeng.currentIndex == paomadeng.key){
paomadeng.stop();
paomadeng.showPrize();
}
},
stop : function(){
clearInterval(paomadeng.timer);
},
start : function(){
paomadeng.timer = setInterval(paomadeng.run , paomadeng.speed);
},
showPrize : function(){
//过一会再显示提示信息
setTimeout(function(){
alert("恭喜，你中了" + paomadeng.key + "等奖");
paomadeng.btn.style.display = "block";
},700); }
};
document.getElementById("startPao").onclick= paomadeng.reset;
};
</script>
</head> <body>
<div class="container">
<table>
<tr>
<td class="pao pao-1">1</td>
<td class="pao pao-2">2</td>
<td class="pao pao-3">3</td>
<td class="pao pao-4">4</td>
</tr>
<tr>
<td class="pao pao-12">12</td>
<td class="pao"></td>
<td class="pao"></td>
<td class="pao pao-5">5</td>
</tr>
<tr>
<td class="pao pao-11">11</td>
<td class="pao"></td>
<td class="pao"></td>
<td class="pao pao-6">6</td>
</tr>
<tr>
<td class="pao pao-10">10</td>
<td class="pao pao-9">9</td>
<td class="pao pao-8">8</td>
<td class="pao pao-7">7</td>
</tr>
</table>
<br/>
<input type="button" value="开始跑" id="startPao" />
</div>
</body>
</html>
原生js实现跑马灯抽奖效果的更多相关文章
- JS实现跑马灯效果(向左，向上)
<html> <head> <title>JS实现跑马灯效果</title> <style> * { font-size:12px; fon ...
- Android:TextView文字跑马灯的效果实现
解决TextView文字显示不全的问题. 简单设置跑马灯的效果: <TextView android:id="@+id/textView" android:layout_wi ...
- 在android中用跑马灯的效果显示textview
大家好,在我们通常的android project中,通常需要用到textview这一个布局文件,并且对于这一个显示布局所需要的文本文字内容. 下面我们就来介绍一种方法来实现在android中用跑马灯 ...
- Android 高级UI设计笔记05：使用TextView实现跑马灯的效果
1. 使用TextView属性实现跑马灯的效果: (1). 新建一个Android工程,命名为"MarqueeTextViewDemo",如下: (2). 来到activity_m ...
- JAVA 跑马灯文字效果
JAVA跑马灯文字效果的实现: 1. 首先创建一个继承JFrame类的HorseRaceLightTextFrame窗体类,代码如下: package com.example.horseracelig ...
- 它们的定义TextView使之具有跑马灯的效果
一.引入问题 使用通用textview快乐效应,焦点事件不启动滚动,button目前的焦点事件,但丑,因此,需要定制TextView 天生焦点 个textview FocusedTextView.ja ...
- android使用TextView实现跑马灯的效果（1）
android使用TextView实现跑马灯的效果 1.activity_main.xml <?xml version="1.0" encoding="utf-8& ...
- OC基础之推荐一个旋转木马（跑马灯）效果的图片展示Demo
这个旋转木马(跑马灯)效果的图片展示Demo,包括设定旋转方向,图片倒影,背景设置,旋转速度,开始结束,点击显示选中的图片,彩色的块展示等等功能 效果图:(源码下载:https://github.co ...
- Android 纵向跑马灯滚动效果
像淘宝和京东都会有跑马灯的效果,今天给大家贡献下以前项目的一个demo,各位看官,且看效果图. 我们先定义一个Bean文件,这个实体类文件主要包含标题,内容描述,以及还有跳转的链接. LampBean ...
随机推荐
- cJSON: 一个用c写的一个简单好用的JSON解析器
转自:http://blog.csdn.net/chenzhongjing/article/details/9188347 下载地址: http://sourceforge.net/projects/ ...
- Striiv Myland 攻略
推荐一款IOS平台上的运动APP:Striiv.可以记录平时的步数,路程,卡路里,运动时间.如果购买相应的硬件,还可以记录每天爬了多少台阶(这是专门为爬楼者用的么...). 其中比较吸引我的是里面有个 ...
- 【转】Hadoop集群添加磁盘步骤
转自:http://blog.csdn.net/huyuxiang999/article/details/17691405 一.实验环境 : 1.硬件:3台DELL服务器,CPU:2.27GHz*16 ...
- sql 截取字符串与 截取字符串最长的字符串
); set @str='aa,32,22,55,7'; ) as '第一个逗号的索引值' )),),),'') as '第一个值' ),len(@str)) as '从第一逗号开始截取出后面的字符串 ...
- js:语言精髓笔记6----作用域
js基础语法:由语句.表达式和变量构成: 语句是主要表达方式:单语句->复合语句(代码块)->程序片段(函数):js中没有单元和程序的概念: 作用域: 语法作用域与变量作用域的区别:前 ...
- 简单几何(直线与圆的交点) ZOJ Collision 3728
题目传送门 题意:有两个一大一小的同心圆,圆心在原点,大圆外有一小圆,其圆心有一个速度(vx, vy),如果碰到了小圆会反弹,问该圆在大圆内运动的时间 分析:将圆外的小圆看成一个点,判断该直线与同心圆 ...
- BZOJ3931 [CQOI2015]网络吞吐量（最大流）
没啥好说的,有写过类似的,就是预处理出最短路上的边建容量网络. #include<cstdio> #include<cstring> #include<queue> ...
- BZOJ 1121 & science
1121: [POI2008]激光发射器SZK Time Limit: 10 Sec Memory Limit: 162 MB Submit: 647 Solved: 537 [Submit][Sta ...
- C# 如何判断数据是否为 NaN
double a = 0 / 0d; if (double.IsNaN(a)){ //do } 在浮点数计算中, 0除以0将得到NaN ,正数除以0将得到PositiveInfinity ,负数除以0 ...
- TYVJ P1037 阶乘统计2 Label:坑
描述 n的阶乘定义为n!=1*2*3*……*n 如3!=6 n!通常最后会有很多0,如5!=120 最后有一个0,现在统计n!去除末尾的0后,最后k位是多少 输入格式 第一行包括两个数n,k 输 ...