@gidra666

Где поменять чтобы элементы отображались с конца?

Здравствуйте.
Какую строчку и на что поменять, чтобы элементы в кружках начинали отображаться с последнего, а не с первого?

<script>
    var arr = new Array();
    $('.next-ball').on('click', function(){
      //generate random number between 1 and 50
      var random = Math.floor(Math.random()*50 ) + 1;
      // array to store css class references
      var classList = ["white-ball", "blue-ball", "pink-ball", "green-ball", "yellow-ball"];
      console.log(random);
      //if index of random number is less than 50
      if( arr.indexOf(random) == -1){
        //generate random number
        arr.push(random);
        //add css class to lottery-ball class relevant to array value range
        $('.lottery').append('<li class="lottery-ball ' + classList[Math.floor(random/10)] + '">' + random + '</li>');
      }
      // if the number already exists ignore and generate a new number
      else {
        console.log(random);
      }
      console.log(arr);
      //if lottery number calls is greater than 5 then switch button classes and send an alert to the user 
      if ( $('.lottery').children().length > 5 ) {
        $('.next-ball').hide();
        $('.play-again').show();
        alert('Did You Win?');
      }

    });
    //If once the game is finished the user chooses to play again switch button classes 
    $('.play-again').on('click', function(){
      $('.lottery').children().remove();
      arr = [];
      $('.next-ball').show();
      $('.play-again').hide();
    });
    </script>


Весь код здесь (ТЫК)

<!DOCTYPE html>
    <head>
      <!-- meta tags -->
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width,initial-scale=1">

      <title>NRONLINE - Buckinghamshire Web Design, Digital Marketing Workshops and Kofax Consultancy</title>

      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <style>
 body {
    background: #444;
    font-family: sans-serif;
    font-size: 18px;
    font-weight: 100;
}

ul {
    position: absolute;
    padding: 0;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    list-style-type: none;
    width: 690px;
    height: 100px;
}

ul li {
    float: left;
    width: 100px;
    height: 100px;
    border-radius: 50px;
    margin-right: 10px;
    color: white;
    text-align: center;
    line-height: 100px;
    font-size: 36px;
}

ul li:nth-child(5n) {
    margin-right: 40px;
}

.ball-placeholder {
    background: #222222;
    background: -moz-linear-gradient(-45deg, #222222 0%, black 100%);
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #222222), color-stop(100%, black));
    background: -webkit-linear-gradient(-45deg, #222222 0%, black 100%);
    background: -o-linear-gradient(-45deg, #222222 0%, black 100%);
    background: -ms-linear-gradient(-45deg, #222222 0%, black 100%);
    background: linear-gradient(135deg, #222222 0%, black 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#222222', endColorstr='#000000',GradientType=1 );
}


.next-ball, .play-again {
    position: absolute;
    right: 0;
    left: 0;
    margin: auto;
    border: 0;
    color: white;
}

.next-ball {
    bottom: 20px;
    width: 100px;
    height: 40px;
    font-size: 16px;
    background: #7ac9ed;
}

.play-again {
    display: none;
    bottom: 20px;
    width: 200px;
    height: 80px;
    font-size: 24px;
    background: #d74d2f;
}

.white-ball {
    background: #fff;
    color:#101010;
}

.blue-ball {
    background: #99ccff;
    color:#101010;
}

.pink-ball {
    background: #ffccff;
    color:#101010;
}

.green-ball {
    background: #00cc66;
    color:#101010;
}

.yellow-ball {
    background: #fac600;
    color:#101010;
}
    </style>   
    </head>
    <body role="document">

        <ul class="ball-placeholders">
          <li class="ball-placeholder"></li>
          <li class="ball-placeholder"></li>
          <li class="ball-placeholder"></li>
          <li class="ball-placeholder"></li>
          <li class="ball-placeholder"></li>
          <li class="ball-placeholder"></li>
        </ul>
        <ul class="lottery"></ul>
        <button class="next-ball">Next Ball <? echo $num; ?></button>
       
        <button class="play-again">Play Again!</button>



<div id="data_ajax"></div>


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

    <script>
    var arr = new Array();
    $('.next-ball').on('click', function(){
      //generate random number between 1 and 50
      var random = Math.floor(Math.random()*50 ) + 1;
      // array to store css class references
      var classList = ["white-ball", "blue-ball", "pink-ball", "green-ball", "yellow-ball"];
      console.log(random);
      //if index of random number is less than 50
      if( arr.indexOf(random) == -1){
        //generate random number
        arr.push(random);
        //add css class to lottery-ball class relevant to array value range
        $('.lottery').append('<li class="lottery-ball ' + classList[Math.floor(random/10)] + '">' + random + '</li>');
      }
      // if the number already exists ignore and generate a new number
      else {
        console.log(random);
      }
      console.log(arr);
      //if lottery number calls is greater than 5 then switch button classes and send an alert to the user 
      if ( $('.lottery').children().length > 5 ) {
        $('.next-ball').hide();
        $('.play-again').show();
        alert('Did You Win?');
      }

    });
    //If once the game is finished the user chooses to play again switch button classes 
    $('.play-again').on('click', function(){
      $('.lottery').children().remove();
      arr = [];
      $('.next-ball').show();
      $('.play-again').hide();
    });
    </script>
    </body> 
    </html>
  • Вопрос задан
  • 79 просмотров
Решения вопроса 1
sergiks
@sergiks Куратор тега JavaScript
♬♬
В стилях поменяйте float: left на float: right

Если это вопрос на собеседовании, вы его провалите, т.к. там есть ещё один момент, из-за которого шары расположатся не равномерно, а 2 + 3.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы