全屏红包雨-demo-蚊子-前端博客

COPYHTML
<h2>请在移动端访问，或者PC浏览器调整为移动端模式</h2>
<div>
    <p><button id="start">启动</button><button id="stop">停止</button></p>
    <p>
        <span>产生红包时间间隔：</span>
        <select id="interval">
            <option value="300">300</option>
            <option value="800">800</option>
            <option value="1600" selected>1600</option>
            <option value="2000">2200</option>
            <option value="2400">2800</option>
        </select>
        <span>ms</span>
    </p>
    <p>
        <span>红包下降速度：</span>
        <select id="speed">
            <option value="22">22</option>
            <option value="16">16</option>
            <option value="10" selected>10</option>
            <option value="6">6</option>
            <option value="2">2</option>
        </select>
    </p>
</div>
<div class="rain-container"></div>

COPYCSS
button {
  width: 60px;
  height: 30px;
}
.rain-container {
  height: 500px;
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
}

COPYJAVASCRIPT
var rain = new RedpackRain({
  selector: '.rain-container'
});
document.getElementById('start').addEventListener('click', function() {
  rain.start();
})
document.getElementById('stop').addEventListener('click', function() {
  rain.stop();
})
document.getElementById('interval').addEventListener('change', function() {
  rain.setOptions({
    interval: Number(this.value)
  })
})
document.getElementById('speed').addEventListener('change', function() {
  rain.setOptions({
    redpack: {
      speedMin: Number(this.value),
      speedMax: Number(this.value),
    }
  })
})