统计
  • 建站日期:2021-03-10
  • 文章总数:386 篇
  • 评论总数:421 条
  • 分类总数:9 个
  • 最后更新:10月20日
文章 未分类

计算出生至今活了多少天引流HTML页面

创新博客
首页 未分类 正文


计算出生至今活了多少天引流HTML页面
-创新博客-专注于资源分享的blog
-第1
张图片

引流HTML单页面,选择出生年月日,然后计算出自己从出生至今活了多天。


计算出生至今活了多少天引流HTML页面
-创新博客-专注于资源分享的blog
-第2
张图片

直接复制代码保存为html即可/

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>计算天数</title>
    <style>
        body {

            background-image: linear-gradient(90deg, rgba(60, 10, 30, .04) 3%, transparent 0), linear-gradient(1turn, rgba(60, 10, 30, .04) 3%, transparent 0);
            background-size: 20px 20px;
            background-position: 50%;
            background-repeat: repeat;
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }

        .container {
            width: 100%;
            max-width: 600px;
            margin: 0 auto;
            padding: 20px;
        }

        .title {
            font-size: 24px;
            font-weight: bold;
            text-align: center;
            margin-bottom: 20px;
        }

        label {
            display: block;
            font-size: 16px;
            font-weight: bold;
            margin-bottom: 10px;
        }

        select {
            display: block;
            font-size: 16px;
            padding: 5px;
            margin-bottom: 20px;
        }

        button {
            background-color: #4CAF50;
            color: white;
            font-size: 16px;
            border: none;
            padding: 10px;
            cursor: pointer;
        }

        .result {
            font-size: 20px;
            font-weight: bold;
            text-align: center;
            margin-top: 20px;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="title">计算天数</div>
    <div>
        <label>出生年份:</label>
        <select id="year">
            <option value=""></option>
            <script>
                for (var i = new Date().getFullYear(); i >= 1900; i--) {
                    document.write("<option value='" + i + "'>" + i + "</option>");
                }
            </script>
        </select>
    </div>
    <div>
        <label>出生月份:</label>
        <select id="month">
            <option value=""></option>
            <option value="01">01</option>
            <option value="02">02</option>
            <option value="03">03</option>
            <option value="04">04</option>
            <option value="05">05</option>
            <option value="06">06</option>
            <option value="07">07</option>
            <option value="08">08</option>
            <option value="09">09</option>
            <option value="10">10</option>
            <option value="11">11</option>
            <option value="12">12</option>
        </select>
    </div>
    <div>
        <label>出生日期:</label>
        <select id="day">
            <option value=""></option>
        </select>
    </div>
    <button onclick="calculate()">计算</button>
    <div class="result" id="result"></div>
    <div style="width: 100%;">
        <a href="https://y.goolibao.com/"><img style="display: block;max-width: 50%;margin: 0 auto;" src="https://y.goolibao.com/content/uploadfile/tpl_options//logoimg.png"></a>
    </div>
</div>

<script>
    function calculate() {
        var year = document.getElementById("year").value;
        var month = document.getElementById("month").value;
        var day = document.getElementById("day").value;

        if (!year || !month || !day) {
            alert("请选择出生年月日!");
            return;
        }

        var birth = new Date(year, parseInt(month) - 1, day);
        var today = new Date();
        var days = Math.floor((today - birth) / (1000 * 60 * 60 * 24));

        document.getElementById("result").textContent = "您从出生至今已经活了" + days + "天!";
    }

    function updateDays() {
        var year = document.getElementById("year").value;
        var month = document.getElementById("month").value;
        var day = document.getElementById("day");

        // 根据年份和月份计算日期数
        if (year && month) {
            var daysInMonth = new Date(year, parseInt(month), 0).getDate();
            day.innerHTML = "";
            for (var i = 1; i <= daysInMonth; i++) {
                var option = document.createElement("option");
                option.value = i < 10 ? "0" + i : i;
                option.text = i;
                day.add(option);
            }
        } else {
            day.innerHTML = "<option value=''></option>";
        }
    }

    // 监听年份和月份的变化
    document.getElementById("year").addEventListener("change", updateDays);
    document.getElementById("month").addEventListener("change", updateDays);
</script>
</body>
</html>

版权说明
文章采用: 《署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)》许可协议授权。
版权声明:未标注转载均为本站原创,转载时请以链接形式注明文章出处。如有侵权、不妥之处,请联系站长删除。敬请谅解!

这篇文章最后更新于2023-5-4,已超过 1 年没有更新,如果文章内容或图片资源失效,请留言反馈,我们会及时处理,谢谢!
SSL在线生成工具-免登录直接生成
« 上一篇
使用c3动画给自己网站添加一个动态闪光logo
下一篇 »
为了防止灌水评论,登录后即可评论!

HI ! 请登录
注册会员,享受下载全站资源特权。

最新文章

热门文章