目前好多的微信活动都有一些抽奖活动，其中就有跑马灯。

<!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实现跑马灯抽奖效果的更多相关文章

  1. JS实现跑马灯效果(向左，向上)

    <html> <head> <title>JS实现跑马灯效果</title> <style> * { font-size:12px; fon ...

  2. Android:TextView文字跑马灯的效果实现

    解决TextView文字显示不全的问题. 简单设置跑马灯的效果: <TextView android:id="@+id/textView" android:layout_wi ...

  3. 在android中用跑马灯的效果显示textview

    大家好,在我们通常的android project中,通常需要用到textview这一个布局文件,并且对于这一个显示布局所需要的文本文字内容. 下面我们就来介绍一种方法来实现在android中用跑马灯 ...

  4. Android 高级UI设计笔记05：使用TextView实现跑马灯的效果

    1. 使用TextView属性实现跑马灯的效果: (1). 新建一个Android工程,命名为"MarqueeTextViewDemo",如下: (2). 来到activity_m ...

  5. JAVA 跑马灯文字效果

    JAVA跑马灯文字效果的实现: 1. 首先创建一个继承JFrame类的HorseRaceLightTextFrame窗体类,代码如下: package com.example.horseracelig ...

  6. 它们的定义TextView使之具有跑马灯的效果

    一.引入问题 使用通用textview快乐效应,焦点事件不启动滚动,button目前的焦点事件,但丑,因此,需要定制TextView 天生焦点 个textview FocusedTextView.ja ...

  7. android使用TextView实现跑马灯的效果（1）

    android使用TextView实现跑马灯的效果 1.activity_main.xml <?xml version="1.0" encoding="utf-8& ...

  8. OC基础之推荐一个旋转木马（跑马灯）效果的图片展示Demo

    这个旋转木马(跑马灯)效果的图片展示Demo,包括设定旋转方向,图片倒影,背景设置,旋转速度,开始结束,点击显示选中的图片,彩色的块展示等等功能 效果图:(源码下载:https://github.co ...

  9. Android 纵向跑马灯滚动效果

    像淘宝和京东都会有跑马灯的效果,今天给大家贡献下以前项目的一个demo,各位看官,且看效果图. 我们先定义一个Bean文件,这个实体类文件主要包含标题,内容描述,以及还有跳转的链接. LampBean ...

随机推荐

  1. 怎么在手机上查看sqlite db

    在 从 百度应用 下载“SQLite编辑器(SQLite Editor)” 安装到手机上.前体是 手机已经Root(可以用360一键Root软件进行root).

  2. hud1166 敌兵布阵

    敌兵布阵 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submis ...

  3. SU suchart命令学习

  4. Let the Balloon Rise

    Problem Description Contest time again! How excited it is to see balloons floating around. But to te ...

  5. 枚举 POJ 2965 The Pilots Brothers' refrigerator

    题目地址:http://poj.org/problem?id=2965 /* 题意:4*4的矩形,改变任意点,把所有'+'变成'-',,每一次同行同列的都会反转,求最小步数,并打印方案 DFS:把'+ ...

  6. HDU3996 Gold Mine（最大权闭合子图）

    #include<cstdio> #include<cstring> #include<queue> #include<algorithm> using ...

  7. 【python游戏编程之旅】第一篇---初识pygame

    本系列博客介绍以python+pygame库进行小游戏的开发.有写的不对之处还望各位海涵. 一.pygame简介 Pygame 是一组用来开发游戏软件的 Python 程序模块,基于 SDL 库的基础 ...

  8. [Unity2D]Box Collider 2D盒子碰撞器

    盒子碰撞器(BoxCollider2D)是Unity2D中常用的碰撞器,所有为碰撞器,顾名思义,就是用于检测物体之间的碰撞情况的,Unity2D里面除了BoxCollider2D碰撞器之外还集成Box ...

  9. js的url中传递中文参数乱码，如何获取url中参数问题

    一:Js的Url中传递中文参数乱码问题,重点:encodeURI编码,decodeURI解码: 1.传参页面Javascript代码: <script type=”text/javascript ...

  10. iOS开发之--NSPredicate

    简述:Cocoa框架中的NSPredicate用于查询,原理和用法都类似于SQL中的where,作用相当于数据库的过滤取. 定义(最常用到的方法): NSPredicate *ca = [NSPred ...