suchen

Heim  >  Artikel  >  Web-Frontend  >  Teilen des von JS implementierten Doppelfarbball-Funktionscodes

Teilen des von JS implementierten Doppelfarbball-Funktionscodes

小云云
小云云Original
2018-02-05 10:09:303893Durchsuche

In diesem Artikel wird hauptsächlich die von nativem JS implementierte Doppelfarben-Ballfunktion vorgestellt, die die Generierung von Javascript-Zufallszahlen und numerische Operationsfähigkeiten umfasst. Freunde in Not können sich darauf beziehen, ich hoffe, es kann allen helfen.

Werfen wir zunächst einen Blick auf den Laufeffekt:

Der spezifische Code lautet wie folgt: 


<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>www.jb51.net - JS双色球</title>
  <style>
    #datePicker {
      width: 100px;
      height: 30px;
      line-height: 30px;;
      border-radius: 10px;
      border: 1px solid #5098a5;
      text-align: center;
      cursor: pointer;
    }
    #number {
      height: 100px;
      float: left;
      margin-top: 20px;
    }
    #number span {
      display: block;
      width: 30px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      border-radius: 30px;
      border: 2px solid red;
      color: red;
      font-weight: bold;
      float: left;
      margin-top: 15px;
      margin-right: 10px;
    }
    #buleBall {
      height: 100px;
      margin-top: 21px;
      float: left;
    }
    #buleBall span {
      display: block;
      width: 30px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      border-radius: 30px;
      background-color: blue;
      color: white;
      font-weight: bold;
      float: left;
      margin-top: 15px;
      margin-right: 10px;
    }
  </style>
</head>
<body>
<p class="container">
  <p style="overflow:hidden;">
    <p id="number"></p>
    <p id="buleBall"></p>
  </p>
  <p id="datePicker">点击按钮</p>
</p>
<script>
  //循环产生1-36数字
  var arr = [];
  function num() {
    for (var i = 1; i < 34; i++) {
      arr.push(i);
    }
    confusion();
  }
  var arrty= new Array(arr);
  //伪随机方法
  function confusion(){
    for(var i=1;i<34;i++){
      arrty[i]=i;
    }
    arrty.sort(function(){ return 0.5 - Math.random() });
//    var str=arrty.join();
    arrAy()
  }
  // 将随机获取的数据添加到页面上去
  function arrAy() {
    var array = getRandomArrayElements(arrty, 6);
    array.sort(function (a, b) {//数组排序
      return a > b ? 1 : -1;
    });
    var htm = "";
    for (var i = 0; i < array.length; i++) {
      htm += &#39;<span>&#39; + array[i] + &#39;</span>&#39;;
    }
    document.getElementById(&#39;number&#39;).innerHTML = htm;
  }
  // 从1-36中随机取出其中6个参数
  function getRandomArrayElements(arr, count) {
    var shuffled = arr.slice(0), i = arr.length, min = i - count, temp, index;
    while (i-- > min) {
      index = Math.floor((i + 1) * Math.random());
      temp = shuffled[index];
      shuffled[index] = shuffled[i];
      shuffled[i] = temp;
    }
    return shuffled.slice(min);
  }
  //随机获取一个蓝球的方法
  function blueBall() {
    var html = "";
    var array = [];
    for (var k = 1; k < 17; k++) {
      array.push(k);
    }
    //随机生成蓝色球的算法
    var n = Math.floor(Math.random() * array.length);
    if (n != "0") {//去除获取到的篮球数为0的
      html += &#39;<span>&#39; + n + &#39;</span>&#39;;
    }
    document.getElementById(&#39;buleBall&#39;).innerHTML = html;
  }
  window.onload = function () {
    var datePicker = document.getElementById("datePicker");
    datePicker.onclick = function () {
      num();//点击按钮生成1-33的数字方法
      blueBall();//点击后获取随机蓝球的方法
    };
  }
</script>
</body>
</html>

Verwandte Empfehlungen:

Beispieleinführung in die Verwendung von Python-Zufallszahlen, Ableitung und Zeichenfolgen, Shuangseqiu

Verwendung von PHP um die 2 der Wohlfahrtslotterie-Shuangseqiu-Zahl zufällig zu generieren. Methoden_PHP-Tutorial

Zwei Möglichkeiten, zufällig Wohlfahrtslotteriezahlen mit PHP zu generieren

Das obige ist der detaillierte Inhalt vonTeilen des von JS implementierten Doppelfarbball-Funktionscodes. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：JS Baidu-Suchschnittstelle und Link-Funktions-ImplementierungscodeNächster Artikel：JS Baidu-Suchschnittstelle und Link-Funktions-Implementierungscode

In Verbindung stehende Artikel

Mehr sehen