来抽奖了（学习黑黑的无序小球代码）
<style>
.waikuang {
left: -302px;top: 120px;
width: 1200px;
height: 640px;
border: 1px solid;
overflow: hidden;
background: #ccc url('https://pic.imgdb.cn/item/62cba912f54cd3f937669e80.jpg') no-repeat center / cover;
box-shadow: 0 4px 24px #000;
position: relative;
}
.dongtu {
position: absolute;
width: 466px;
height: 513px;
left: 363px;
bottom: 100px;
}
#papa {
left: 27px; bottom: 28px;
width: 411px;
height: 280px;
position: absolute;
}
.ball {
position: absolute;
width: 20px;
height: 20px;
border-radius: 50%;
background: #111 linear-gradient(tan,purple);
transition: all 1s;
}
.waikuang input { border: none; outline: none; opacity: .75; cursor: pointer; }
.waikuang p { margin: 0; padding: 0; }
.playbox { position: absolute; top: 20px; left: 20px; padding: 10px; width: fit-content; font: normal 1em sans-serif; color: red; background: rgba(255,255,255,.25); backdrop-filter: blur(2px); overflow: hidden; box-shadow: 1px 2px 2px #000; text-shadow: 1px 1px 1px #000; z-index: 100; }
#btnplay { width: 30px; height: 30px; border-radius: 50%; }
#btnplay:hover { background: #aaa; color: #ff0000; }
</style>
<div class="waikuang">
<divclass="dongtu">
<img alt="" src="https://pic.imgdb.cn/item/62cba953f54cd3f93766ed9e.gif"/>
<div id="papa">
<img alt="" src="https://pic.imgdb.cn/item/62cbaa0cf54cd3f93767d59c.png"/>
</div></div>
<div style="position: absolute; left:50px; top: -50px; width:547px;opacity: .95;">
<img alt="" src="https://pic.imgdb.cn/item/62357b1e5baa1a80abd5d64a.gif"/></div>
<div style="position: absolute; right:50px; top: -50px; width:547px;opacity: .95;">
<img alt="" src="https://pic.imgdb.cn/item/62357b1e5baa1a80abd5d64a.gif"/></div>
<div style="position: absolute; right:20px; bottom: 20px; width:128px;opacity: 1;">
<img alt="" src="https://pic.imgdb.cn/item/62cbbf8cf54cd3f93783952e.gif"/></div>
<div class="playbox">
<p id="geci" style="font-size: 1.0em">LRC Loading ... </p>
<p style="display: flex; align-items: center; gap: 4px; margin-top: 10px;">
<input id="btnplay" type="button" value=">" />
<input id="slider" type="range" min="0" max="100" value="0" />
<span id="per">0:0 | 0:0</span>
</p>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=488891868.mp3" autoplay="autoplay" loop="loop"></audio>
</div><br><br><br><br><br><br>
<script>
let waikuang = document.querySelector('.waikuang'),
slider = document.querySelector('#slider'),
aud = document.querySelector('#aud'),
per = document.querySelector('#per'),
btnplay = document.querySelector('#btnplay'),
geci = document.querySelector('#geci'),
dongtu = document.querySelector('.dongtu');
let all = 16; //运动元素总数
let pa_w = papa.offsetWidth, pa_h = papa.offsetHeight; //父元素宽高
let num = (min, max) => Math.floor(Math.random() * (max-min+1)) + min; //取两数间随机整数
//初始化运动元素
Array.from({length:all}).forEach((x,y) =>{
x = document.createElement('span'); //创建span标签
x.className = 'ball'; //css类名
let wh = num(40,46); //元素随机尺寸(宽高一致)
//写入 style 样式：背景、宽、高、左边值、上边值
x.style.cssText = `background: linear-gradient(120deg, rgb(${num(0,255)},${num(0,255)},${num(0,255)}),rgb(${num(0,255)},${num(0,255)},${num(0,255)}));
width: ${wh}px; height:${wh}px; left: ${num(0, pa_w - wh)}px; top: ${num(0, pa_h - wh)}px`;
papa.appendChild(x); //追加元素到父元素
});
let balls = document.querySelectorAll('.ball'); //获得已追加的元素操作句柄（数组）
move(); //首次运行函数：一开始就动起来
//折向运动函数
function move() {
for(obj of balls) { //用for of 语句命令每一个元素
let xx = Math.floor((papa.offsetWidth - obj.offsetWidth) * Math.random()); //水平位移距离：范围内随机整数
let yy = Math.floor((papa.offsetHeight - obj.offsetHeight) * Math.random());//垂直位移距离：范围内随机整数
obj.style.left = xx + 'px'; //运动元素左边值
obj.style.top = yy + 'px'; //运动元素右边值
}
}
let tt = setInterval(move, 600); //永动定时器驱动函数
let flag = 0, slip = 0;
let lrcAr = [
['0.06','抽奖 - 纯音乐'],
['5.00','祝福人人好运'],
['10.00','千贵万贵平安最贵'],
['15.00','千福万福健康最福'],
['20.00','千好万好中奖最好'],
['25.05','千美万美幸福最美'],
['170','感谢聆听']
];
slider.onmousedown = () => aud.pause();
slider.onchange = () => { aud.currentTime = slider.value * aud.duration / 100; aud.play(); }
btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('playing', () => btnplay.value = '||');
aud.addEventListener('pause', () => btnplay.value = '>');
aud.addEventListener('timeupdate', () => {
let prog = 100 * aud.currentTime / aud.duration;
slider.value = prog;
per.innerText = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);
for(j=0; j<lrcAr.length; j++){
if(aud.currentTime >= lrcAr - slip){
geci.innerHTML = lrcAr;
}
}
});
let toMin = (sec) => {
if(!sec) return '0:00';
sec = parseInt(sec);
return parseInt(sec / 60) + ':' + parseFloat(sec % 60).toString().padStart(2,'0');
}
</script> 福运当头、事事遂心。 学小辣椒和粥菇凉狂点，没抽到奖{:4_170:} 有点意思的。 梦油 发表于 2022-7-11 17:53
福运当头、事事遂心。
抽到福运，抽到开心{:4_173:} 马黑黑 发表于 2022-7-11 18:28
学小辣椒和粥菇凉狂点，没抽到奖
那些小球我不知道做什么好，就放奖池里去了。为了突出这些小球，我弄了这么大的抽奖箱呢{:4_173:} 加林森 发表于 2022-7-11 18:36
有点意思的。
把黑黑那些跑来跑去的小球扔到奖池里去了{:4_173:} 红影 发表于 2022-7-11 18:52
把黑黑那些跑来跑去的小球扔到奖池里去了
是的。挺好玩的。 加林森 发表于 2022-7-11 18:58
是的。挺好玩的。
这里面放的小球少，就16个，放多了觉得太乱。 红影 发表于 2022-7-11 18:49
那些小球我不知道做什么好，就放奖池里去了。为了突出这些小球，我弄了这么大的抽奖箱呢
挺好。其实，小球只是举例用，它简单。这些小球，换成其他元素，会有无限的可能 红影 发表于 2022-7-11 19:11
这里面放的小球少，就16个，放多了觉得太乱。
挺合适的。 马黑黑 发表于 2022-7-11 19:30
挺好。其实，小球只是举例用，它简单。这些小球，换成其他元素，会有无限的可能
比如把小球换成头像，就会有一群人在里面翻滚{:4_170:} 加林森 发表于 2022-7-11 19:59
挺合适的。
原图是这个https://pic.imgdb.cn/item/62cc16cdf54cd3f9370a0c94.png
为了放黑黑的小球，我把原来的奖球给删了{:4_173:} 红影 发表于 2022-7-11 20:27
原图是这个
为了放黑黑的小球，我把原来的奖球给删了
这个也挺漂亮的。就是不动的。 马黑黑 发表于 2022-7-11 18:28
学小辣椒和粥菇凉狂点，没抽到奖
是啊，我鼠标点了又点，结果静等。。。。。还是没有中奖{:4_170:} 哈哈~~~原来只能看，不能抽奖，亲爱的你是个小片子{:4_170:} 小辣椒 发表于 2022-7-11 20:39
是啊，我鼠标点了又点，结果静等。。。。。还是没有中奖
也不空欢喜一场 红影 发表于 2022-7-11 20:20
比如把小球换成头像，就会有一群人在里面翻滚
群魔乱舞{:4_170:} 马黑黑 发表于 2022-7-11 20:54
也不空欢喜一场
说了啊，开心就好{:4_172:} 狂点一番，一个都没有中
页:
[1]
2