JS跑马灯

最新推荐文章于 2024-05-13 21:44:04 发布

xinjie110120

最新推荐文章于 2024-05-13 21:44:04 发布

阅读量415

点赞数

文章标签： javascript 对象 random js html

本文链接：https://blog.csdn.net/xinjie110120/article/details/44406821

版权

通俗简单易懂~直接代码

<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="jquery.js" type="text/javascript"></script>
<head>
   <title>人品爆发</title>
   <style>
       #boxdiv {padding: 2;border: 1px solid #000000; text-align: center}
       #boxdiv li{display: inline-block;width: 100px;border: 1px solid #ccc; text-align: center}
       #start {border: 2px solid red; width: 100px; cursor: pointer; background-color: red}
       .colorred {background-color: red}
   </style>
</head>
<body>
<div class="box">
   <div style="width: 1000px;" id="boxdiv">
       <ul>
           <li>1</li>
           <li>2</li>
           <li>3</li>
           <li>4</li>
           <li>5</li>
       </ul>
       <ul>
           <li>6</li>
           <li>7</li>
           <li>8</li>
           <li>9</li>
           <li>10</li>
       </ul>
       <ul>
           <li>
               <input type="button" value="START" id="start">
           </li>
       </ul>
   </div>
</div>
</body>
<script type="text/javascript">
   var run = {
       obj : '', //对象
       itemnum : 10, //对象个数
       drawturn : ['a','b','c','d','e','f','g','h','i','j'], //奖品列表
       handle : '',//句柄
       startpoint : 0, //开始位置
       runnum : 0, //循环圈数
       speed : 700, //速度
       slowspeed : 100, // 慢速
       plusnum : 3, //加减档位置
       endpoint : 0, //最后停止的位置
       nextpoint : 0, //下一个
       eqindex : 0, //html对应的index
       lastindex : 0, //html对应的上一个index
       lastrandom : 1, //最后随机数

       'start' : function ()
       {
           //初始化数据
           this.obj = $("#boxdiv");
           this.startpoint = Math.ceil(Math.random() * this.itemnum);
           this.nextpoint = this.startpoint;
           this.runnum = Math.ceil(Math.random() * 3 + 2);
           this.endpoint = this.runnum * this.itemnum + this.startpoint + Math.ceil(Math.random() * this.itemnum) + Math.ceil(Math.random() * this.itemnum);
           this.lastrandom = Math.ceil(Math.random() * this.itemnum);

           //初始化中奖对象
           this.drawturn.sort(run.random);
           for (var i=0; i<this.itemnum; i++)
           {
               this.obj.find("li").eq(i).html(this.drawturn[i]);
           }

           //开始模块颜色变化
           this.obj.find(".colorred").removeClass("colorred");
           this.obj.find("li").eq(this.startpoint - 1).addClass("colorred");

           //按钮变成不可点击
           $("#start").unbind();

           //主函数开始执行
           this.handle = self.setInterval(run.set, this.speed);
       },

       'set' : function()
       {
           //先加1 定位到下一个
           run.nextpoint ++;

           //结束
           if (run.nextpoint >= run.endpoint)
           {
               clearInterval(run.handle);
               alert("骚~ “" + run.obj.find("li").eq(run.eqindex-1).text() + "” 中奖啦！欧日~");
               run.endpoint = 0;
               run.startpoint = 0;
               run.nextpoint = 0;
               run.runnum = 0;
               run.eqindex = 0;
               run.lastindex = 0;
               $("#start").on('click',function(){
                   run.start();
               });
               return;
           }

           //加速
           if (parseInt(run.nextpoint) == parseInt(run.startpoint) + run.plusnum)
           {
                clearInterval(run.handle);
               run.handle = self.setInterval(run.set, run.slowspeed);
           }

           //减速
           if (parseInt(run.nextpoint) == (parseInt(run.endpoint) - run.lastrandom))
           {
               clearInterval(run.handle);
               run.handle = self.setInterval(run.set, run.speed);
           }

           //显示
           run.eqindex = run.nextpoint % run.itemnum == 0 ? run.itemnum : run.nextpoint % run.itemnum;
           run.lastindex = run.eqindex - 1 == 0 ? run.itemnum : run.eqindex - 1;
           run.obj.find("li").eq(run.lastindex - 1).removeClass("colorred");
           run.obj.find("li").eq(run.eqindex - 1).addClass("colorred");
       },

       'random' : function(a, b)
       {
           return Math.random()>.5 ? -1 : 1;
       }
   }

$(document).ready(function (){
   $("#start").on('click',function(){
       run.start();
   });
});
</script>
</html>

xinjie110120

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS跑马灯

通俗简单易懂~直接代码人品爆发 #boxdiv {padding: 2;border: 1px solid #000000; text-align: center} #boxdiv li{display: inline-block;width: 100px;border: 1px solid #ccc; text-alig
复制链接

扫一扫