日历 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style>
        .box{
            width:180px;
            height:200px;
            border:1px solid black;
            background-color: gray;
            margin:100px auto;
        }
        .box p{
            text-align:center;
            line-height:60px;  /*设置文字高度*/
            font-size:20px;
            color:pink;
        }
        .box span{
            display:block;
            width:75px;
            height:75px;
            text-align:center;
            line-height:75px;
            border:1px solid black;
            background-color: skyblue;
            margin: 0 auto;
            font-size:30px;
        }
    </style>
    <script>
        //js,上面的年月日和下方的今天的日子可以随着每天的时间而变化
        window.onload=function()
        {
            var father=document.getElementById("father");
            var kids=father.children;
            var date=new Date();
            kids[1].innerHTML=date.getDate();   //下方的盒子实时显示今天几号,今天的日子
            //kids[0].innerHTML=date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate();
            var arr=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
            kids[0].innerHTML=date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate()+arr[date.getDay()];
            //注意，date.getMonth()表示的是0--11月，所以要加1；date.getDay()显示的是0--6，正好arr数组中的礼拜几

        }
    </script>
</head>
<body>
        <!-- 一个日历盒子，上面部分是年月日，下面部分是几号-->
    <div class="box" id="father">
        <p>2019-07-18</p>
        <span>18</span>
    </div>
</body>
</html>

　　

posted @ 2019-07-19 19:12  shanlu  阅读(118)  评论(0)    收藏  举报