周六 html完

gumayusi_xs / 2023-07-30 / 原文

不看着w3cschool不会写，要记的太多太多了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
    <style>
        body {
            background-color: pink;
            text-align: center;
        }
        .image-container {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 50px;
        }
        .image-container img {
            width: 600px;
            height: 700px;
            border: 0;
        }
        .button-container {
            margin-top: 20px;
        }
        .button-container input[type="button"] {
            font-size: 16px;
        }
        .button-container input[type="button"]:hover {
            color: red;
        }
    </style>
</head>
<body>
    <div class="image-container">
        <img id="myImage" src="../img/66c0359921a3b9918001d2e3d5b4ba0.jpg">
    </div>
    <div class="button-container">
        <input type="button" onclick="on()" value="确认">
        <span style="font-size: 48px; color: red;">是否查看cy的腹肌</span>
        <input type="button" onclick="off()" value="取消">
    </div>

    <script>
        function on(){
            document.getElementById('myImage').src='../img/38a801089221d1d8bb3a2cd1db07681.jpg';
            document.getElementById('myImage').style.width = '600px';
            document.getElementById('myImage').style.height = '700px';
            document.querySelector('.button-container span').innerText = '很遗憾，没有腹肌';
        }
        function off(){
            document.getElementById('myImage').src='../img/66c0359921a3b9918001d2e3d5b4ba0.jpg';
            document.getElementById('myImage').style.width = '600px';
            document.getElementById('myImage').style.height = '700px';
            alert('不许取消！');
        }
    </script>
</body>
</html>