You are here
大转盘代码 有大用 有大大用
星期五, 2025-04-18 15:28 — adminshiping1
<?php
/**
* Created by PhpStorm.
* User: 11111111
* Date: 2025/4/18
* Time: 8:44
*/
$arr=[
'aaaa',
'bbbb',
'cccc',
'dddd',
'eeee',
'ffff',
'gggg',
'hhhh',
'iiii',
];
echo "<span style='color:red;'>所有人: </span>".implode(",",$arr);
$rand= array_rand ( $arr ,3 );
echo "<br/>";
$new_arr=array();
foreach($rand as $key=>$value)
{
$new_arr[] = $arr[$value];
}
echo "<span style='color:red;'>随机值班人: </span>".implode(",",$new_arr);
在网页上 用 转盘的形式实现上面的功能
下面是一个用于在网页上实现转盘随机选择功能的完整示例，使用HTML、CSS和JavaScript。
第一步：HTML结构
我们将创建一个简单的HTML结构，其中包括一个用于转盘的画布和触发旋转的按钮。
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>随机选择器</title>
<style>
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
canvas {
border: 2px solid #d3d3d3;
border-radius: 50%;
}
#spinButton {
margin-top: 20px;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
#result {
margin-top: 20px;
font-size: 20px;
color: red;
}
</style>
</head>
<body>
<h1>随机值班人选择器</h1>
<canvas id="spinner" width="400" height="400"></canvas>
<button id="spinButton">旋转选择</button>
<div id="result"></div>
<script>
const names = ['aaaa', 'bbbb', 'cccc', 'dddd', 'eeee', 'ffff', 'gggg', 'hhhh', 'iiii'];
const canvas = document.getElementById('spinner');
const ctx = canvas.getContext('2d');
let spinning = false;
function drawWheel() {
const sections = names.length;
const angle = (2 * Math.PI) / sections;
const colors = ['#FF5733', '#33FF57', '#3357FF', '#FF33A1', '#FFC300', '#DAF7A6', '#581845', '#C70039', '#900C3F'];
for (let i = 0; i < sections; i++) {
ctx.beginPath();
ctx.moveTo(200, 200);
ctx.arc(200, 200, 150, angle * i, angle * (i + 1));
ctx.fillStyle = colors[i % colors.length];
ctx.fill();
ctx.save();
ctx.translate(200, 200);
ctx.rotate(angle * i + angle / 2);
ctx.fillStyle = 'white';
ctx.fillText(names[i], 70, 10);
ctx.restore();
}
}
function spin() {
if (spinning) return;
spinning = true;
const degrees = Math.floor(Math.random() * 360 + 3600);
const spins = degrees * (Math.PI / 180);
const animationDuration = 5000; // 旋转5秒
let start = null;
function animate(timestamp) {
if (!start) start = timestamp;
const progress = timestamp - start;
const angle = spins * (progress / animationDuration);
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawWheel();
ctx.translate(200, 200);
ctx.rotate(angle);
ctx.translate(-200, -200);
ctx.drawImage(canvas, 0, 0);
if (progress < animationDuration) {
requestAnimationFrame(animate);
} else {
selectRandomName(degrees % 360);
spinning = false;
}
}
requestAnimationFrame(animate);
}
function selectRandomName(finalAngle) {
const index = Math.floor((finalAngle + 20) / (360 / names.length)) % names.length; // 根据角度调整
document.getElementById('result').innerText = "随机值班人: " + names[index];
}
document.getElementById('spinButton').onclick = spin;
drawWheel(); // 初始绘制
</script>
</body>
</html>
说明：
HTML元素：
使用
<canvas>来绘制转盘。一个按钮用于触发旋转。
一个
<div>用于展示选定的姓名。CSS样式：
简单的样式使转盘和按钮居中并美观。
JavaScript逻辑：
drawWheel函数绘制转盘，每个节代表一个名字。spin函数负责处理转盘的动画和随机角度。selectRandomName函数根据转盘停止时的角度确定展示的姓名。
总结：
该实现创建了一个交互式转盘，可以从预定义的名单中随机选择一个人。转盘在预设持续时间内旋转，然后随机停下，显示选定的人员，为用户提供了一个生动且动态的体验。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>值班人随机选择转盘</title>
<style>
body {
font-family: 'Microsoft YaHei', sans-serif;
text-align: center;
background-color: #f5f5f5;
padding: 20px;
}
.container {
max-width: 800px;
margin: 0 auto;
background-color: white;
padding: 30px;
border-radius: 10px;
box-shadow: 0 0 15px rgba(0,0,0,0.1);
}
h1 {
color: #d9534f;
margin-bottom: 30px;
}
.wheel-container {
position: relative;
width: 400px;
height: 400px;
margin: 0 auto 30px;
}
.wheel {
width: 100%;
height: 100%;
border-radius: 50%;
position: relative;
overflow: hidden;
border: 10px solid #333;
box-shadow: 0 0 0 5px #fff, 0 0 0 10px #333;
transition: transform 4s cubic-bezier(0.17, 0.67, 0.12, 0.99);
transform: rotate(0deg);
}
.wheel-item {
position: absolute;
width: 50%;
height: 50%;
left: 0;
top: 0;
transform-origin: 100% 100%; /* 关键修正点 */
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
font-size: 16px;
text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
box-sizing: border-box;
padding-bottom: 50px; /* 调整文字位置 */
padding-left: 20px;
}
.pointer {
position: absolute;
top: -20px;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 40px solid #d9534f;
z-index: 10;
}
.btn {
background-color: #d9534f;
color: white;
border: none;
padding: 12px 25px;
font-size: 18px;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
margin: 10px;
}
.btn:hover {
background-color: #c9302c;
}
.result {
margin-top: 30px;
padding: 15px;
background-color: #f9f9f9;
border-radius: 5px;
border-left: 5px solid #d9534f;
min-height: 24px;
}
.all-people {
margin-bottom: 20px;
color: #d9534f;
font-size: 16px;
}
.selected-people {
color: #d9534f;
font-size: 18px;
font-weight: bold;
}
</style>
</head>
<body>
<div class="container">
<h1>值班人随机选择转盘</h1>
<div class="all-people">
<strong>所有人: </strong>
<span id="allPeople"></span>
</div>
<div class="wheel-container">
<div class="pointer"></div>
<div class="wheel" id="wheel"></div>
</div>
<button class="btn" id="spinBtn">开始旋转</button>
<button class="btn" id="resetBtn">重置</button>
<div class="result">
<strong>随机值班人: </strong>
<span class="selected-people" id="selectedPeople"></span>
</div>
</div>
<script>
// 人员数组
const people = [
'aaaa', 'bbbb', 'cccc', 'dddd', 'eeee',
'ffff', 'gggg', 'hhhh', 'iiii'
];
// 显示所有人员
document.getElementById('allPeople').textContent = people.join(', ');
// 创建转盘
const wheel = document.getElementById('wheel');
const colors = [
'#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0', '#9966FF',
'#FF9F40', '#8AC24A', '#EA5F89', '#5D9CEC'
];
// 初始化转盘
function initWheel() {
wheel.innerHTML = '';
const angle = 360 / people.length;
people.forEach((person, index) => {
const item = document.createElement('div');
item.className = 'wheel-item';
item.textContent = person;
// 关键修正：正确的扇形定位
const startAngle = index * angle;
item.style.transform = `rotate(${startAngle}deg) skewY(${90 - angle}deg)`;
item.style.backgroundColor = colors[index % colors.length];
wheel.appendChild(item);
});
// 确保结果区域初始为空
document.getElementById('selectedPeople').textContent = '';
}
// 旋转转盘
function spinWheel() {
const spinBtn = document.getElementById('spinBtn');
spinBtn.disabled = true;
// 随机选择1个人
const randomIndex = Math.floor(Math.random() * people.length);
const selectedPerson = people[randomIndex];
// 计算旋转角度
const anglePerPerson = 360 / people.length;
const targetAngle = 360 * 5 + (randomIndex * anglePerPerson) + (anglePerPerson / 2);
// 旋转转盘
wheel.style.transform = `rotate(-${targetAngle}deg)`;
// 旋转结束后显示结果
setTimeout(() => {
document.getElementById('selectedPeople').textContent = selectedPerson;
spinBtn.disabled = false;
}, 4000);
}
// 重置转盘
function resetWheel() {
wheel.style.transform = 'rotate(0deg)';
document.getElementById('selectedPeople').textContent = '';
}
// 初始化
initWheel();
// 事件监听
document.getElementById('spinBtn').addEventListener('click', spinWheel);
document.getElementById('resetBtn').addEventListener('click', resetWheel);
</script>
</body>
</html>
普通分类: