将数字形成图像

问题描述 投票：0回答：3

所以本质上我还没有找到一种方法能够让我的骰子（由一个带有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 html css
3个回答
0
投票

我删除了所有 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>
0
投票

骰子类（包含复选框）和“滚动”按钮被页面上的其他元素隐藏（重叠）。

供您参考，

z-index
是控制页面上重叠元素的堆叠顺序的 CSS 属性。

因此，您可以指定类骰子具有更大的 z-index 值（例如 

z-index:50000
），并将按钮指定为 
z-index:50001
（这样它们就不会被顶部的其他元素重叠），然后它就可以工作了

因此，根据您的原始代码：

(1) 改变

    <button class="button">
        <input type="submit" name="submit" value="Roll" class="button">
    </button>

到

    <button class="button" style="z-index:50001">
        <input type="submit" name="submit" value="Roll" class="button">
    </button>

和

(2) 改变

 .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 {
        text-align: center;
        justify-content: center;
        position: fixed;
        top: 35%;
        bottom: 50%;
        transform: translate(7%, -50%);
        z-index:50000;        
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }
0
投票

要实现将骰子滚动显示为图像而不是仅使用 HTML、CSS 和 PHP 的数字的目标，您可以为骰子的每一面（1 到 6）创建图像文件，然后使用 PHP 随机选择并显示这些图像基于掷骰子。您可以通过以下方式修改代码来实现此目的：

创建六个图像文件，分别命名为 dice1.png、dice2.png、...、dice6.png，分别代表骰子的每一面。 修改 PHP 代码以选择 1 到 6 之间的随机数，然后使用该数字构造相应图像的文件名。 这是修改后的 PHP 代码：

<?php
session_start();
$message = '';

// Function to generate a random dice roll and return the filename of the corresponding image
function rollDice(&$check, &$value) {
    if (isset($_POST[$check])) {
        $check = 'checked';
        $value = $_POST[$check];
    } else {
        $check = '';
        $value = rand(1,6);
    }
    return "dice" . $value . ".png";
}

$dice1Image = rollDice("dice1check", $dice1);
$dice2Image = rollDice("dice2check", $dice2);
$dice3Image = rollDice("dice3check", $dice3);
$dice4Image = rollDice("dice4check", $dice4);
$dice5Image = rollDice("dice5check", $dice5);

?>

保存到 grepper 现在，更新您的 HTML 代码以显示这些图像而不是输入字段：

<div class="die">
    <div>
        <label for="dice1">Dice 1</label> <br>
        <img src="<?php echo $dice1Image; ?>" alt="Dice 1">
        <br>
        <label for="dice1check">Check to keep</label>
        <div>
            <input type="checkbox" name="dice1check" <?php echo $dice1check;?>>
        </div>
    </div>
    <!-- Repeat for dice 2 to 5 -->
</div>

这会将骰子显示为图像而不是数字。确保图像文件（dice1.png、dice2.png 等）与 HTML 文件位于同一目录中。

对于复选框的样式，您可以使用 CSS 来自定义其外观。例如：

input[type="checkbox"] {
    /* Your custom styles here */
    appearance: none; /* Hide default checkbox */
    width: 20px;
    height: 20px;
    background-color: #ccc;
    border-radius: 5px;
    cursor: pointer;
}

input[type="checkbox"]:checked {
    background-color: #00ff00; /* Change color when checked */
}

根据您的设计偏好调整样式。此 CSS 应放置在 HTML 文件部分的标签内。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.