Maison >interface Web >js tutoriel >Comment implémenter la fonction boule bicolore dans JS

Comment implémenter la fonction boule bicolore dans JS

亚连original: 2018-06-08 11:09:472882parcourir

Cet article présente principalement la fonction de boule double couleur 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

Cet article décrit la double couleur. fonction ball implémentée par JS natif. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

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

Le code spécifique est le suivant suit :

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

Ce qui précède est ce que j'ai compilé pour tout le monde. J'espère que cela sera utile à tout le monde à l'avenir.

Articles associés :

Comment utiliser les ECharts dans webpack ?

Diagramme de base de la méthode interne d'Object en JavaScript (tutoriel graphique)

Utilisez axios pour encapsuler la méthode fetch et appelez

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：Comment utiliser les fermetures js dans des projets réelsArticle suivant：Comment utiliser les fermetures js dans des projets réels

Articles Liés

Voir plus