js做的一个日历

程序员文章站 2022-03-03 22:44:49
...
js做的一个日历

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>日历</title>
    <style>

        section {
            margin: 60px auto;
            width: 300px;
            height: 300px;
            border: 1px solid black;
            /*padding: 10px;*/
            font-size: 16px;
        }

        .padding-1{
            padding: 3px;
        }

        .padding-2{
            padding: 10px;
        }
        .d-flex {
            display: flex;
        }

        .just-betww {
            justify-content: space-between;
        }
        .just-round {
            justify-content: space-around;
        }
        .align-items-centen {
            align-items: center;
        }

        .text-center {
            text-align: center;
        }

        .background-ccc {
            background: #cccccc;
        }

        .border-1{
            border: 1px solid black;
        }

        .curos {
            cursor:pointer ;
        }

        .mix{
            width: 26px;
            height: 26px;
            margin: 5px 4px 4px 7px;
            border: 1px solid rgba(255,0,0,0);
        }
        .mix:hover{
            border: 1px solid red;
        }
        .flex-wrap {
            flex-wrap: wrap;
        }

        .visiti-hid{
            visibility: hidden;
        }
        .visiti-vi{
            visibility: visible;
        }
        .dis-none {
            display: none;
        }

        .day-bg{
            background: peru;
        }

    </style>
