✅Slot-Machine.php
ThisHere's a page can be used to draw lots, and the samples can also be used to take horoscopes.
<!DOCTYPE html>
<html>
<head>
<title>Slot Machine</title>
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=0.8">
<style>
@media (max-width: 980px) {
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
background-color: #007eca;
}
}
@media (min-width: 981px) {
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
background-color: #007eca;
background-image: url("https://dl.itslittlekevin.com/projects/5069.png");
background-repeat: no-repeat;
background-position: right center;
background-size: auto 100%;
}
}
h1, p, h4 {
text-shadow: 2px 2px 2px #00000055;
}
* {
color: white;
}
button {
font-size: 15px;
background-color: #00325565;
padding: 5px 15px;
border-radius: 5px;
border-width: 0px;
margin: 5px;
cursor: pointer;
}
h4 a {
text-decoration: none;
}
input {
color: black;
margin: 10px;
border-radius: 5px;
padding: 5px 15px
}
#input-container {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 20px;
}
.input-row {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 10px;
}
input[type="text"] {
width: 200px;
margin-right: 10px;
font-size: 15px;
}
#button-container {
display: flex;
justify-content: center;
align-items: center;
}
#result {
display: none;
}
</style>
</head>
<body>
<h1 align="center">赛博抽签 | Slot Machine</h1>
<div id="input-container">
<div class="input-row">
<input type="text" placeholder="Enter something" class="input-field">
<button class="add-btn" onclick="addInput()">+</button>
<button class="remove-btn" onclick="removeInput(this)">-</button>
</div>
<div class="input-row">
<input type="text" placeholder="Enter something" class="input-field">
<button class="add-btn" onclick="addInput()">+</button>
<button class="remove-btn" onclick="removeInput(this)">-</button>
</div>
</div>
<h3><div id="result"></div></h3>
<div id="button-container">
<button onclick="castLots()"> 抽签 | Roll </button>
<button onclick="showExample()"> 测运势 | Example </button> <!-- Added example button -->
</div><br>
<div id="button-container">
<button id="refresh-btn" onclick="refresh()"> 清空 | Clear Input </button>
<button onClick="window.location.href=window.location.href"> 重来 | Clear All </button>
</div>
<h4><a href="https://itslittlekevin.com/gadgetslist">»返回工具列表 | Return to Gadgets List«</a></h4>
<p>© itsLittleKevin · All rights reserved.</p>
<script>
var inputContainer = document.querySelector("#input-container");
var resultContainer = document.querySelector("#result");
var refreshBtn = document.querySelector("#refresh-btn");
function addInput() {
var newRow = document.createElement("div");
newRow.className = "input-row";
newRow.innerHTML = '<input type="text" placeholder="Enter something" class="input-field"><button class="add-btn" onclick="addInput()">+</button><button class="remove-btn" onclick="removeInput(this)">-</button>';
inputContainer.appendChild(newRow);
}
function removeInput(btn) {
var row = btn.parentNode;
if (inputContainer.childElementCount > 2) { // Keep at least two input fields
inputContainer.removeChild(row);
}
}
function castLots() {
var inputs = document.querySelectorAll(".input-field");
var things = Array.from(inputs, input => input.value).filter(Boolean); // Get non-empty values
if (things.length) {
var selectedThing = things[Math.floor(Math.random() * things.length)];
resultContainer.textContent = "Selected: " + selectedThing;
resultContainer.style.display = "block";
refreshBtn.style.display = "inline-block";
}
}
function clear() {
var inputs = document.querySelectorAll(".input-field");
inputs.forEach(input => input.value = "");
resultContainer.style.display = "none";
clearBtn.style.display = "none";
while (inputContainer.childElementCount > 2) { // Remove any extra input fields
inputContainer.removeChild(inputContainer.lastChild);
}
}
function refresh() {
var inputs = document.querySelectorAll(".input-field");
inputs.forEach(input => input.value = "");
resultContainer.style.display = "none";
refreshBtn.style.display = "none";
}
function showExample() { // Added example function
var inputs = document.querySelectorAll(".input-field");
var exampleThings = ["大吉", "中吉", "小吉", "吉", "半吉", "末吉", "末小吉", "凶", "小凶", "半凶", "末凶", "大凶"]; // Example list of roles
if (inputs.length < exampleThings.length) { // Add more input fields if needed
var diff = exampleThings.length - inputs.length;
for (var i = 0; i < diff; i++) {
addInput();
}
inputs = document.querySelectorAll(".input-field"); // Update the inputs variable
}
for (var i = 0; i < exampleThings.length; i++) { // Fill the input fields with the example things
inputs[i].value = exampleThings[i];
}
resultContainer.style.display = "none"; // Hide the result
refreshBtn.style.display = "inline-block"; // Show the refresh button
}
</script>
</body>
</html>