javascript数组后退和前进按钮

时间：2019-02-09 20:00:36

标签： javascript arrays button

我目前正在处理我当前正在处理的项目，在该项目中我必须创建一个包含5个引号的报价机。我需要有一个前进和后退按钮。我目前几乎完成了所有操作，但是当我按下前进按钮并到达最后一个报价时，如果我继续单击，则会在元素中写入未定义的内容，我只希望它在最后一个位置停止或循环回到第一个，当我按下“后退”按钮时，也会发生同样的事情。 请帮忙。

这是我的代码。 

var quoteArray = ["If you're already a front-end developer, well, pretend you're also wearing a pirate hat. - Ethan Marcotte, Responsive Web Design",
"Website without visitors is like a ship lost in the horizon. - Dr. Christopher Dayagdag",
"If there's one thing you learn by working on a lot of different Web sites, it's that almost any design idea--no matter how appallingly bad--can be made usable in the right circumstances, with enough effort.” - Steve Krug, Don't Make Me Think: A Common Sense Approach to Web Usability",
"The true ENTREPRENEUR is a risk taker, not an excuse maker. - VDEXTERS",
"Being first in the search result organically in Google is the dream of all website owners. ― Dr. Chris Dayagdag"];

var i = 0;
var backButton = document.getElementById("back");
var forwardButton = document.getElementById("forward");




    document.querySelector(".quote")
        .innerHTML = quoteArray[0];


setInterval(function() {
    document
        .querySelector(".quote")
        .innerHTML = quoteArray[i++];

        if (i == quoteArray.length) i = 0;
},5000);


backButton.addEventListener("click", function() {
    document
        .querySelector(".quote")
        .innerHTML = quoteArray[i--];

        if(quoteArray.length == -1) {
            document
            .querySelector(".quote")
            .innerHTML = quoteArray[4];
        }
    
})

forwardButton.addEventListener("click", function() {
    document
        .querySelector(".quote")
        .innerHTML = quoteArray[i++];

        if(quoteArray.length == 5) {
            document
            .querySelector(".quote")
            .innerHTML = quoteArray[0];
        }
    
})
body {
    width: 100%;
    height: 100%;
}

a, .hero{
    color: rgb(255, 255, 255);
}


#back, #forward {
    font-size: 30px;
}

.nav {
    display: flex;
    justify-content: space-between;
    align-items:center;
    color: rgb(255, 255, 255);
    width: 100%;
}

.hero {
    background-image: linear-gradient(
      rgb(0, 0, 0, 0.3) 10%,
      rgba(0, 0, 0, 0.5) 50%,
      rgba(0, 0, 0, 0.5) 50%,
      rgba(0, 0, 0, 0.3) 80%
    ),
    url(./images/landscape-3969127_1280.jpg);
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
    height: 400px;
}
.row {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width: 70%;
}

#back, #forward {
    padding-left: 10px;
    padding-right: 10px;
}

.buttons {
    padding: 20px;
}

.quote {
    font-size: 18px;
    font-weight: bold;
}

.logo {
    margin: 0 50px;
}

ul {
    display: flex;
    justify-content: center;
    margin-right: 50px;
    padding: 0px;
}

ul a {
    padding-left: 30px;
    padding-right: 30px;
    text-decoration: none;
    font-size: 20px;
    font-weight: bold;
}