</head>
<body>
    <section>
        <div class="d-flex just-betww padding-1">
            <div class="curos" onclick=aboveMoth()>上一月</div>
            <div><span id="myYear">2021</span></div>
            <div class="curos" onclick=nextMoth()>下一月</div>
        </div>
        <div class="text-center"><span id="myMoth">九月</span></div>
        <div class="background-ccc text-center d-flex just-round">
            <span>日</span>
            <span>一</span>
            <span>二</span>
            <span>三</span>
            <span>四</span>
            <span>五</span>
            <span>六</span>
        </div>
        <div class="padding-1 d-flex  flex-wrap just-round text-center">


            <div class="mix visiti-hid curos" id="0"><span></span></div>
            <div class="mix visiti-hid curos" id="1"><span></span></div>
            <div class="mix visiti-hid curos" id="2"><span></span></div>
            <div class="mix visiti-hid curos" id="3"><span></span></div>
            <div class="mix visiti-hid curos" id="4"><span></span></div>
            <div class="mix visiti-hid curos" id="5"><span></span></div>
            <div class="mix visiti-hid curos" id="6"><span></span></div>
            <div class="mix visiti-hid curos" id="7"><span></span></div>
            <div class="mix visiti-hid curos" id="8"><span></span></div>
            <div class="mix visiti-hid curos" id="9"><span></span></div>
            <div class="mix visiti-hid curos" id="10"><span></span></div>
            <div class="mix visiti-hid curos" id="11"><span></span></div>
            <div class="mix visiti-hid curos" id="12"><span></span></div>
            <div class="mix visiti-hid curos" id="13"><span></span></div>
            <div class="mix visiti-hid curos" id="14"><span></span></div>
            <div class="mix visiti-hid curos" id="15"><span></span></div>
            <div class="mix visiti-hid curos" id="16"><span></span></div>
            <div class="mix visiti-hid curos" id="17"><span></span></div>
            <div class="mix visiti-hid curos" id="18"><span></span></div>
            <div class="mix visiti-hid curos" id="19"><span></span></div>
            <div class="mix visiti-hid curos" id="20"><span></span></div>
            <div class="mix visiti-hid curos" id="21"><span></span></div>
            <div class="mix visiti-hid curos" id="22"><span></span></div>
            <div class="mix visiti-hid curos" id="23"><span></span></div>
            <div class="mix visiti-hid curos" id="24"><span></span></div>
            <div class="mix visiti-hid curos" id="25"><span></span></div>
            <div class="mix visiti-hid curos" id="26"><span></span></div>
            <div class="mix visiti-hid curos" id="27"><span></span></div>
            <div class="mix visiti-hid curos" id="28"><span></span></div>
            <div class="mix visiti-hid curos" id="29"><span></span></div>
            <div class="mix visiti-hid curos" id="30"><span></span></div>
            <div class="mix visiti-hid curos" id="31"><span></span></div>
            <div class="mix visiti-hid curos" id="32"><span></span></div>
            <div class="mix visiti-hid curos" id="33"><span></span></div>
            <div class="mix visiti-hid curos" id="34"><span></span></div>
            <div class="mix visiti-hid curos" id="35"><span></span></div>
            <div class="mix visiti-hid curos" id="36"><span></span></div>
            <div class="mix visiti-hid curos" id="37"><span></span></div>
            <div class="mix visiti-hid curos" id="38"><span></span></div>
            <div class="mix visiti-hid curos" id="39"><span></span></div>
            <div class="mix visiti-hid curos" id="40"><span></span></div>
            <div class="mix visiti-hid curos" id="41"><span></span></div>
        </div>
    </section>

    <script>
        var myMoth=['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'];

        var myDate = new Date();
        var year =myDate.getFullYear();
        var moth = myDate.getMonth();
        var myDay = myDate.getDate();
        // console.log(myDay);
        // console.log(moth);

        giveFirst();


        function giveFirst(){
            var firstDate = new Date();
            var year =firstDate.getFullYear();
            var moth = firstDate.getMonth();
            // console.log(firstDate);

            document.getElementById('myYear').innerHTML=year;
            document.getElementById('myMoth').innerHTML=myMoth[moth];

            firstDate.setDate(1);
            var firstWeek=firstDate.getDay();

            firstDate.setMonth(firstDate.getMonth()+1);

            var last=new Date(firstDate-3600000*24);
            var lastDay=last.getDate();
            var weekDay=firstWeek;

            var myD= document.getElementById(''+(myDay+firstWeek-1));
            myD.style.background="peru";

            for (var i=1;i<=lastDay;i++){
                document.getElementById(''+weekDay).firstElementChild.innerHTML=i;
                var myEle= document.getElementById(''+weekDay);
                myEle.style.visibility="visible";
                weekDay++;
            }
        }


        function table(year,moth){


            var dateTemp= new Date(year,moth,0);
            var lastDay = dateTemp.getDate();

            // dateTemp.setDate(myDay);
            // myDay= dateTemp.getDate();


            // console.log(myDay);
            var myD= document.getElementById(''+myDay);
            myD.style.background="peru";

                 dateTemp.setDate(1);
            var firstWeek=dateTemp.getDay();

            // var flag=0;

            div1= document.getElementsByClassName('visiti-hid');

            for (var j=0;j<42;j++)
            {
                div1[j].style.visibility="hidden";
                div1[j].style.background = "none";
                // flag=0;
            }

            var weekDay=firstWeek;
            var myD= document.getElementById(''+(myDay+firstWeek-1));
            myD.style.background="peru";

            for (var i=1;i<=lastDay;i++){
                document.getElementById(''+weekDay).firstElementChild.innerHTML=i;
                var myEle= document.getElementById(''+weekDay);
                myEle.style.visibility="visible";
                weekDay++;
                // console.log(lastDay);
            }



        }



        function aboveMoth()
        {
            myDate.setMonth(myDate.getMonth()-1);
            moth=myDate.getMonth();
            year =myDate.getFullYear();
            document.getElementById('myMoth').innerHTML=myMoth[moth];
            document.getElementById('myYear').innerHTML=year;
            mothTemp=moth+1;

            table(year,mothTemp);


            // console.log('上一月');
            // console.log(moth);
            // console.log(year);

        }


        function nextMoth()
        {
            myDate.setMonth(myDate.getMonth()+1);
            moth=myDate.getMonth();
            year =myDate.getFullYear();

            document.getElementById('myMoth').innerHTML=myMoth[moth];
            document.getElementById('myYear').innerHTML=year;
            mothTemp=moth+1;

            table(year,mothTemp);
            // console.log(moth);
            // console.log('下一月')
        }




        // document.getElementById(''+firstWeek).innerHTML = '1';

    </script>

</body>
</html>
上一篇：跑了和尚跑不了庙，中午就把你炖吃了
下一篇：初识 mysql 数据库
js做的一个日历

一个简单的Node.js异步操作管理器分享_javascript技巧

利用js编写一个简单的html表单验证，验证通过时提交数据(附源码)

如果你有一个代码出有关问题就把有关问题退给你的领导你该如何做

为何js文件后面加一个参数？这样就会自动刷新本地js文件的缓存了么？_html/css_WEB-ITnose

详解node.js创建一个web服务器(Server)的详细步骤

做自己学校的论坛，组建一个三人团队，该如何选择队友？

JS实现求出一个字符串中最多出现的字符和个数_javascript技巧

看到一个JS正则的题

原生js做的手风琴效果的导航菜单_javascript技巧

一个js写的日历（代码部分网摘）_时间日期
