CSS+JS 日历和时钟

最新推荐文章于 2023-04-25 15:16:16 发布

想赢的毛毛

最新推荐文章于 2023-04-25 15:16:16 发布

阅读量253

点赞数

分类专栏： js html 文章标签： web javascript

本文链接：https://blog.csdn.net/weixin_47602222/article/details/118925954

版权

js 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

html

1 篇文章 0 订阅

订阅专栏

突然发现代码这个东西学会了是真简单，学不会是真头秃。

直接上代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
    .calendar{    /*日历的大框架*/
        width: 200px;
        height: 200px;
        border-radius: 10px;
        text-align: center;
    }
    #yearMonth{    /*年月的格式*/
        width: 200px;
        line-height: 50px;
        float: center;
        color: #000;
        font-size: 20px;
        background-color: rgb(185, 182, 236);
        border-radius: 10px 10px 0 0;
    }
    #days{     /*天的格式*/
        width: 200px;
        line-height: 100px;
        float: center;
        background-color: rgb(223, 235, 229);
        color: rgb(29, 112, 57);
        font-size: 70px;
    }
    #weeks{      /*周的格式*/
        width: 200px;
        line-height: 50px;
        float: center;
        font-size: 20px;
        background-color: rgb(185, 182, 236);
        border-radius: 0 0 10px 10px;
    }
    #times{     /*时分秒的格式*/
        width: 200px;
        height: auto;
        color: darkblue;
        margin: 20px;
        font-size: 40px;
        float: center;
    }
    </style>
     <script type="text/javascript">
        window.onload=function(){
            window.requestAnimationFrame(getDate);
        }
        function getDate()
			{
				window.setTimeout(function(){
					window.requestAnimationFrame(getDate)
				},1000/2)
            var date=new Date();
            var year=date.getFullYear();  //获取当前年份
            var month=date.getMonth()+1;  //获取当前月份
            var day=date.getDate();       //获取当前月份
            var week = date.getDay();     //获取当前星期
            switch(week){    //星期的格式
                case 0:
                    week = "星期日";
                    break;
                case 1:
                    week = "星期一";
                    break;
                case 2:
                    week = "星期二";
                    break;
                case 3:
                    week = "星期三";
                    break;
                case 4:
                    week = "星期四";
                    break;
                case 5:
                    week = "星期五";
                    break;
                default:
                    week = "星期六";
            }
            var hour=date.getHours();        //获取当前小时
            var minute=date.getMinutes();    //获取当前分钟
            var second=date.getSeconds();    //获取当前秒

            if(month<10) month="0"+month;     //文本小于10的时候在文本前加上0
			if(hour<10) hour="0"+hour;
			if(minute<10) minute="0"+minute;
			if(second<10) second="0"+second;

            var yearMona=document.getElementById("yearMonth");    //年月加入样式
            var yearMon=year+"年"+month+"月";
            yearMona.innerHTML=yearMon;

            var day1=document.getElementById("days");      //日加入样式
            day1.innerHTML=day;

            var week1=document.getElementById("weeks");    //星期加入样式
            week1.innerHTML=week;

            var time1=document.getElementById("times");    //时分秒加入样式
            var time=hour+":"+minute+":"+second;
            time1.innerHTML=time;
        }
    </script>
</head>
<body>
    <div class="calendar">
        <div id="yearMonth"></div>
        <div id="days"></div>
        <div id="weeks"></div>
    </div>
    <div id="times"></div>
</body>
</html>

效果图：

颜色大小字体啥的可以自己改改。

想赢的毛毛

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS+JS 日历和时钟

突然发现代码这个东西学会了是真简单，学不会是真头秃。直接上代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initia
复制链接

扫一扫