li {
    list-style: none;
}
.nav a {
    color: rgb(255, 255, 255)
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" />
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
    <link rel="stylesheet" href="./style.css">
    <title>Document</title>
</head>
<body>
    

    <div class="hero">
            <div class="nav">
                    <div class="logo"><h1>Logo</h1></div>
                    <ul>
                        <a href="#">
                            <li>Link</li>
                        </a>
                        <a href="#">
                            <li>Link</li>
                        </a>
                        <a href="#">
                            <li>Link</li>
                        </a>
                    </ul>
                </div>
        <div class="row">
                <div class="quote"></div>
        </div>
        <div class="buttons">
                <a href="#"><i id="back" class="far fa-arrow-alt-circle-left"></i></i></a>
                <a href="#"><i id="forward" class="far fa-arrow-alt-circle-right"></i></i></a>
        </div>
    </div>

    

    <script src="./quote.js"></script>
</body>
</html>

1 个答案:

答案 0 :(得分：0)

%是您的朋友。由于尝试访问列表之外的元素，因此变得不确定。让我随心所欲地向上移动，然后执行这些计算

增加：

quoteArray[i++ % quoteArray.length]

减少：

i = (i - 1 + quoteArray.length) % quoteArray.length;
quoteArray[i]


var quoteArray = ["If you're already a front-end developer, well, pretend you're also wearing a pirate hat. - Ethan Marcotte, Responsive Web Design",
"Website without visitors is like a ship lost in the horizon. - Dr. Christopher Dayagdag",
"If there's one thing you learn by working on a lot of different Web sites, it's that almost any design idea--no matter how appallingly bad--can be made usable in the right circumstances, with enough effort.” - Steve Krug, Don't Make Me Think: A Common Sense Approach to Web Usability",
"The true ENTREPRENEUR is a risk taker, not an excuse maker. - VDEXTERS",
"Being first in the search result organically in Google is the dream of all website owners. ― Dr. Chris Dayagdag"];

var i = 0;
var backButton = document.getElementById("back");
var forwardButton = document.getElementById("forward");




    document.querySelector(".quote")
        .innerHTML = quoteArray[0];


setInterval(function() {
    document
        .querySelector(".quote")
        .innerHTML = quoteArray[i++ % quoteArray.length];
}, 5000);


backButton.addEventListener("click", function() {
    i = (i - 1 + quoteArray.length) % quoteArray.length;
    document
        .querySelector(".quote")
        .innerHTML = quoteArray[i];
    
})

forwardButton.addEventListener("click", function() {
    document
        .querySelector(".quote")
        .innerHTML = quoteArray[i++ % quoteArray.length];
    
})
body {
    width: 100%;
    height: 100%;
}

a, .hero{
    color: rgb(255, 255, 255);
}


#back, #forward {
    font-size: 30px;
}

.nav {
    display: flex;
    justify-content: space-between;
    align-items:center;
    color: rgb(255, 255, 255);
    width: 100%;
}

.hero {
    background-image: linear-gradient(
      rgb(0, 0, 0, 0.3) 10%,
      rgba(0, 0, 0, 0.5) 50%,
      rgba(0, 0, 0, 0.5) 50%,
      rgba(0, 0, 0, 0.3) 80%
    ),
    url(./images/landscape-3969127_1280.jpg);
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
    height: 400px;
}
.row {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width: 70%;
}

#back, #forward {
    padding-left: 10px;
    padding-right: 10px;
}

.buttons {
    padding: 20px;
}

.quote {
    font-size: 18px;
    font-weight: bold;
}

.logo {
    margin: 0 50px;
}

ul {
    display: flex;
    justify-content: center;
    margin-right: 50px;
    padding: 0px;
}

ul a {
    padding-left: 30px;
    padding-right: 30px;
    text-decoration: none;
    font-size: 20px;
    font-weight: bold;
}

li {
    list-style: none;
}
.nav a {
    color: rgb(255, 255, 255)
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" />
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
    <link rel="stylesheet" href="./style.css">
    <title>Document</title>
</head>
<body>
    

    <div class="hero">
            <div class="nav">
                    <div class="logo"><h1>Logo</h1></div>
                    <ul>
                        <a href="#">
                            <li>Link</li>
                        </a>
                        <a href="#">
                            <li>Link</li>
                        </a>
                        <a href="#">
                            <li>Link</li>
                        </a>
                    </ul>
                </div>
        <div class="row">
                <div class="quote"></div>
        </div>
        <div class="buttons">
                <a><i id="back" class="far fa-arrow-alt-circle-left"></i></a>
                <a><i id="forward" class="far fa-arrow-alt-circle-right"></i></a>
        </div>
    </div>

    

    <script src="./quote.js"></script>
</body>
</html>

相关问题
最新问题