javascript - 用js做抽奖效果时，显示不正常，希望大神指点。-PHP中文网问答

讲师中心微信公众号

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题人工智能 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架人工智能 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI聊天问答 Agent智能体 AI文本写作 AI绘画作图 AI设计工具 AI视频创作 AI音频制作 AI办公学习 AI编程开发 AI提示词

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机游戏

最近更新

javascript - 用js做抽奖效果时，显示不正常，希望大神指点。

PHP中文网 2017-04-11 10:27:59

[JavaScript讨论组]

468

今天在用js做一个简单的抽奖效果时显示有问题，代码在下面，希望大神指点

PHP中文网

认证0级讲师

全部回复(2)

高洛峰2017-04-11 10:29:59 2楼

你想要的是什么效果？外围一圈奖项转圈依次亮起，亮完一圈之后结束吗？

补充答案：
首先这段代码肯定是实现不了你要的效果。
你设置了一个数组储存对应dom。
然后新建了一个函数_loop，循环了一遍数组，对各种情况进行了判断。（第二种情况也应该是<=15，否则最后一项永远不会active）。
最后用了一个setTimeout定时器，效果是500ms后执行_loop，而_loop就是一个瞬间完成的循环，最后i=14时active了arr[14]。

你自己实际写的时候肯定还会遇到很多问题，最有可能的是把setTimeout放到for循环中之后，发现i没法传递到计时器里，这就是个闭包或者说块状作用域的问题，相关资料很多，看完答案一定要搞懂。

用闭包解决：

var arr = ['c1','c2','c3','c4','c5','c6','c7','c8','c1','c2','c3','c4','c5','c6','c7','c8'], timer;

var loop = function (i) {
    console.log(i)
    if (i === 0) {
        $('#'+arr[0]).addClass('active');
    }
    if( i > 0 && i <= 15 ){
        $('#'+arr[i-1]).removeClass('active');
        $('#'+arr[i]).addClass('active');
    }
};

for (var i = 0; i < arr.length; i++) {
    (function (a) {
        setTimeout(function () {
            loop(a);
        }, 500 * i);
    })(i);
};

闭包解决的也是块状作用域的问题，在es6标准下，可以用更语义化的let解决：

// es6
var loop = function (i) {
    console.log(i)
    if (i === 0) {
        $('#'+arr[0]).addClass('active');
    }
    if( i > 0 && i <= 15 ){
        $('#'+arr[i-1]).removeClass('active');
        $('#'+arr[i]).addClass('active');
    }
};
for (let i = 0; i < arr.length; i++) {
    setTimeout(function () {
        loop(i);
    }, 500 * i)
};

赞 +0

添加回复

迷茫2017-04-11 10:29:59 1楼

在你的代码的基础上改了一下，你自己对比一下修改的地方吧。;)
总体来说代码还是有点不忍直视的，加油学习吧。

<html>
    <head>
        <meta charset="utf-8">
        <title>抽奖</title>
        <style media="screen">
            *{
                margin: 0;
                padding: 0;
            }
            .box{
                width: 600px;
                height: 300px;
                font-size: 0;
                margin: 200px auto;
            }
            span{
                display: inline-block;
                float: left;
                width: 200px;
                height: 100px;
                line-height: 100px;
                text-align: center;
                color: #fff;
                background-color: #009933;
                font-size: 16px;
            }
            #btn{
                background-color: #3399FF;
            }
            .active{
                background-color: #CC0033;
            }
        </style>
    </head>
    <body>
        <p class="box">
            <span id="c1">一等奖</span>
            <span id="c2">二等奖</span>
            <span id="c3">三等奖</span>
            <span id="c8">谢谢参与</span>
            <span id="btn">点击抽奖</span>
            <span id="c4">一等奖</span>
            <span id="c7">三等奖</span>
            <span id="c6">二等奖</span>
            <span id="c5">谢谢参与</span>
        </p>
        <script type="text/javascript" src="jquery-1.12.1.js"></script>
        <script type="text/javascript">
            var arr = ['c1','c2','c3','c4','c5','c6','c7','c8','c1','c2','c3','c4','c5','c6','c7','c8'], timer;
            function _loop(i){
                    if (i == 0) {
                        $('#'+arr[0]).addClass('active');
                    }
                    if( i > 0 && i < 15 ){
                        $('#'+arr[i-1]).removeClass('active');
                        $('#'+arr[i]).addClass('active');
                    }
                    if (i == 15) {
                        clearTimeout(timer);
                    }else{
                        timer = setTimeout(function(){
                            _loop(i+1);
                        },500);
                    }
            }
            timer = setTimeout(function(){
                _loop(0);
            },500);
        </script>
    </body>
</html>

使用setTimeout只会被调用一次，想做成动画效果需要重复调用。

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>