所以本质上我还没有找到一种方法能够让我的骰子(由一个带有1-6(含)随机数字的表单框表示),表示为图像而不是数字,但是我不知道JS和希望能够使用 CSS、PHP 和 HTML 来做到这一点。我也无法设置复选框的样式,抱歉,如果我看起来无知。这是脚本:
<!doctype html>
<html lang="en">
<style>
body {
background-color: black;
font-family: helvetica;
text-align: center;
background-size: 105%;
background-position: center;
background-attachment: fixed;
background-repeat: no-repeat;
background-image: url(https://i.ytimg.com/vi/DfkFYgNLSmw/maxresdefault.jpg);
}
.header {
z-index: 10;
background-color: black;
color:White;
padding: 27px;
padding-top: 52px;
padding-bottom: 52px;
text-align: center;
justify-content: center;
position: fixed;
top: 12.5%;
left: 50%;
transform: translate(-50%, -50%);
padding-left: 45%;
padding-right: 45%;
}
.die {
text-align: center;
justify-content: center;
position: fixed;
top: 35%;
bottom: 50%;
transform: translate(7%, -50%);
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.die > div {
background-color: black;
margin: 10px;
padding: 20px;
font-size: 30px;
color: white;
}
.die > div > div {
background-color: dodgerblue;
justify-content: center;
padding: 15px;
padding-top: 0px;
}
.button {
text-align: center;
justify-content: center;
position: fixed;
top: 60%;
left: 50%;
padding-top: 9px;
padding-bottom: 9px;
padding-left: 25px;
padding-right: 25px;
transform: translate(-50%, -50%);
background-color: gold;
}
.button:active {
background-color: goldenrod;
}
.scroll {
text-align: center;
justify-content: center;
position: fixed;
bottom: 12px;
left: 50%;
transform: translate(-50%, -50%);
z-index: 10;
height: 2px;
width: 320px;
background-color: white;
mix-blend-mode: difference;
}
.statistics {
width: 0;
height: 0;
border-left: 250px solid transparent;
border-right: 1750px solid transparent;
border-bottom: 850px solid white;
position: absolute;
bottom: -100%;
left: -25%;
z-index: 9;
mix-blend-mode: difference;
/* Make sticky text something something so it drags down from the header (y) */
}
.underneath {
height: 650px;
width: 150%;
background-color: black;
position: absolute;
bottom: -212%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
<head>
<title>Yahtzee</title>
</head>
<div class="header">
<h1>Yahtzee</h1>
</div>
<body>
<?php
session_start();
$message = '';
if (isset($_POST["dice1check"])) {
$dice1check = 'checked';
$dice1 = $_POST["dice1"];
} else {
$dice1check = '';
$dice1 = rand(1,6);
}
echo"";
if (isset($_POST["dice2check"])) {
$dice2check = 'checked';
$dice2 = $_POST["dice2"];
} else {
$dice2check = '';
$dice2 = rand(1,6);
}
echo"";
if (isset($_POST["dice3check"])) {
$dice3check = 'checked';
$dice3 = $_POST["dice3"];
} else {
$dice3check = '';
$dice3 = rand(1,6);
}
echo"";
if (isset($_POST["dice4check"])) {
$dice4check = 'checked';
$dice4 = $_POST["dice4"];
} else {
$dice4check = '';
$dice4 = rand(1,6);
}
echo"";
if (isset($_POST["dice5check"])) {
$dice5check = 'checked';
$dice5 = $_POST["dice5"];
} else {
$dice5check = '';
$dice5 = rand(1,6);
}
echo"<br>";
echo $message;
?>
<form name="diceroller" method="post" action="<?php htmlentities($_SERVER['PHP_SELF'])?>">
<div class="die">
<div>
<label for="dice1">Dice 1</label> <br>
<input type="text" name="dice1" class="textbox" value="<?php echo $dice1;?>">
<br>
<label for="dice1check">Check to keep</label>
<div>
<input type="checkbox" name="dice1check" <?php echo $dice1check;?>>
</div>
</div>
<br> <br>
<div>
<label for="dice2">Dice 2</label> <br>
<input type="text" name="dice2" class="textbox" value="<?php echo $dice2;?>">
<br>
<label for="dice2check">Check to keep</label>
<div>
<input type="checkbox" name="dice2check" <?php echo $dice2check;?>>
</div>
</div>
<br> <br>
<div>
<label for="dice3">Dice 3</label> <br>
<input type="text" name="dice3" class="textbox" value="<?php echo $dice3;?>">
<br>
<label for="dice3check">Check to keep</label>
<div>
<input type="checkbox" name="dice3check" <?php echo $dice3check;?>>
</div>
</div>
<br> <br>
<div>
<label for="dice4">Dice 4</label> <br>
<input type="text" name="dice4" class="textbox" value="<?php echo $dice4;?>">
<br>
<label for="dice4check">Check to keep</label>
<div>
<input type="checkbox" name="dice4check" <?php echo $dice4check;?>>
</div>
</div>
<br> <br>
<div>
<label for="dice5">Dice 5</label> <br>
<input type="text" name="dice5" class="textbox" value="<?php echo $dice5;?>">
<br>
<label for="dice5check">Check to keep</label>
<div>
<input type="checkbox" name="dice5check" <?php echo $dice5check;?>>
</div>
</div>
</div>
<br> <br>
<button class="button">
<input type="submit" name="submit" value="Roll" class="button">
</button>
</form>
<div class="scroll">
<header1>SCROLL FOR STATISTICS</header1>
</div>
<div class="statistics">
</div>
<div class="underneath">
</div>
</imp>
</body>
</html>
我尝试使用 JS 但失败了😅
我删除了所有 PHP 代码,这是代码的 javascript 版本。除此之外,如果没有必要,尽量不要使用绝对位置。
<body>
<div class="header">
<h1>Yahtzee</h1>
</div>
<form name="diceroller" method="post" action="<?php htmlentities($_SERVER['PHP_SELF'])?>">
<div class="die">
<div>
<label for="dice1">Dice 1</label> <br>
<input type="text" name="dice1" class="textbox" value="<?= rand(1,6) ;?>">
<br>
<label for="dice1check">Check to keep</label>
<div>
<input type="checkbox" name="dice1check">
</div>
</div>
<br> <br>
<div>
<label for="dice2">Dice 2</label> <br>
<input type="text" name="dice2" class="textbox" value="<?= rand(1,6); ?>">
<br>
<label for="dice2check">Check to keep</label>
<div>
<input type="checkbox" name="dice2check">
</div>
</div>
<br> <br>
<div>
<label for="dice3">Dice 3</label> <br>
<input type="text" name="dice3" class="textbox" value="<?= rand(1,6); ?>">
<br>
<label for="dice3check">Check to keep</label>
<div>
<input type="checkbox" name="dice3check">
</div>
</div>
<br> <br>
<div>
<label for="dice4">Dice 4</label> <br>
<input type="text" name="dice4" class="textbox" value="<?= rand(1,6); ?>">
<br>
<label for="dice4check">Check to keep</label>
<div>
<input type="checkbox" name="dice4check" />
</div>
</div>
<br> <br>
<div>
<label for="dice5">Dice 5</label> <br>
<input type="text" name="dice5" class="textbox" value="<?= rand(1,6); ?> ">
<br>
<label for="dice5check">Check to keep</label>
<div>
<input type="checkbox" name="dice5check">
</div>
</div>
</div>
<br> <br>
<button class="button">Roll</button>
</form>
<div class="scroll">
<header1>SCROLL FOR STATISTICS</header1>
</div>
<div class="statistics">
</div>
<div class="underneath">
</div>
<script>
let dice1check = document.querySelector("input[name='dice1check']")
let dice2check = document.querySelector("input[name='dice2check']")
let dice3check = document.querySelector("input[name='dice3check']")
let dice4check = document.querySelector("input[name='dice4check']")
let dice5check = document.querySelector("input[name='dice5check']")
let dice1 = document.querySelector("input[name='dice1'")
let dice2 = document.querySelector("input[name='dice2'")
let dice3 = document.querySelector("input[name='dice3'")
let dice4 = document.querySelector("input[name='dice4'")
let dice5 = document.querySelector("input[name='dice5'")
function randomise(diceElement, checkElement) {
if (!checkElement.checked) {
let random = Math.floor(Math.random() * 6) + 1
diceElement.value = random
}
}
document.querySelector("button").addEventListener("click", function (e) {
e.preventDefault()
randomise(dice1, dice1check)
randomise(dice2, dice2check)
randomise(dice3, dice3check)
randomise(dice4, dice4check)
randomise(dice5, dice5check)
})
</script>