|
|

楼主 |
发表于 2022-7-12 12:09
|
显示全部楼层
二楼效果的代码:
- <style>
- #papa {
- margin: 50px auto 0;
- width: 600px;
- height: 400px;
- background: #000;
- position: relative;
- }
- .ball {
- position: absolute;
- width: 20px;
- height: 20px;
- border-radius: 50%;
- background: linear-gradient(60deg,red,white);
- }
- </style>
- <div id="papa"></div>
- <script>
- let idx = 0, total = 50, gap = 500; //idx:小球标识, total:总数, gap:间隔时间
- let num = (min, max) => Math.floor(Math.random() * (max-min+1)) + min;
- let add = setInterval(addDot, gap), del;
- //添加元素
- function addDot() {
- let ele = document.createElement('span');
- let ww = papa.offsetWidth, hh = papa.offsetHeight;
- ele.className = 'ball';
- ele.style.left = num(0,ww-20) + 'px';
- ele.style.top = num(0,hh-20) + 'px';
- papa.appendChild(ele);
- idx ++;
- if(idx >= total){
- clearInterval(add);
- idx = 0;
- del = setInterval(delDot, gap);
- }
- }
- //删除元素
- function delDot() {
- let ele = document.querySelector('.ball');
- if(ele) {
- papa.removeChild(ele);
- } else {
- clearInterval(del);
- add = setInterval(addDot,gap);
- }
- }
- </script>
复制代码
|
评分
-
| 参与人数 1 | 威望 +50 |
金钱 +100 |
经验 +50 |
收起
理由
|
红影
| + 50 |
+ 100 |
+ 50 |
赞一个! |
查看全部评分
|