HTML实例——模拟日历

最新推荐文章于 2021-08-06 11:22:08 发布

Code进阶狼人

最新推荐文章于 2021-08-06 11:22:08 发布

阅读量880

点赞数

分类专栏： web前端文章标签： html css javascript

本文链接：https://blog.csdn.net/liuzuoping/article/details/103715753

版权

web前端专栏收录该内容

19 篇文章 1 订阅

订阅专栏

今天我们用HTML+CSS+JS来实现一个模拟日历

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            width: 800px;
            margin: 200px auto;
            color: red;
            text-align: center;
            font: 600 30px/30px "simsun";
        }
    </style>
</head>
<body>
    <div></div>

    <script>
        //模拟日历
        //需求：每天打开这个页面都能定时显示年月日和星期几

        //1.创建一个当前日期的日期对象
        var date = new Date();
        //2.然后获取其中的年、月、日和星期
        var year = date.getFullYear();
        var month = date.getMonth();
        var hao = date.getDate();
        var week = date.getDay();
//        console.log(year+" "+month+" "+hao+" "+week);
        //3.赋值给div
        var arr = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
        var div = document.getElementsByTagName("div")[0];
        div.innerText = "今天是："+year+"年"+(month+1)+"月"+hao+"日 "+arr[week];

    </script>

</body>
</html>