个人中心
gpt4 book ai didi

javascript - 彩票游戏，根据数值范围添加css类

转载 作者：行者123 更新时间：2023-11-30 15:12:28 26 4
gpt4 key购买 nike

我正在制作一个彩票随机数生成器并使其正常工作，我想做的就是根据调用的数字范围更改球的背景颜色。第二个代码块是我到目前为止想出的。

例如

o 1-9:白色o 10-19:蓝色o 20-29:平，o 30-39:绿色，o 40-49:黄色

    <!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</button>
        <button class="play-again">Play Again!</button>






    <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>

最佳答案

您的想法应该可行，但由于唯一改变的是 li 的类，因此它可以更紧凑。在这里，我将类名存储在一个数组中，并使用球编号的第一位数字 - Math.floor(random/10) 来找到正确的元素。此外，您的 indexOf 行有一个错误 - 从 indexOf 返回零意味着在数组的开头找到了该元素，因此请检查 -1。

  var classList = ["white-ball", "blue-ball", "pink-ball", "green-ball", "yellow-ball"];

  if( arr.indexOf(random) == -1){
    arr.push(random);
    $('.lottery').append('<li class="lottery-ball ' + classList[Math.floor(random/10)] + '">' + random + '</li>');
  }

关于javascript - 彩票游戏，根据数值范围添加css类，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44909517/

26 4 0
文章推荐： javascript - 在字典中搜索键并打印值 - Javascript
文章推荐： c - NMAKE : fatal error U1077: 'cc' : return code '0x1'
文章推荐： c - 如何移动已分配给另一个结构的内存
文章推荐： c# - MessageBox、C#、Windows 窗体未使用的输入键
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com