【有源码】HTML开发生肖计算器_<div style="background: #f8f9fa; padding: 15px; bo-CSDN博客

本文链接：https://blog.csdn.net/m0_46426465/article/details/146020686

HTML开发生肖计算器

公众号：木木与代码
本文作者：@MuMu
编写日期：2025年03月04日
本文字数：2140个字符
关注可了解更多的教程。问题或建议，请公众号留言；

实现效果：

页面元素（HTML）

 <div class="container">
    <h1>🐰 生肖计算器 🐉</h1>
    <span>选择年份:</span>
    <div class="input-group">
        <input type="number" id="year" min="1900" max="2100" value="2025">
        <span class="text">年</span>
    </div>
    <button onclick="calculateZodiac()">计算</button>
    <div id="result">
        <p>2023年的生肖是：<span id="zodiac">兔</span></p>
    </div>
</div>

页面样式（CSS）

body {
    background-size: cover;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container {
    background: rgba(255,255,255,0.8);
    padding: 30px 40px;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}


h1 {
    color: #ffa200;
    margin-bottom: 44px;
    text-align: center;
}


span {
    font-size: 14px;
    color: #bbb;
}

.input-group{
    width: 100%;
    background-color: #f8f9fa;
    border-radius: 4px;
    border: 1px solid #dde9ff;
    box-sizing: border-box;
    margin-top: 12px;
}

input {
    font-size: 16px;
    width: 80%;
    box-sizing: border-box;
    border: none;
    background: none;
    padding: 14px 10px;
    outline: none;
}

.text{
    border-left: 1px solid #dde9ff;
    display: inline-block;
    height: 100%;
    width: 18%;
    text-align: center;
    box-sizing: border-box;
    padding: 14px 10px;
}

button {
    margin-top: 32px;
    font-size: 16px;
    background-color: #007bff;
    width: 450px;
    line-height: 42px;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

button:hover {
    background-color: #0056b3;
}

#result {
    font-size: 20px;
    color: #007bff;
}

功能实现（JavaScript)

 <script>
    function calculateZodiac() {
        const year = parseInt(document.getElementById('year').value);
        const zodiacs = ["鼠", "牛", "虎", "兔", "龙", "蛇", "马", "羊", "猴", "鸡", "狗", "猪"];
        const zodiacIndex = (year - 1900) % 12;
        const zodiac = zodiacs[zodiacIndex];
        document.getElementById('zodiac').textContent = zodiac;
        document.getElementById('result').innerHTML = `<p>${year}年的生肖是：<b id="zodiac">${zodiac}</b></p>`;
    }

    // 页面加载时显示当前年份的生肖
    window.onload = function() {
        const currentYear = new Date().getFullYear();
        document.getElementById('year').value = currentYear;
        calculateZodiac();
    };
</script>

完整代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>生肖计算器</title>
    <style>
        body {
            background-size: cover;
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .container {
            background: rgba(255,255,255,0.8);
            padding: 30px 40px;
            border-radius: 15px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        }

        h1 {
            color: #ffa200;
            margin-bottom: 44px;
            text-align: center;
        }

        span {
            font-size: 14px;
            color: #bbb;
        }

        .input-group{
            width: 100%;
            background-color: #f8f9fa;
            border-radius: 4px;
            border: 1px solid #dde9ff;
            box-sizing: border-box;
            margin-top: 12px;
        }

        input {
            font-size: 16px;
            width: 80%;
            box-sizing: border-box;
            border: none;
            background: none;
            padding: 14px 10px;
            outline: none;
        }

        .text{
            border-left: 1px solid #dde9ff;
            display: inline-block;
            height: 100%;
            width: 18%;
            text-align: center;
            box-sizing: border-box;
            padding: 14px 10px;
        }

        button {
            margin-top: 32px;
            font-size: 16px;
            background-color: #007bff;
            width: 450px;
            line-height: 42px;
            color: #fff;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        button:hover {
            background-color: #0056b3;
        }

        #result {
            font-size: 20px;
            color: #007bff;
        }
    </style>
</head>
<body>

    <div class="container">
        <h1>🐰 生肖计算器 🐉</h1>
        <span>选择年份:</span>
        <div class="input-group">
            <input type="number" id="year" min="1900" max="2100" value="2025">
            <span class="text">年</span>
        </div>
        <button onclick="calculateZodiac()">计算</button>
        <div id="result">
            <p>2023年的生肖是：<span id="zodiac">兔</span></p>
        </div>
    </div>

    <script>
        function calculateZodiac() {
            const year = parseInt(document.getElementById('year').value);
            const zodiacs = ["鼠", "牛", "虎", "兔", "龙", "蛇", "马", "羊", 
                "猴", "鸡", "狗", "猪"];
            const zodiacIndex = (year - 1900) % 12;
            const zodiac = zodiacs[zodiacIndex];
            document.getElementById('zodiac').textContent = zodiac;
            document.getElementById('result').innerHTML = `<p>${year}年的生肖是：
                <b id="zodiac">${zodiac}</b></p>`;
        }

        // 页面加载时显示当前年份的生肖
        window.onload = function() {
            const currentYear = new Date().getFullYear();
            document.getElementById('year').value = currentYear;
            calculateZodiac();
        };
    </script>

</body>
</html>