js抽奖以及文字滚动 源码下载

【实例简介】
【实例截图】

【核心代码】

<style type="text/css">
    #tbroundel {
        width: 210px;
        height: 210px;
    }

        #tbroundel td {
            width: 70px;
            height: 70px;
            text-align: center;
        }

    #RunDraw {
        padding: 0;
        text-align: center;
    }

        #RunDraw input {
            width: 100%;
            height: 100%;
            margin: 0;
            background-color: Red;
        }
</style>



<div style=" width:240px; height:232px;   background-image:url(Roundel.png);">
    <!--再在中间放一个div用margin搞到中间去-->

    <div style=" width:210px; height:210px; margin:15px 11px 15px 11px;">
        <!--  再在div里放table充满 -->
        <!--HTML代码，就是建立一个table设成这个样子，给存放奖品的td加一下统一的name-->

        <table id="tbroundel">
            <tr>
                <td name="roundelgoods" id="turn1">1</td>
                <td name="roundelgoods" id="turn2">2</td>
                <td name="roundelgoods" id="turn3">3</td>
            </tr>

            <tr>
                <td name="roundelgoods" id="turn8">8</td>
                <td id="RunDraw"><input id="btnrun" type="button" value="开始" onclick="startup()" /></td>
                <td name="roundelgoods" id="turn4">4</td>
            </tr>
            <tr>
                <td name="roundelgoods" id="turn7">7</td>
                <td name="roundelgoods" id="turn6">6</td>
                <td name="roundelgoods" id="turn5">5</td>
            </tr>
        </table>
    </div>

</div>
<script type="text/javascript">

    var t; ///用它存放setinterval,不用扣得太细，因为只要用到setinterval最后就得用     window.clearInterval(t);去释放他
    var index = 1;/////这个用来记录当前循环的次数，比如点了抽奖要转四圈，每转一圈有8个奖品，那一共就要循环8*圈数
    var circles = 1;////抽奖要转的圈数
    var currentcircles = 1; ///记录当前是第几圈setinterval的第二个参数，通过操纵他来实现变速
    var speed = 0;/////转动的速度,用它作为
    var endpoint = 0; /////最后停止的位置，即选中了谁
    ////抽奖开始
    function startup() {
        ///点一次抽奖过程中按钮禁用
        document.getElementById("btnrun").disabled = true;

        /////随机生成圈数，要跑几圈，不要太少了，太少了看着就不舒服。这里是生成4-14以内的随机整数
        circles = Math.round(Math.random() * 10   3);
        /////终结点，生成1-8之内的随机数,因为你一圈有8个奖品
        endpoint = Math.round(Math.random() * 8);


        ////当前的圈数
        currentcircles = 1;
        ////速度，谁的太高了会很慢
        speed = 700;
        ////当前循环的次数
        index = 1;
        /////取得放奖品的<td>的数组
        var goods = document.getElementsByName("roundelgoods");
        ////存放奖品的<td>的数组
        var drawturn = [];
        ////遍历加入到drawturn数组里
        for (var i = 0; i < (8) ; i  ) {
            // document.getElementById("turn"   (i   1)).style.border = "0";
            ////加入时把他们的样式置为初始样式
            document.getElementById("turn"   (i   1)).style.fontSize = "large";
            document.getElementById("turn"   (i   1)).style.color = "black";
            ///push方法，向数组内追加一个元素
            drawturn.push(document.getElementById("turn"   (i   1)));
        }


        ////开始循环
        t = setInterval(HighTurn, speed);
    }

    ///循环奖品方法
    function HighTurn() {


        /////如果当前循环次数大于1，则当前循环说明不是1号奖品，那就得吧这个奖品的前一个兄弟的样式设为初始值
        if (index > 1) {
            /////当然如果这时候index除以8余数为1的话说明这时至少循环完一圈且刚好又循环到1号奖品了，这就不能用(数组下标-1）的方法去清除样式了，因为他的前一位是上一次循环的8号奖品
            if ((index % 8) == 1) {
                //  document.getElementById("turn8").style.border = "0
                document.getElementById("turn8").style.fontSize = " large";
                document.getElementById("turn8").style.color = "black";
            }
                ////如果不是的话就好说了，直接(数组下标-1)清除样式
            else {
                //document.getElementById("turn"   ((index - (8 * (currentcircles - 1))) - 1)).style.border = "0";
                document.getElementById("turn"   ((index - (8 * (currentcircles - 1))) - 1)).style.fontSize = " large";
                document.getElementById("turn"   ((index - (8 * (currentcircles - 1))) - 1)).style.color = "black";
                //  document.getElementById("turn"   ((index - (8 * (currentcircles - 1))) - 1)).style.border = "3px solid #ccc";
            }
        }
        ////处理完前一个商品的样式后再来改变当前奖品的样式——大号字体，红色
        document.getElementById("turn"   (index - (8 * (currentcircles - 1)))).style.fontSize = " xx-large";
        document.getElementById("turn"   (index - (8 * (currentcircles - 1)))).style.color = "red";

        ///完事之后判读现在的循环次数除以8的余数是否为0，如果为零则说明一次循环已经到了最后一个奖品，接下来要进入下一圈了（不需要考虑第一次循环的，因为index的初始值是1,1/8不为0）
        if ((index % 8) == 0) {
            // 进入下一圈就得当前圈数 1
            currentcircles  ;
        }
        ///然后循环次数 1，不要把它放到圈数加1的前面去
        index  ;
        ///这里用来改变速度，在下设定的规则是在第一圈是每经过一个奖品则速度 80，setInterval的第二个参数是多长时间执行一次的意思，所以值越小，执行的频率越高
        if (currentcircles == 1) {
            ///注意了，我就是因为没写这句话被闷了好半天，不写他的话你的程序会一直在跑setInterval释放不了。因为改变了setInterval的参数要让他生效的话就得重新执行(我也不懂，但是试了一下这样好使)。所以先把之前的清一下
            window.clearInterval(t);
            ///改变速度
            speed -= 80;
            ///在重新执行
            t = setInterval(HighTurn, speed);
        }
            ///在下设定的在最后一圈的时候开始减速
        else if (currentcircles == circles) {
            window.clearInterval(t);
            speed  = 80;
            t = setInterval(HighTurn, speed);
        }


        ////用来判断是否循环完了，如果当前圈数==要循环的圈数，且当前循环到的奖品编号==终结点则判定为循环结束，最终会停在终结点位置的奖品上
        if (circles == currentcircles && ((index - 1) % 8) == endpoint) {
            ///清除setInterval
            window.clearInterval(t);
            ///回复按钮使用
            document.getElementById("btnrun").disabled = false;
            alert("恭喜抽中了"   endpoint   "号奖品");
            return;
        }


    }

</script>




//跑马灯
<marquee direction="up" scrollamount="1" style="width: 210px;height: 100px" id="">
    <a href="#">纤云弄巧，飞星传恨，银汉迢迢暗度。</a><br />
    <a href="#">金风玉露一相逢，便胜却、人间无数。</a><br />
    <a href="#">柔情似水，佳期如梦。忍顾鹊桥归路！</a><br />
    <a href="#">两情若是久长时，又岂在、朝朝暮暮。</a><br />
    <a href="#">千重劫，百世难，亘古匆匆，弹指间！</a><br />
    <a href="#">不死躯，不灭魂，震古烁今，无人敌！</a><br />
    <a href="#">待到阴阳逆乱时，以我魔血染青天！</a><br />
</marquee>