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>