demo/index6.js at main1 · hoarfrost-s/demo · GitHub

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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
async function dropFall () {

  var main = document.querySelector('body')

  var colors = [

    '#ff0000',

    '#FF8C00',

    '#AEFF00',

    '#00BBFF',

    '#0022FF',

    '#AE00FF',

    '#FF00B3',

    '#FF0051',

    '#FF0000'

  ]

  var count = 200

  var offsetWidth = main.offsetWidth

  // setInterval(() => {

  function drop () {

    for (var i = 0; i < count; i++) {

      var color = colors[Math.floor(Math.random() * colors.length)]

      var drop = document.createElement('drop')

      drop.classList.add('drop')

      drop.style.background = `linear-gradient(transparent, ${color})`

      drop.style.left = Math.random() * offsetWidth + 'px'

      drop.style.animationDelay = Math.random() * -3 + 's'

      drop.style.animationDuration = 2 + Math.random() * 5 + 's'

      main.appendChild(drop)

    }

  }

  function remove() {

    for (var i = 0; i < count; i++) {

      main.removeChild(main.children[0])

    }

  }

  drop()

  // }, 10);

  // 获取窗口宽高

  var getWindowsInfo = () => {

    var windowInfo = {

      width: window.innerWidth,

      height: window.innerHeight

    }

    offsetWidth = windowInfo.width

    drop();

    remove();

  }

  // 防抖

  var debounce = (fn, delay) => {

    let timer

    return function () {

      if (timer) {

        clearTimeout(timer)

      }

      timer = setTimeout(() => {

        fn()

      }, delay)

    }

  }

  var cancelDebounce = debounce(getWindowsInfo, 500)

  window.addEventListener('resize', cancelDebounce, true)

}

dropFall()