Maison >interface Web >js tutoriel >Partage de code de fonction de boule double couleur implémenté par JS

Partage de code de fonction de boule double couleur implémenté par JS

小云云original: 2018-02-05 10:09:303946parcourir

Cet article présente principalement la fonction de boule bicolore implémentée par JS natif, impliquant la génération de nombres aléatoires javascript et des compétences opérationnelles liées aux opérations numériques. Les amis dans le besoin peuvent s'y référer. J'espère que cela pourra aider tout le monde.

Jetons d'abord un coup d'œil à l'effet de course :

Le code spécifique est le suivant :

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

Recommandations associées :

Exemple d'introduction à l'utilisation des nombres aléatoires, de la dérivation et des chaînes python, Shuangseqiu

Utilisation de php pour générer aléatoirement 2 des numéros Shuangseqiu de la loterie sociale Methods_PHP Tutorial

Deux façons de générer aléatoirement des numéros de boule double couleur de la loterie sociale en utilisant php

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Interface de recherche JS Baidu et code d'implémentation de la fonction de lienArticle suivant：Interface de recherche JS Baidu et code d'implémentation de la fonction de lien

Articles Liés

Voir plus