Blogger Information
Blog 28
fans 0
comment 1
visits 13313
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
双色球演示
centos
Original
423 people have browsed it

双色球演示

运用知识点有:随机数Math.random();数组元素删除splice();创建元素createElement();数组添加push();元素渲染到dom append()等

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7. <title>双色球</title>
  8. </head>
  9. <style>
  10. .box {
  11. display: grid;
  12. grid-template-columns: repeat(auto-fill, 30px);
  13. grid-auto-rows: 30px;
  14. gap: 0.05rem;
  15. }
  16. .box > div {
  17. border-radius: 50%;
  18. background-color: red;
  19. display: grid;
  20. place-items: center;
  21. color: white;
  22. box-shadow: 2px 2px 2px #666;
  23. }
  24. .box > div:last-of-type {
  25. background-color: blue;
  26. }
  27. </style>
  28. <body>
  29. <div class="box"></div>
  30. </body>
  31. <script>
  32. //1生成32个数字临时数组
  33. let redNub = []; //临时数组
  34. let doubleBall = []; //中间数组
  35. for (let i = 0; i < 33; i++) {
  36. redNub.push(i);
  37. }
  38. console.log(redNub);
  39. //2、随机挑选6个数字放入数组,用随机数来做数组索引
  40. // 随机数:Math.random()
  41. console.log(Math.random());
  42. // 随机数乘以33向下取整
  43. console.log(Math.floor(Math.random() * redNub.length));
  44. // 遍历临时数组
  45. for (let i = 0; i <= 6; i++) {
  46. let index = Math.floor(Math.random() * redNub.length);
  47. doubleBall.push(redNub[index]);
  48. // 去重 索引不能重复
  49. redNub.splice(index, 1);
  50. }
  51. // 排序
  52. doubleBall.sort((a, b) => a - b);
  53. console.log(doubleBall);
  54. //3、生成16个数字
  55. let blue = Math.floor(Math.random() * 16) + 1;
  56. console.log(blue);
  57. doubleBall.push(blue);
  58. console.log(doubleBall);
  59. //4、数组渲染到dom
  60. const box = document.querySelector(".box");
  61. doubleBall.forEach(function (item) {
  62. const ball = document.createElement("div");
  63. ball.textContent = item;
  64. // console.log(ball);
  65. // box.append(ball);
  66. box.append(ball);
  67. });
  68. </script>
  69. </html>

展示结果

Correcting teacher:PHPzPHPz

Correction status:qualified

Teacher's comments:
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!