抽奖小程序——js内置数组方法应用（splice（）、concat（）、sort（）、reverse（））

最新推荐文章于 2022-03-16 11:12:26 发布

Submerge.

最新推荐文章于 2022-03-16 11:12:26 发布

阅读量454

点赞数 2

文章标签： javascript html

本文链接：https://blog.csdn.net/sth0246/article/details/113920457

版权

前言

本篇文章通过编写网站抽奖小程序来定点介绍js自带强大的数组方法。
在这里插入图片描述

抽奖小程序

这个主体比较简单，将周围八个div通过getelementsbyclassname调取到一个伪数组里，点击开始抽奖触发定时器，定时器每触发一次函数，都会使当前数组索引值div内的背景图片变大，通过css的transition动画可以有动感效果，

function turn(){
        for(var i = 0;i<giftx.length;i++){
            giftx[i].style.backgroundSize = "100% 100%"
            giftx[i].style.backgroundPosition = "center center"
        }
        giftx[n].style.backgroundSize = "180% 180%"
        giftx[n].style.backgroundPosition = "center center"
        n++;
        if(n==giftx.length)
        {
            n=0
        }
    }

中间的div用于控制开始或停止

    function star(){
        console.log(a)
        if(a){
            clearInterval(timer);
            timer = setInterval("turn()",401)
            stara.innerHTML = "<br/>点击抽奖";
            setTimeout("stop()",4000)
        }else{
            clearInterval(timer);
            timer = setInterval("turn()",200);
            stara.innerHTML = "<br/>点击停止";
        }
        a = !a;
    }

其中n、a均为全局变量，用于控制div块的转动和游戏的开始
程序整体非常简单，看起来也和数组没有什么关联，可为什么标题是js内置数组方法应用呢？接下来我将简要叙述在编写时遇到的问题和用数组方法解决的收获

编写时遇到的问题

在调取类名相同的elemens时遇到的问题：因为九个div是有float：left；属性的，那么调取时自然也是从左到右排序，第二行也是从左到右，那么这就造成了达不到转圈抽奖的需求了。那么想要解决问题要做的就是改变数组里项的顺序。

数组方法

在我们共同解决问题前先分享几个重要的数组方法

1. reverse（）反转数组项顺序
2. sort（）排序（由小到大）（sort（）在处理数组过程中会先对数组中的每项使用toString（）的转型方法，因此sort（）比较的是字符串
3. concat（）向数组中插入内容（从末尾开始插）
4. splice（）这是数组方法中最最最强大的了，它可以对数组进行删除、插入、替换的功能
在前面程序想要改变数组顺序的时候，我是先将要改变的部分用concat（）插入一个新数组里再用splice（）手动将排好的项插入到原来的数组里

        for(var i =3;i<8;i++){
            x = x.concat(giftx[i])
        }
        console.log(x.length)

        giftx.splice(3,5,x[1],x[4],x[3],x[2],x[0])

这其中giftx是八个div的数组，x是为了改变giftx后几项顺序做的容器
在这里我用了splice（）的替换功能
介绍一下splice（）这个方法

**删除：**可以删除任意数量的项，只需指定2个参数：要删除的第一项的位置和要删除的项数。
如：splice（0，2）会删除数组中的前两项
**插入：**可以向指定位置插入任意数量的项，只需提供3个参数：起始位置、0（在splice方法中第二个参数为要删除的项数）和要插入的项。如果要插入多个项可以再在splice（）传入第四、第五以至任意多的项。
如： splice（2，0，“red”,“green”)会从当前数组位置2开始插入字符串"red"和"green"。
替换可以向指定位置插入任意数量的项，且同时删除任意数量的项，只需指定3个参数：起始位置、要删除的项数和要插入的任意数量的项。插入的项数不必与删除的项数相等。
如： splice（2，1，“red”,“green”)会删除当前数组位置2的项，然后再从位置2开始插入字符
splice（)始终都会返回一个数组，该数组中包含从原始数组中删除的项（如果没有删除任何项，则返回一个空数组）。
介绍一下如何用sort（）对数值类型的数组进行排序
因为sort（）在排序数组前会将各项转化为string即使是数值也会被转化，所以sort对10、5排序时，即使5小于10，但是进行字符串比较时，"10"则位于“5"的前面这样如果进行纯数值比较的话正常的顺序就会被修改这时就需要引入一个函数
比较函数接收两个参数，如果第一个参数小于第二参数则返回一个负数，两个参数相等则会返回0，第一个参数大于第二个参数返回一个正数

var arr = [2,3,1,5,7];
function compare(value1, value2) {//设置比较函数 便于数组的sort方法排序
    return value2 - value1;
}
arr.sort(compare);
console.log(arr);//7,5,3,2,1

这两个函数组合排序是降序，即由高到低，如若需要升序则只需使用reverse（）即可

arr.reverse();
console.log(arr)//1,2,3,5,7

小结

我认为对于程序员高效的学习方法是经常独自练习项目，在项目中遇到的问题逐一攻破，之后寻找重点问题学习、巩固、小结。祝大家新年快乐~~
（我自己做的抽奖小程序是无论抽到哪一个都只会弹出同样的信息，如果想丰富内容的话，可以在giftx数组里放置对象，每个小div都是一个对象，然后给每个奖品对象加上不同的属性，就能出来真实的抽奖效果了）
在此附上我的源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            transition: all 1s;
        }
        body{
            background-color:#f8e19b;
        }
        .box{
            position: relative;
            left: 30%;
            height: 700px;
            width: 700px;
            background-color: #f8e19b;
        }
        .box div{
            width: 32%;
            height: 32%;
            float: left;
            background-color: greenyellow;
            margin: 0.5% 0.5%;
        }
        .contrl{
            background-color: #f8e19b;
            cursor: pointer;
            text-align: center;
            font-size: 48px;
            color: #ee517e;
            transition: none;
        }
    </style>
</head>
<body>
    <h1 id="demo1"></h1>
    <div class="box">
        <div class="gift"></div>
        <div class="gift"></div>
        <div class="gift"></div>
        <div class="gift"></div>
        <div class="contrl" onclick="star()">
            <br/>
            点击抽奖</div>
        <div class="gift"></div>
        <div class="gift"></div>
        <div class="gift"></div>
        <div class="gift"></div>
    </div>
</body>
<script type="text/javascript">
    var gift = document.getElementsByClassName("gift");
    var giftx = Array.from(gift);
    var demo1 = document.getElementById("demo1");
    var stara = document.getElementsByClassName("contrl")[0];
    var n = 0;
    var a = false;
    var timer = null;
    var c = null;
    var x = new Array;

    
    window.onload = function() {
        for(var i =3;i<8;i++){
            x = x.concat(giftx[i])
        }
        console.log(x.length)

        giftx.splice(3,5,x[1],x[4],x[3],x[2],x[0])
        console.log("111")
        console.log(giftx.length)
        time();
        giftx[0].style.backgroundColor = "red"
        stara.style.background = "url(images/star.jpg)"
        stara.style.backgroundSize = "120% 120%"
        stara.style.backgroundPosition = "center center"
    }
    for(var i = 0;i<giftx.length;i++){
            giftx[i].style.background = "url(images/gift.jpg)"
            giftx[i].style.backgroundSize = "100% 100%"

    }
    function turn(){
        for(var i = 0;i<giftx.length;i++){
            giftx[i].style.backgroundSize = "100% 100%"
            giftx[i].style.backgroundPosition = "center center"
        }
        giftx[n].style.backgroundSize = "180% 180%"
        giftx[n].style.backgroundPosition = "center center"
        n++;
        if(n==giftx.length)
        {
            n=0
        }
    }
    function time(){
        var e = new Date();
        demo1.innerHTML = e
    }
    function stop(){
        clearInterval(timer);
        alert("恭喜你获得一等奖Iphone12一份，请在下表填写你的电话号码，稍后客服会详细联系你")
    }
    function star(){
        console.log(a)
        if(a){
            clearInterval(timer);
            timer = setInterval("turn()",401)
            stara.innerHTML = "<br/>点击抽奖";
            setTimeout("stop()",4000)
        }else{
            clearInterval(timer);
            timer = setInterval("turn()",200);
            stara.innerHTML = "<br/>点击停止";
        }
        a = !a;
    }
    
    setInterval("time()",1000);


</script>
</html>

div的背景图片自己找吧，上传不上去。

Submerge.

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
抽奖小程序——js内置数组方法应用（splice（）、concat（）、sort（）、reverse（））

前言本篇文章通过编写网站抽奖小程序来定点介绍js自带强大的数组方法。抽奖小程序这个主体比较简单，将周围八个div通过getelementsbyclassname调取到一个伪数组里，点击开始抽奖触发定时器，定时器每触发一次函数，都会使当前数组索引值div内的背景图片变大，通过css的transition动画可以有动感效果，function turn(){ for(var i = 0;i<giftx.length;i++){ giftx[i].style.
复制链接

扫一扫