原生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 ...

随机推荐

谈敏捷，谈开发 --《Agile Software Development》读后感
谈敏捷,谈开发 --<Agile Software Development>读后感北航计算机学院 110616班 11061171 毛宇联系方式:maoyu815930@sina.co ...
Python开发的10个小贴士
下面是十个Python中很有用的贴士和技巧.其中一些是初学这门语言常常会犯的错误. 注意:假设我们都用的是Python 3 1. 列表推导式你有一个list:bag = [1, 2, 3, 4, 5 ...
Hark的数据结构与算法练习之臭皮匠排序
算法说明个人感觉是没有意义的算法,只是用来作为学术研究.或者说开拓一下思维. 从wikipedia copy来的一句解释的话:Stooge排序是一种低效的递归排序算法,甚至慢于冒泡排序.在<算 ...
lr参数化——500户并发迭代1次循环取5条数据
lr参数化——500户并发迭代1次循环取5条数据比如vuser1.vuser2.vuser3..........,vuser500 shuju1,shuju2,shuju3,shuju4,shuj ...
DevExpress DXperience 的ASPxFilterControl 不显示 Like 菜单的方法
当使用Linq 作为数据源时,如果使用 ASPxFilterControl 的 Like 菜单筛选数据,就会出现以下错误 LINQ to Entities does not recognize the ...
Nginx location 匹配规则
1. default_server: 当请求没有匹配到服务器中配置的任何一个server的时候,会默认把请求route到配置了default_server的virtual host中.参考地址:htt ...
[原]Android Studio查询SHA1的方法
前提:C:\Users\Administrator\AndroidStudioProjects文件夹中存在xxx.jks秘钥文件,比如: 进入Android Studio的Terminal: Micr ...
spring整合quartz并持久化
spring整合quartz有两种方式: 一.常见是使用配置文件,将定时任务保存到内存中简单示例:  <bean id="overd ...
MatLab GUI Load .mat File 导入mat文件
在MatLab中,我们用GUI时,有时候需要导入mat格式的图片,但是在GUI中调用load和在命令行里调用load不一样,在命令行里调用load('im.mat'),加载进去是uint8的矩阵,但是 ...
C Memory Layout C语言中的内存布局
在C语言中,内存的主要分为下列几部分: 1. Text/Code Segment 文本/代码区 2. Initialized Data Segments 初始化的数据区 3. Uninitialize ...

原生js实现跑马灯抽奖效果

原生js实现跑马灯抽奖效果的更多相关文章

随机推荐

热门专题