Maison > interface Web > js tutoriel > le corps du texte

js pour obtenir un effet de boule double couleur

coldplay.xixi
Libérer: 2020-08-06 16:39:48
avant
3038 Les gens l'ont consulté

js pour obtenir un effet de boule double couleur

L'exemple de cet article partage le code spécifique pour réaliser l'effet de boule bicolore en js pour votre référence. Le contenu spécifique est le suivant

Affichage de l'effet :

Affichage du code source :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>js实现双色球效果</title>
  <style>
    span{
      font-size: 20px;
    }
    .a {
      color: red;
    }
 
    .b {
      color: blue;
    }
  </style>
</head>
<body>
<button>点击获取今日双色球数</button>
<pre class="brush:php;toolbar:false">
  <span class="a"></span><span class="b"></span>
<script> var arrS = []; for (let i = 1; i < 34; i++) { arrS[i - 1] = i; } var spans = document.querySelectorAll("span"); document.querySelector("button").onclick = function () { /*es6 使用 set 集合会自动去除重复*/ /*获取红球*/ let set = new Set(); while (set.size < 6) { set.add(getR(arrS, arrS.length)); } /*获取篮球*/ let set1 = new Set(); while (set1.size < 1) { set1.add(getR(arrS, 16)); } var hong = ""; var lan = ""; for (let v of set) { hong += v; hong += " "; } for (let v of set1) { lan += v; lan += " "; } //将内容添加到页面上 spans[0].innerText = hong; spans[1].innerText = lan; } // 获取指定范围内的随机数 function getR(arr, al) { return arr[Math.floor(Math.random() * al)]; } </script>
Copier après la connexion

Recommandations d'apprentissage associées : tutoriel javascript

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!

Étiquettes associées:
js
source:jb51.net
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal