HTML+CSS+JS实现网页随机点名
大家好，我是小王，一个很喜欢Coding的小女孩。
很喜欢这句话：人数没有白走的路，每一步都算数，关注我，后期分享更多资源！
效果如下：
部分代码如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>随机点名 </title> <style> * { margin: 0; padding: 0; font-family: "微软雅黑"; } .box { width: 80vw; margin: 0 auto; background: #EFEFEF; position: absolute; /*left: 0;*/ left: calc(50% - 40vw); /*水平居中*/ top: 0; } #name { padding: 60px; font-size: 40px; font-weight: 900; text-align: center; background: url(images/6.jpg) no-repeat center; /*以盒子内的文字作为裁剪区域向外裁剪，文字之外的区域都将被裁剪掉*/ -webkit-background-clip: text; -webkit-text-fill-color: transparent; /*文字颜色填充*/ } h1 { letter-spacing: 3px; height: 70px; line-height: 70px; background: #ccc; text-align: center; -webkit-text-stroke: 1px #000; /*字体描边*/ -webkit-text-fill-color: transparent; /*谷歌内核特有的属性*/ } #bt { height: 50px; line-height: 50px; background: deepskyblue; text-align: center; color: #fff; cursor: pointer; } #canvas { display: none; } </style> </head> <body id="bodyid"> <canvas id="canvas"></canvas> <div class="box"> <h1>金榜题名</h1> <div id="name">张三</div> <div id="bt" onclick="doit()">开始点名</div> </div> <script src="js/jquery.min.js"></script> <script> $(function() { var canvas = $('#canvas')[0]; canvas.width = $(window).width(); canvas.height = $(window).height(); var ctx = canvas.getContext('2d'); // resize $(window).on('resize', function() { canvas.width = $(window).width(); canvas.height = $(window).height(); ctx.fillStyle = '#000'; ctx.fillRect(0, 0, canvas.width, canvas.height); }); // init ctx.fillStyle = '#000'; ctx.fillRect(0, 0, canvas.width, canvas.height); // objects var listFire = []; var listFirework = []; var fireNumber = 10; var center = { x: canvas.width / 2, y: canvas.height / 1.5 }; var range = 100; for (var i = 0; i < fireNumber; i++) { var fire = { x: Math.random() * range / 2 - range / 4 + center.x, y: Math.random() * range * 2 + canvas.height, size: Math.random() + 0.5, fill: '#fd1', vx: Math.random() - 0.5, vy: -(Math.random() + 4), ax: Math.random() * 0.02 - 0.01, far: Math.random() * range + (center.y - range) }; fire.base = { x: fire.x, y: fire.y, vx: fire.vx }; // listFire.push(fire); } function randColor() { var r = Math.floor(Math.random() * 256); var g = Math.floor(Math.random() * 256); var b = Math.floor(Math.random() * 256); var color = 'rgb($r, $g, $b)'; color = color.replace('$r', r); color = color.replace('$g', g); color = color.replace('$b', b); return color; } (function loop() { requestAnimationFrame(loop); update(); draw(); })(); function update() { for (var i = 0; i < listFire.length; i++) { var fire = listFire[i]; // if (fire.y <= fire.far) { // case add firework var color = randColor(); for (var i = 0; i < fireNumber * 5; i++) { var firework = { x: fire.x, y: fire.y, size: Math.random() + 1.5, fill: color, vx: Math.random() * 5 - 2.5, vy: Math.random() * -5 + 1.5, ay: 0.05, alpha: 1, life: Math.round(Math.random() * range / 2) + range / 2 }; firework.base = { life: firework.life, size: firework.size }; listFirework.push(firework); } // reset fire.y = fire.base.y; fire.x = fire.base.x; fire.vx = fire.base.vx; fire.ax = Math.random() * 0.02 - 0.01; } // fire.x += fire.vx; fire.y += fire.vy; fire.vx += fire.ax; } for (var i = listFirework.length - 1; i >= 0; i--) { var firework = listFirework[i]; if (firework) { firework.x += firework.vx; firework.y += firework.vy; firework.vy += firework.ay; firework.alpha = firework.life / firework.base.life; firework.size = firework.alpha * firework.base.size; firework.alpha = firework.alpha > 0.6 ? 1 : firework.alpha; // firework.life--; if (firework.life <= 0) { listFirework.splice(i, 1); } } } } function draw() { // clear ctx.globalCompositeOperation = 'source-over'; ctx.globalAlpha = 0.18; ctx.fillStyle = '#000'; ctx.fillRect(0, 0, canvas.width, canvas.height); // re-draw ctx.globalCompositeOperation = 'screen'; ctx.globalAlpha = 1; for (var i = 0; i < listFire.length; i++) { var fire = listFire[i]; ctx.beginPath(); ctx.arc(fire.x, fire.y, fire.size, 0, Math.PI * 2); ctx.closePath(); ctx.fillStyle = fire.fill; ctx.fill(); } for (var i = 0; i < listFirework.length; i++) { var firework = listFirework[i]; ctx.globalAlpha = firework.alpha; ctx.beginPath(); ctx.arc(firework.x, firework.y, firework.size, 0, Math.PI * 2); ctx.closePath(); ctx.fillStyle = firework.fill; ctx.fill(); } } }); //点名事件 var id = document.getElementById('canvas'); var namelist = ["李四", "王五", "二二", "一一", "三三"]; var mytime = null; function doit() { var bt = document.getElementById("bt"); if (mytime == null) { bt.innerHTML = "停止点名"; bt.style.background = 'palevioletred'; id.style.display = 'none' //随机点名 show(); //定义一个方法 } else { bt.innerHTML = "开始点名"; bt.style.background = "deepskyblue"; clearTimeout(mytime); mytime = null; id.style.display = 'block' } } /*Math.floor 向下取整(-16.2就为-17)，去除小数*/ function show() { var name = document.getElementById("name"); var num = Math.floor(Math.random() * namelist.length); name.innerHTML = namelist[num]; mytime = setTimeout(show, 80); } </script> </body> </html>
