<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>随机加载图片</title>
<style type="text/css">
/* 设置全局字体家族 */
body {
font-family: Arial, sans-serif;
/* 设置背景颜色 */
background-color: #f5f5f5;
/* 移除默认的边距 */
margin: 0;
/* 移除默认的内边距 */
padding: 0;
/* 文本颜色 */
color: #333;
}
/* 容器的最大宽度 */
.container {
max-width: 800px;
/* 水平居中 */
margin: 0 auto;
/* 内边距 */
padding: 20px;
/* 背景颜色 */
background-color: #fff;
/* 添加阴影 */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
/* 圆角 */
border-radius: 8px;
}
/* 标题居中显示 */
h1 {
text-align: center;
/* 底部边距 */
margin-bottom: 20px;
}
/* 输入组 */
.input-group {
margin-bottom: 15px;
}
/* 标签样式 */
.input-group label {
display: block;
margin-bottom: 5px;
}
/* 输入框样式 */
.input-group input[type="text"],
.input-group input[type="file"] {
width: calc(100% - 22px);
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}
/* 按钮样式 */
.input-group button {
padding: 10px 20px;
background-color: #007BFF;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
}
/* 鼠标悬停效果 */
.input-group button:hover {
background-color: #0056b3;
}
/* 输出框样式 */
.output {
border: none;
outline: none;
padding: 5px;
width: 100%;
/* 初始宽度 */
min-width: 5px;
/* 最小宽度 */
max-width: 100%;
/* 最大宽度 */
overflow: hidden;
/* 超出部分隐藏 */
resize: none;
/* 禁止用户调整大小 */
margin-bottom: 20px;
}
/* 图片容器样式 */
#random-image-container {
position: relative;
width: 100%;
height: 300px;
overflow: hidden;
margin-bottom: 20px;
display: flex;
justify-content: center;
align-items: center;
}
/* 图片样式 */
#random-image {
position: absolute;
top: 0;
left: 0;
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
</style>
</head>
<body>
<!-- 主要容器 -->
<div class="container">
<!-- 标题 -->
<h1>有无图片抽奖</h1>
<!-- 无图模式 -->
<div id="mode1" style="display: none;">
<!-- 无图模式标题 -->
<h2 align="center">无图抽奖</h2>
<!-- 输入组，显示中奖人员 -->
<div class="input-group">
<label>中奖人员：</label>
<input type="text" id="display" value="" disabled />
</div>
<!-- 输入组，显示已添加的抽奖列表元素 -->
<div class="input-group">
<label>已经添加在抽奖列表元素：</label>
<input type="text" id="output" disabled class="output" oninput="resizeInput(this)" />
</div>
<!-- 输入组，添加抽奖列表的人员姓名 -->
<div class="input-group">
<label>请输入添加抽奖列表的人员姓名：</label>
<input type="text" id="add" value="" />
<!-- 按钮，点击时调用add()函数 -->
<button type="button" onclick="add()">加入抽奖</button>
</div>
<!-- 输入组，提供删除上一个和清空抽奖列表的按钮 -->
<div class="input-group">
<!-- 按钮，点击时调用delLast()函数 -->
<button type="button" onclick="delLast()">删除上一个</button>
<!-- 按钮，点击时调用del()函数 -->
<button type="button" onclick="del()">清空抽奖列表</button>
</div>
<!-- 输入组，删除指定元素 -->
<div class="input-group">
<label>请输入想要删除指定抽奖列表人员的姓名：</label>
<input type="text" id="del" value="" />
<!-- 按钮，点击时调用delOne()函数 -->
<button type="button" onclick="delOne()">删除指定元素</button>
</div>
<!-- 输入组，开始抽奖按钮 -->
<div class="input-group">
<!-- 按钮，点击时调用lottery()函数 -->
<button type="button" onclick="lottery()">开始抽奖</button>
</div>
</div>
<!-- 有图模式 -->
<div id="mode2" style="display: none;">
<!-- 有图模式标题 -->
<h2 align="center">有图抽奖</h2>
<!-- 输入组，选择图片文件 -->
<div class="input-group">
<label>插入元素：</label>
<input type="file" id="imageInput" multiple />
</div>
<!-- 按钮，点击时调用show-random-image按钮的事件 -->
<div class="input-group">
<button type="button" id="show-random-image">抽奖开始</button>
</div>
<!-- 图片容器，用于显示随机加载的图片 -->
<div id="random-image-container">
<img src="" id="random-image" style="display: none;" />
</div>
<!-- 输入组，显示已添加的图片名称 -->
<div class="input-group">
<label>已经添加的图片名称：</label>
<input type="text" id="output1" disabled class="output" />
</div>
<!-- 输入组，选择图片名称删除 -->
<div class="input-group">
<label>选择图片名称删除：</label>
<select id="deleteSelect" class="output"></select>
<!-- 按钮，点击时调用deleteSelectedImage()函数 -->
<button type="button" id="deleteButton">删除指定图片</button>
</div>
</div>
</div>
<script>
/* 全局变量 */
var arr = []; // 存储参与者或图片
var addText = document.getElementById("add"); // 获取添加文本框
var display = document.getElementById("display"); // 获取显示中奖人的输入框
var outputDiv1 = document.getElementById("output"); // 获取输出框
var outputDiv = document.getElementById("output1"); // 使用output1
var delText = document.getElementById("del"); // 获取删除指定元素的输入框
var currentIndex = 0; // 当前索引
var intervalId; // 用于存储轮播间隔ID
/* 添加参与者 */
function add() {
if (addText.value !== "") {
if (arr.includes(addText.value)) {
alert("已经有重复名称!");
} else {
var textValue = addText.value;
arr.push(textValue);
addText.value = "";
outputDiv1.value = arr.join(',');
console.log("添加后的数组：" + arr);
}
} else {
alert("输入值为空，请输入人名！");
}
return arr;
}
/* 删除最后一个参与者 */
function delLast() {
if (arr.length > 0) {
arr.pop();
outputDiv1.value = arr.join(',');
console.log("删除上一个元素后的数组：" + arr);
} else {
alert("列表为空，无法删除！");
}
return arr;
}
/* 清空列表 */
function del() {
arr = [];
outputDiv1.value = "";
console.log("删除所有元素后的数组：" + arr);
}
/* 删除指定元素 */
function delOne() {
const index = arr.indexOf(delText.value);
if (index > -1) {
arr.splice(index, 1);
}
delText.value = "";
outputDiv1.value = arr.join(',');
console.log("删除指定元素后的数组：" + arr);
return arr;
}
/* 开始抽奖 */
function lottery() {
if (arr.length !== 0) {
var result = arr[Math.floor(Math.random() * arr.length)];
display.value = result;
alert("恭喜" + display.value + "被选中！");
} else {
alert("抽奖列表为空，无法进行抽奖！");
}
}
/* 调整输入框大小 */
function resizeInput(input) {
input.style.width = (input.value.length + 1) * 8 + 'px'; // 字符长度乘以字体大小
if (input.style.width > '1080px') {
input.style.width = '1080px'; // 限制最大宽度
}
}
/* 处理文件上传 */
function handleImageFiles(e) {
var files = e.target.files;
var output = document.getElementById("output1"); // 使用output1
var existingOutput = output.value.trim();
var newOutput = existingOutput ? existingOutput + ", " : "";
for (var i = 0; i < files.length; i++) {
var file = files[i];
arr.push({
name: file.name,
dataURL: URL.createObjectURL(file)
});
newOutput += file.name;
if (i < files.length - 1) {
newOutput += ", ";
}
}
output.value = newOutput;
updateDeleteSelect();
displayImages();
}
/* 显示图片 */
function displayImages() {
var img = document.getElementById("random-image");
if (arr.length > 0) {
img.src = arr[currentIndex].dataURL;
img.style.display = "block";
img.style.maxWidth = "100%";
img.style.maxHeight = "100%";
img.style.objectFit = "contain";
startCarousel();
} else {
img.style.display = "none";
}
}
/* 开始轮播 */
function startCarousel(speed) {
speed = speed || 1000;
clearInterval(intervalId);
intervalId = setInterval(function() {
currentIndex = (currentIndex + 1) % arr.length;
var img = document.getElementById("random-image");
img.src = arr[currentIndex].dataURL;
}, speed);
}
/* 加速轮播 */
function speedUpCarousel() {
clearInterval(intervalId);
startCarousel(200);
}
/* 停止轮播 */
function stopCarousel() {
clearInterval(intervalId);
var img = document.getElementById("random-image");
img.src = arr[currentIndex].dataURL;
display.value = arr[currentIndex].name;
alert("恭喜" + display.value + "被选中！");
}
/* 更新删除选项 */
function updateDeleteSelect() {
var select = document.getElementById("deleteSelect");
select.innerHTML = "";
for (var i = 0; i < arr.length; i++) {
var option = document.createElement("option");
option.value = arr[i].name;
option.text = arr[i].name;
select.appendChild(option);
}
}
/* 删除选定图片 */
function deleteSelectedImage() {
var selectedName = document.getElementById("deleteSelect").value;
var indexToDelete = -1;
for (var i = 0; i < arr.length; i++) {
if (arr[i].name === selectedName) {
indexToDelete = i;
break;
}
}
if (indexToDelete > -1) {
arr.splice(indexToDelete, 1);
var output = document.getElementById("output1");
output.value = arr.map(item => item.name).join(", ");
updateDeleteSelect();
displayImages();
} else {
alert("未找到该图片名称，请重新选择！");
}
}
/* 选择模式 */
function chooseMode() {
var choice = prompt("请选择抽奖模式：\n1. 无图模式\n2. 有图模式", "");
if (choice === "1") {
document.getElementById("mode1").style.display = "block";
document.getElementById("mode2").style.display = "none";
} else if (choice === "2") {
document.getElementById("mode1").style.display = "none";
document.getElementById("mode2").style.display = "block";
} else {
alert("无效的选择，请重新选择！");
chooseMode();
}
}
/* 页面加载时执行 */
window.onload = function() {
chooseMode();
document.getElementById('imageInput').addEventListener('change', handleImageFiles);
document.getElementById('show-random-image').addEventListener('click', function() {
speedUpCarousel();
setTimeout(function() {
stopCarousel();
}, 3000);
});
document.getElementById('deleteButton').addEventListener('click', deleteSelectedImage);
arr = [];
outputDiv.value = "";
outputDiv1.value = "";
display.value = "";
};
</script>
</body>
</html>
进入页面选择输入‘1’-无图抽奖（mode1）还是输入‘2’-有图抽奖(mode2)，刷新页面可以重置页面所有数据。
无图抽奖，在文本框输入参加抽奖人员名称添加名单里。下面按钮对抽奖名单指定或所有人员删除修改，点击开始抽奖随机选中幸运儿。
有图抽奖点击浏览加入抽奖人员图片，可以一次加入多张图片，图片名称为抽奖人员名字，下面抽奖按钮就会轮询播放抽奖人员图片，文本框会显示所有图片的名称（抽奖人员名字），下面选项框可以选择已添加的图片名称进行删除指定图片。
无图抽奖示例图
有图抽奖示例图
扫一扫
1565
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
