bug原因：数组下标的最大值是数组长度-1，而不是数组长度本身。

最新推荐文章于 2023-03-09 18:21:18 发布
最新推荐文章于 2023-03-09 18:21:18 发布
阅读量1.7k 收藏 2
点赞数 1
分类专栏： 前端开发 文章标签： bug
原创文章如需转载请注明地址。
本文链接：https://blog.csdn.net/Irene1991/article/details/86572827
版权

vue写的前端抽奖（唯一 ，排他，抽中后删除），出现抽空（在还有名单可抽的情况下，没有抽中任何人）的bug。

 

源码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>抽奖</title>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
        body {
            width:100%;
            height:100%;
            font-size: 15px;
            overflow: hidden;
            -webkit-overflow: hidden !important;
            -webkit-margin-top:0 !important;
            -webkit-margin-bottom:0 !important;
            -webkit-margin-right:0 !important;
            -webkit-margin-left:0 !important;
            -webkit-padding:0 !important;
            background:#e4393c;
            color:#faca78;
        }

        #draw{
            width:100%;
            margin:0 auto;
            text-align: center;
            margin-top:20em;
        }
        div.wrapper{
            width:79em;
            display: flex;
            border:1px dashed #faca78;
            margin:0 auto;
            text-align: center;
            padding:1.5em;
        }
        div.gongxi{
            width:4em;
            font-size: 8em;
        }
        div.nameBox{
            width:4em;
            font-size: 8em;
            text-align: center;
            border:1px dashed #faca78;
            margin-right:0.5em;
        }

        div.button {
            text-align: center;
        }

        div.button button{
            display: block;
            margin-top:2em;
        }

        .btn {
            font-size:1em;
            width: 6.5em;
            padding: 0.5em;
            position: relative;
            font-family: 'Open Sans', sans-serif;
            text-decoration: none;
            background-image: linear-gradient(bottom, #faca78 0%, #f9c977 100%);
            background-image: -webkit-gradient(linear,
            left bottom,
            left top,
            color-stop(0, #faca78),
            color-stop(1, #f9c977));
            box-shadow: inset 0px 1px 0px #fcfbcd, 0px 6px 0px #e0a059;
            border-radius: 5px;
        }

        .btn::before {
            background-color: #e0a059;
            content: "";
            display: block;
            position: absolute;
            width: 100%;
            height: 100%;
            padding-left: 2px;
            padding-right: 2px;
            padding-bottom: 4px;
            left: -2px;
            top: 5px;
            z-index: -1;
            -webkit-border-radius: 6px;
            border-radius: 6px;
            -webkit-box-shadow: 0px 1px 0px #fff;
            box-shadow: 0px 1px 0px #fff;
        }

        .btn:active {
            color: #e0a059;
            text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.3);
            background: #faca78;
            -webkit-box-shadow: inset 0px 1px 0px #fcfbcd, inset 0px -1px 0px #e0a059;
            box-shadow: inset 0px 1px 0px #fcfbcd, inset 0px -1px 0px #e0a059;
            top: 7px;
            outline: none;
            -webkit-appearance: none;
        }

        .btn:focus {
            outline: none;
            -webkit-appearance: none;
        }

        .btn:active::before {
            top: -2px;
        }

        .disabledBtn{
            background:#ccc;
            background-image: linear-gradient(bottom, #ccc 0%, #999 100%);
            background-image: -webkit-gradient(linear,
            left bottom,
            left top,
            color-stop(0, #ccc),
            color-stop(1, #999));
            box-shadow: inset 0px 1px 0px #ccc, 0px 6px 0px #999;
        }
    </style>
</head>
<body>
<div id="draw">
    <div class="wrapper">
        <div class="gongxi">恭喜：</div>
        <div class="nameBox">{{result}}</div>
        <div class="button">
            <button class="btn" :class="{'disabledBtn':isStartBtnDisable}" @click="goDraw" :disabled="isStartBtnDisable">{{buttonText}}</button>

            <button class="btn" :class="{'disabledBtn':isStopBtnDisable}" @click="stopDraw" :disabled="isStopBtnDisable">Stop</button>
        </div>
    </div>
</div>
<script>
//    console.log("innerheight " + window.innerHeight)
//    console.log("innerheight " + window.innerWidth)

    new Vue({
        el: "#draw",
        data: {
            isStartBtnDisable:false,
            isStopBtnDisable:true,
            buttonText: "Start",
            result: "Nobody",
            nowIndex:0,
            namesList: [
                "赵一",
                "钱二",
                "孙三",
                "李四",
                "周五",
                "吴六",
                "郑七",
                "王八",
                "冯九",
                "陈十",
                "褚十一",
                "卫十二",
                "蒋十三",
                "沈十四",
                "韩十五",
                "杨十六",
                "朱十七",
                "秦十八",
                "尤十九",
                "许二十"
            ]
        },
        methods: {
            createTimer:function(){
                timer1=setInterval(this.timer, 20);
            },
            goDraw:function(){
                this.buttonText="Drawing"
                this.isStartBtnDisable=true
                this.isStopBtnDisable=false
                this.createTimer()
            },
            stopDraw:function(){
                clearInterval(timer1)
                this.refreshPage()
                //将抽到的人的姓名从名单表中移出
                this.namesList.splice(this.nowIndex, 1);
                console.log(this.namesList)
            },
            timer:function(){
                this.nowIndex ++
                if(this.nowIndex > this.namesList.length){
                    this.nowIndex = 0
                }
                this.result=this.namesList[this.nowIndex]
            },
            refreshPage:function(){
                this.buttonText="Start"
                this.isStartBtnDisable=false
                this.isStopBtnDisable=true
            }
        }
    })
</script>
</body>
</html>

找到错误原因：nowIndex的值超出数组边界。

timer:function(){
    this.nowIndex ++
    //错误原因：数组下标的最大值是数组长度-1，而不是数组长度本身。
    if(this.nowIndex > this.namesList.length-1){
        this.nowIndex = 0
    }
    this.result=this.namesList[this.nowIndex]
}
Irene1991
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
易语言程序免安装版下载
04-07
修改了很多由于符号冲突而导致无法完成静态编译的BUG 易语言5.0测试版1发布于2009/12/28，是易语言5.0静态编译版第一个公开测试版本 ********************************************************************...
VUE前置基础 day01
m0_72962890的博客
11-25 2241
vue前置基础学习
第二章 编程基础（第二次作业）
qq_74940664的博客
03-09 1341
正确答案:D答案解析：char类型数据在定义时需要使用单引号引起的单个字符，也可以赋值为0-65535之间的数字。也可以使用Unicode 代码来描述。正确答案:A答案解析：只有1选项正确给出了二维数组的长度，以及每一个一维数组的元素个数。正确答案:D答案解析：布尔类型的变量只有两个值，即true和false。B. b=2；C. int =20；D. int a；b=a+10；正确答案:A答案解析：变量定义的基本格式 数据类型 变量名=值;
Hashmap的取余，（数组长度 - 1） & hash = hash % 数组的长度？
Lxx794903137的博客
01-24 1540
前言 最近在回顾HashMap的时候，发现自己之前没有注意到的一点，是关于计算出hash值后，把这个key放在那个数组索引中。源码中是 （数组长度 - 1） & hash，这个操作等同于 hash % 数组的长度。 文章目录前言一、（数组长度 - 1） & hash，这个操作等同于 hash % 数组的长度？总结 一、（数组长度 - 1） & hash，这个操作等同于 hash % 数组的长度？ 源码位置在putVal方法的第629行：(n - 1) & hash 即为：（
黑马程序员--C基础--数组
qq_24842063的博客
06-25 332
------Java培训、Android培训、iOS培训、.Net培训、期待与您交流！ ------- 1、数组概念 把具有相同类型的若干变量按有序的形式组织起来，这些按序排列的同类数据元素的集合称为数组。 数组的相关名词： 1）数组元素：构成数组的数据，数组中的每一个数组元素具有相同的名称，不同的下标，可以作为单个变量使用，所以也称为下标变量。 2）数组下标：数组元素的位置的一个索引或
Java高级面试题.doc
02-13
HashMap 和 HashTable 使用数组+链表结构实现，根据 Hash 和 table 长度计算数组的下标 index 做操作。HashMap 默认数组长度为 16，HashMap 对 null 值的 key 都放在 table[0] 的位置，table[index] 形成一个链表，...
你必须知道的495个C语言问题
05-08
int*array=&realarray[-1];我就可以把“array”当作下标从1　开始的数组。 函数和多维数组 6.18　当我向一个接受指针的指针的函数传入二维数组的时候，编译器报错了。 6.19　我怎样编写接受编译时宽度未知的二维...
完美验证码识别系统
01-07
1.修复数组下标越界问题 2.字库列表添加可以多选然后右键批量删除选中项 [2017-07-13] 完美验证码识别系统V3.0 1.修复导出字库,重复导出不会覆盖原来的BUG,导出的图片会累加上去(注意,以前导出的字模导入新版中会...
C语言数组居然有[-1]下标？
只要思想不滑坡，想法总比问题多。
04-20 9501
1.背景   最近在查阅代码（C）时出现类似“a[-1]”的操作，以过往的经验，觉得是非法的访问数组操作，第一反应就是不存在这样的语句，连编译都通不过。实质上，这是完全没问题的语句，编译和执行都是不存在问题，当然也可能与编译器相关。 void fun(char *a) { a++; printf("%c\n",a[-1]); } 2.a[-1]涵义 2.1 案例分析   “[]”一般用...
数组的基本操作
weixin_59595975的博客
08-24 444
了解数组 字面量的创建方式 var arr = [ 1, 2, 3, 4 ]; 每一个数据中间用逗号隔开； 通过内置函数创建数组 var arr = new Array( ) [注]:若只有一个数字的时候如“var arr = new Array( 5 )” 则代表一个有五个元素的数组； 通过设置数组的长度 使用长度.来设置数组元素的个数 .length（ 获取数组的长度）； 例如： var arr=[1,2]; arr.length = 4;
找出数组中的最大值和最大值的下标
wy200144的博客
03-23 6683
解题思路： 假设数组中的第一个数和第一个下标是最大值，按照打擂主的形式进行一一比较，如果max<array[i]时，那么此时array[i]就是max，即max=array[i]。那么此时最大下标就是maxIdex=i 。这就是本题的思路。 例题：随机一个数组，找出数组中最大的数和最大数的位置，通过打擂台的方式 int len = (int) (Math.random() * 10 + 1); int[] array = new int[len]; for
java求数组中元素最大值最小值及其下标等相关问题
码走江湖的博客
08-25 9877
功能需求:遍历数组,并求出数组中元素的最大元素,最小元素,及其相应的索引等问题,要求用方法完成. 思路:分别创建不同的方法,然后再调用方法. 代码展示: public class Array{ public static void main(String[] args){ int[] arr={13,45,7,3,9,468,4589,76,4}; //声明数组并赋值...
vue处理对象数组（下标和值）
岁末zzz的博客
07-16 1万+
{ 0:‘123’, 1:‘1234’ } Storelist(){ this.$api.question().then(res=>{ if (res.status==1){ let that = this let a = res.result.store // ...
关于使用vue.js提交数组时出现数组下标的问题
小小坚的博客
03-28 3344
这是因为在vue.js 里面的ajax.js文件内对数据进行了深度解析了，我们只需要 let axios = Axios.create({     baseURL: 'http://127.0.0.1:8761/',     headers: {'X-Requested-With': 'XMLHttpRequest'},     transformRequest: [function (data...
vue的 v-for获取循环的下标
热门推荐
hua_ban_yu的博客
05-09 4万+
vue框架中可以使用 v-for 指令可以绑定数组的数据来渲染,那么如何在使用v-for循环的时候获取数组的下标呢？语法：&lt;li v-for="(arr,index) in arr"&gt;{{arr.text}}&lt;/li&gt;      /*index表示当前数组的下标*/ &lt;ul id="app"&gt; &lt;li v-for="(arr,index) in arr...
vue v-for index下标中文网挖的坑
u011120573的博客
04-18 7926
https://cn.vuejs.org/v2/guide/list.html#基本用法 官网把index参数写反了 ul id="example-2"> li v-for="(item, index) in items"> {{ parentMessage }} - {{ index }} - {{ item.message }} li>ul> 应该是 li v-fo
前端vue3watch监听数组长度
最新发布
06-06
请注意，我们使用了`this.arr.length`来获取数组的长度，而不是直接监听数组本身。这是因为Vue 3使用了Proxy来劫持数据的访问，直接监听数组本身的变化将无法触发回调函数。 希望这可以帮助你监听Vue 3中数组长度的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Irene1991

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值