js实现双色球效果


本文摘自PHP中文网,作者coldplay.xixi,侵删。

本文实例为大家分享了js实现双色球效果的具体代码,供大家参考,具体内容如下

效果展示:

源码展示:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

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

  <span class="a"></span><span class="b"></span>

</pre>

  

  

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

</body>

</html>

相关学习推荐:javascript教程

以上就是js实现双色球效果的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

如何利用js计算正方形的面积

js递归的用法详解

js中eval什么意思

js 中 undefined 什么意思

js是什么编程语言?

聊聊css 与 js 是如何阻塞 dom 解析和渲染的

关于js中的this指向问题的介绍

js内置对象 math 和 date 的详解

js 怎么判断数字相等

js如何调用php

更多相关阅读请进入《js》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...

    暂无评论...