答案之书和源代码-CSDN博客

本文链接：https://blog.csdn.net/weixin_43017921/article/details/147205736

答案之书是一个神秘而神奇的工具，它可以帮助你在遇到问题或犹豫不决的时候找到答案或暗示。这个程序模拟了答案之书的功能，让你随机生成一个简短而有启发性的答案，让你在困境中找到一丝希望。

在这个程序中，你会看到一个画布上显示着一本神秘的答案之书。书中包含着各种短小而有力的答案，每一次点击按钮，都会随机生成一个新的答案。这些答案可能是关于解决当前困难的启示，也可能是有关未来美好事物的预示，总是让人充满期待和希望。

不仅如此，程序还附带了对答案的解释，帮助你更好地理解和运用这些简短的答案。只需默念你的问题，点击按钮，就能找到那个恰到好处的答案，让你重新获得力量和信心。

无论何时何地，当你感到迷茫或无助时，不妨来尝试这个答案之书程序，或许你会在那一刻找到你所需的答案。愿这个神秘的答案之书，为你的生活带来一丝光明和指引。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>答案之书</title>
<style>
    body {
        margin: 0;
        padding: 0;
        font-family: Arial, sans-serif;
        background-color: #ffffff;
    }
    #container {
        width: 380px;
        height: 700px;
        margin: 0 auto;
        position: relative;
    }
    #book {
        width: 300px;
        height: 190px;
        position: absolute;
        top: 44px;
        left: 32px;
        background: url('https://img.alicdn.com/imgextra/i3/O1CN01FSw38T1Ne6L2mg3Mb_!!6000000001594-2-tps-936-1200.png') no-repeat center center;
        background-size: contain;
        text-align: center;
        color: #F9DBB3;
        font-size: 60px;
        line-height: 65px;
        font-weight: bold;
        padding: 0 10px;
    }
    #explanation {
        position: absolute;
        top: 236px;
        left: 32px;
        font-size: 16px;
        line-height: 26px;
        color: #ffffff;
    }
    #btn {
        position: absolute;
        bottom: 16px;
        left: 50%;
        transform: translateX(-50%);
        width: 200px;
        height: 32px;
        background-color: #1C1C1C;
        color: #ffffff;
        font-size: 16px;
        border-radius: 16px;
        text-align: center;
        line-height: 32px;
        cursor: pointer;
    }
</style>
</head>
<body>
<div id="container">
    <div id="book">答案</div>
    <div id="explanation">“遇到问题、犹豫不决时，试试拿走这个简单的答案或暗示。”</div>
    <button id="btn">默念问题、寻找答案</button>
</div>

<script>
    const answers = [
        "当下困难、即将解决",
        "心中的她、即将出现",
        // 还可以继续添加更多的答案
    ];

    const book = document.getElementById("book");
    const explanation = document.getElementById("explanation");

    document.getElementById("btn").addEventListener("click", function() {
        const randomIndex = Math.floor(Math.random() * answers.length);
        const randomAnswer = answers[randomIndex].split("、");
        book.innerHTML = `${randomAnswer[0]}<br>${randomAnswer[1]}`;
    });
</script>
</body>
</html>