基于JavaScript与css实现网页随机抽奖功能

最新推荐文章于 2025-06-20 16:06:55 发布

原创

最新推荐文章于 2025-06-20 16:06:55 发布 · 2.2k 阅读

3 ·

CC 4.0 BY-SA版权

这篇博客介绍了如何使用JavaScript和CSS创建一个网页抽奖功能。用户通过回车键启动和停止抽奖，中奖者会被从名单中移除并显示。功能包括背景音乐和图片切换。核心代码使用了setInterval、clearInterval、getElementById、innerHTML和splice等函数来实现滚动、停止、删除和响应键盘事件。CSS用于美化界面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

功能介绍:第一次按回车键,名单滚动,再按一次回车键暂停,抽到的人会从名单中移除并显示在中奖名单中,继续按回车键继续抽,最多抽3次.最终按esc键重置.

在开始和停止时都有不同的BGM和背景图片.

整体思路:这次的小程序比较简单,主要是利用随机数出去事先存在集合中的名字,与之前不同的是之前是java而这次是javascript,不过大体上差不多,知识细节有所差别,其中用到的

setInterval()函数和clearInterval()函数来实现不断地调用函数以达到滚动的目的,通过使用document.getElementById(id)来实现script与body的连接.通过innerHTML实现将值传递到组件中,通过使用splice()函数将集合中的某一元素去除,通过使用onkeydown来接受键盘指令,最后需要用到一些css指令来使界面看起来更漂亮.

核心代码如下:

function getName() {
					//产生随机数取到随机的名字
					index = Math.floor(Math.random()*list1.length) 
					name1=list1[index];
					content.innerHTML = name1;
					return name1;
		}
		
		function start(){
			//开始滚动抽取
			status = true;
			count++;
			i = window.setInterval(getName,80);//每80MS调用一次函数
			bgm.src="source/bgm.mp3";
			bg.style.background = "url(img

最低0.47元/天解锁文章

200万优质内容无限畅学