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);});// initctx.fillStyle = '#000';ctx.fillRect(0, 0, canvas.width, canvas.height);// objectsvar 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 fireworkvar 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);}// resetfire.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() {// clearctx.globalCompositeOperation = 'source-over';ctx.globalAlpha = 0.18;ctx.fillStyle = '#000';ctx.fillRect(0, 0, canvas.width, canvas.height);// re-drawctx.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>
