精华内容
下载资源
问答
  • js制作日历
    千次阅读
    2022-01-21 21:27:56

    <!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>
            * {
                margin: 0;
                padding: 0;

            }

            #calendar {
                background-color: #9900ff;
                color: #fff;
                border-radius: 5px;
                margin: 100px auto;
            }

            #title {
                font-size: 1.4em;
                padding: 4px 0.55em;
            }

            #days th {
                font-weight: bold;
                text-align: center;
                padding: 4px 0.55em;
            }

            #calendar td {
                text-align: center;
                padding: 4px 20px;
            }

            #today {
                color: #f00;
                font-weight: bold;
            }

            .poin {
                cursor: pointer;
                cursor: hand;
            }
        </style>
        <script>
            window.οnlοad=function(){
                var form = document.getElementById('calendar');
                // 通过日历对象去调用自身的init方法
                calendar.init(form);
            }
            var calendar = {
                year: null,
                month: null,
                //日的数组
                dayTable: null,
                //初始化函数
                init(form) {
                    // 1获取日数组
                   this.dayTable=form.getElementsByTagName('td');
                   //2创建日历,传入当前时间
                   this.createCalendar(form,new Date());
                   var nextMon=form.getElementsByTagName('th')[2];
                   var preMon=form.getElementsByTagName('th')[0];
                   preMon.οnclick=function(){
                    calendar.clearCalendar(form)
                       var preDate=new Date(calendar.year,calendar.month-1,1);
                       calendar.createCalendar(form,preDate)
                   }
                   nextMon.οnclick=function(){
                       calendar.clearCalendar(form)
                       var nextDate=new Date(calendar.year,calendar.month+1,1);
                       calendar.createCalendar(form,nextDate)
                   }
                },
                //清除日历数据
                clearCalendar(form){
                    var tds=form.getElementsByTagName('td');
                    for (var i = 0; i < tds.length; i++) {
                        tds[i].innerHTML='&nbsp';
                        // 清除今天的样式
                        tds[i].id='';
                    }
                },
                // 3生成日历
                // from table表格  date要创建的日期
                createCalendar(form,date){
                    //获取此时的年份
                      this.year=date.getFullYear(); 
                      //获取此时的月份
                      this.month=date.getMonth(); 

                      //年份月份写入日历
                      form.getElementsByTagName('th')[1].innerHTML = this.year+"年"+(this.month+1)+"月";
                      //获取本月的天数
                      var dataNum=this.getDateLen(this.year,this.month);
                      var fristDay = this.getFristDay(calendar.year,calendar.month);
                    // 循环将每一天的天数写入到日历中
                    // 让i表示日期。
                    for (var i = 1; i <= dataNum; i++) {
                        this.dayTable[fristDay+i-1].innerHTML=i;
                        var nowDate =new Date();
                        if(i ==nowDate.getDate() && calendar.month ==nowDate.getMonth()&&calendar.year == nowDate.getFullYear()){
                            //    将当期元素的id设置为today
                            calendar.dayTable[i+fristDay-1].id = "today";
                       }
                    }
                },
                 // 获取本月份的天数
                 getDateLen(year,month){
                    //获取下个月的第一天
                    var nextMonth=new Date(year,month+1,1);
                    // 设置下月第一天的小时-1,也就是上个月最后一天的小时数,随便减去一个值不要超过24小时
                    nextMonth.setHours(nextMonth.getHours()-1);
                    //获取此时下个月的日期,就是上个月最后一天.
                    return nextMonth.getDate();
                 },
                  // 获取本月第一天为星期几。
                getFristDay:function(year,month){
                    var fristDay=new Date(year,month,1);
                    return fristDay.getDay();
                }
            } 
        </script>
    </head>

    <body>
        <table id="calendar">
            <tr>
                <!-- 向左箭头 -->
                <th class="poin">&lt;&lt;</th>
                <!-- 年月 -->
                <th id="title" colspan="5"></th>
                <!-- 向右箭头 -->
                <th class="poin">&gt;&gt;</th>
            </tr>
            <tr id="days">
                <th>日</th>
                <th>一</th>

                <th>二</th>
                <th>三</th>
                <th>四</th>
                <th>五</th>
                <th>六</th>
            </tr>
            <tr>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
            <tr>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
            <tr>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
            <tr>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
            <tr>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
            <tr>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
        </table>

    </body>

    </html>

    更多相关内容
  • 这个是最初版的,再往后打算做出纯javascript版的,再往后打算用JQuery做一套。 <!doctype html> <html> <head> <meta charset=utf-8> <title>日历控件</title> <style> #...
  • 主要为大家详细介绍了原生js制作日历控件的具体代码,一个日历控件实例,原生js开发,感兴趣的小伙伴们可以参考一下
  • JavaScript制作日历

    千次阅读 热门讨论 2021-03-06 11:16:19
    } }, // 3生成日历 // from table表格 date要创建的日期 createCalendar(form,date){ //获取此时的年份 this.year=date.getFullYear(); //获取此时的月份 this.month=date.getMonth(); //年份月份写入日历 form....

    效果图在这里插入图片描述

    代码

    <!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>
            * {
                margin: 0;
                padding: 0;
    
            }
    
            #calendar {
                background-color: #9900ff;
                color: #fff;
                border-radius: 5px;
                margin: 100px auto;
            }
    
            #title {
                font-size: 1.4em;
                padding: 4px 0.55em;
            }
    
            #days th {
                font-weight: bold;
                text-align: center;
                padding: 4px 0.55em;
            }
    
            #calendar td {
                text-align: center;
                padding: 4px 20px;
            }
    
            #today {
                color: #f00;
                font-weight: bold;
            }
    
            .poin {
                cursor: pointer;
                cursor: hand;
            }
        </style>
        <script>
            window.onload=function(){
                var form = document.getElementById('calendar');
                // 通过日历对象去调用自身的init方法
                calendar.init(form);
            }
            var calendar = {
                year: null,
                month: null,
                //日的数组
                dayTable: null,
                //初始化函数
                init(form) {
                    // 1获取日数组
                   this.dayTable=form.getElementsByTagName('td');
                   //2创建日历,传入当前时间
                   this.createCalendar(form,new Date());
                   var nextMon=form.getElementsByTagName('th')[2];
                   var preMon=form.getElementsByTagName('th')[0];
                   preMon.onclick=function(){
                    calendar.clearCalendar(form)
                       var preDate=new Date(calendar.year,calendar.month-1,1);
                       calendar.createCalendar(form,preDate)
                   }
                   nextMon.onclick=function(){
                       calendar.clearCalendar(form)
                       var nextDate=new Date(calendar.year,calendar.month+1,1);
                       calendar.createCalendar(form,nextDate)
                   }
                },
                //清除日历数据
                clearCalendar(form){
                    var tds=form.getElementsByTagName('td');
                    for (var i = 0; i < tds.length; i++) {
                        tds[i].innerHTML='&nbsp';
                        // 清除今天的样式
                        tds[i].id='';
                    }
                },
                // 3生成日历
                // from table表格  date要创建的日期
                createCalendar(form,date){
                    //获取此时的年份
                      this.year=date.getFullYear(); 
                      //获取此时的月份
                      this.month=date.getMonth(); 
    
                      //年份月份写入日历
                      form.getElementsByTagName('th')[1].innerHTML = this.year+"年"+(this.month+1)+"月";
                      //获取本月的天数
                      var dataNum=this.getDateLen(this.year,this.month);
                      var fristDay = this.getFristDay(calendar.year,calendar.month);
                    // 循环将每一天的天数写入到日历中
                    // 让i表示日期。
                    for (var i = 1; i <= dataNum; i++) {
                        this.dayTable[fristDay+i-1].innerHTML=i;
                        var nowDate =new Date();
                        if(i ==nowDate.getDate() && calendar.month ==nowDate.getMonth()&&calendar.year == nowDate.getFullYear()){
                            //    将当期元素的id设置为today
                            calendar.dayTable[i+fristDay-1].id = "today";
                       }
                    }
                },
                 // 获取本月份的天数
                 getDateLen(year,month){
                    //获取下个月的第一天
                    var nextMonth=new Date(year,month+1,1);
                    // 设置下月第一天的小时-1,也就是上个月最后一天的小时数,随便减去一个值不要超过24小时
                    nextMonth.setHours(nextMonth.getHours()-1);
                    //获取此时下个月的日期,就是上个月最后一天.
                    return nextMonth.getDate();
                 },
                  // 获取本月第一天为星期几。
                getFristDay:function(year,month){
                    var fristDay=new Date(year,month,1);
                    return fristDay.getDay();
                }
            } 
        </script>
    </head>
    
    <body>
        <table id="calendar">
            <tr>
                <!-- 向左箭头 -->
                <th class="poin">&lt;&lt;</th>
                <!-- 年月 -->
                <th id="title" colspan="5"></th>
                <!-- 向右箭头 -->
                <th class="poin">&gt;&gt;</th>
            </tr>
            <tr id="days">
                <th></th>
                <th></th>
    
                <th></th>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
            </tr>
            <tr>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
            <tr>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
            <tr>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
            <tr>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
            <tr>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
            <tr>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
        </table>
    
    </body>
    
    </html>
    
    展开全文
  • javaScript制作日历

    千次阅读 2018-02-08 23:01:24
    z 这是我做出来的最终效果,界面比较简单,以后有时间会稍作修改,把界面和功能做得更加完善。...日历&lt;/title&gt; &lt;style type="text/css"&gt; #div1{ width:425px; he

    z

     这是我做出来的最终效果,界面比较简单,以后有时间会稍作修改,把界面和功能做得更加完善。

    html+css代码如下:

    <!DOCTYPE html>
    <html>
    <head>
    	<title>日历</title>
    	<style type="text/css">
    		#div1{
    			width:425px;
    			height:420px;
    			border:1px solid gray;
    		}
    		#div2{
    			width: 390px;
    			height: 390px;
    			margin:auto;
    			margin-top: 15px;
    		}
    		#div21{
    			width: 220px;
    			height: 72px;
    			margin:auto;
    			line-height: 72px; 
    			margin:auto;
    		}
    		#div22{
    			width: 355px;
    			height: 310px;
    			margin:auto;
    		}
    		#table1{
    			width: 355px;
    			height: 30px;
    			border-spacing: 30px 33px;
    		}
    		#table2{
    			width: 355px;
    			height: 30px;
    			line-height: 30px;
    			border-spacing: 30px 0px;
    		}
    	</style>
    	
    </head>
    <body>
    <div id="div1">
    	<div id="div2">
    		<div id="div21">
    		<button οnclick="lastMon()">上一月</button>
    		<text id="yearAndMon"></text>
    		<button οnclick="nextMon()">下一月</button>	
    		</div>
    		<div id="div22">
    			<table id="table2">
    				<tr>
    					<td>日</td>
    					<td>一</td>
    					<td>二</td>
    					<td>三</td>
    					<td>四</td>
    					<td>五</td>
    					<td>六</td>
    				</tr>
    			</table>
    			<table id="table1"></table>
    		</div>
    	</div>
    </div>
    <script type="text/javascript" src="rili.js"></script>
    </body>
    </html>

    js代码如下:

        var nowDate=new Date();
    	var nowYear=nowDate.getFullYear();
    	var nowMonth=nowDate.getMonth()+1;
    	//var month=(nowMonth<10?"0"+momth:month);
    	var text=document.getElementById("yearAndMon");
    	text.innerText=nowYear+"年"+nowMonth+"月";
    	var monthDays1=[31,29,31,30,31,30,31,31,30,31,30,31]; 
    	var monthDays2=[31,28,31,30,31,30,31,31,30,31,30,31]
    function becomeDate(nowYear,nowMonth){
    	var dt=new Date(nowYear,nowMonth-1,1);
    	var firstDay=dt.getDay();
    	var table=document.getElementById("table1");
    	var monthDays=isRunNian();
    	var rows=5;
    	var cols=7;
    	var k=1;
    	for(var i=1;i<=rows;i++){
    		var tri=table.insertRow();
    		for(var j=1;j<=7;j++){
    			var tdi=tri.insertCell();
    			if(i==1&&i*j<firstDay+1)
    				tdi.innerHTML="";
    			else{
    			if(k>monthDays[nowMonth-1])
    				break;
    			tdi.innerHTML=k;
    			k++;
    		}
    			}
    
    		}
    }
    
    function lastMon(){
    	table1.innerHTML="";
    	var text=document.getElementById("yearAndMon");
    	if(nowMonth>1)
    		nowMonth=nowMonth-1;
    	else{
    		nowYear--;
    		nowMonth=12;
    	}
    	text.innerText=nowYear+"年"+nowMonth+"月";
    	becomeDate(nowYear,nowMonth);
    }
    
    function nextMon(){
    	table1.innerHTML="";
    	if(nowMonth<12)
    		nowMonth=nowMonth+1;
    	else{
    		nowYear++;
    		nowMonth=1;
    	}
    		var text=document.getElementById("yearAndMon");
    		text.innerText=nowYear+"年"+nowMonth+"月";
    		becomeDate(nowYear,nowMonth);
    }
    
    function isRunNian(){
    	if((nowYear%4==0||nowYear%400==0)&&nowYear%100!=0)
    		return monthDays1;
    	else
    		return monthDays2;
    }
    becomeDate(nowYear,nowMonth);

    代码还有很多不足之处,大家可以提出改进的意见。





    展开全文
  • 用原生js制作日历 1,先在html内容写好日历的样式框架 <div class="container"> <header> <div class="left">上个月</div> <div class="center"></div> ...

                                                        用原生js制作日历

     

          1,先在html内容写好日历的样式框架

     <div class="container">
            <header>
                <div class="left">上个月</div>
                <div class="center"></div>
                <div class="right">下个月</div>
            </header>
            <div class="weakend">
                <ul>
                    <li>周日</li>
                    <li>周一</li>
                    <li>周二</li>
                    <li>周三</li>
                    <li>周四</li>
                    <li>周五</li>
                    <li>周六</li>
                </ul>
            </div>
           <div class="month">
    
           </div>
        </div>

    month部分用js动态生成

            let left = document.querySelector('.left');
                let center = document.querySelector('.center');
                let right = document.querySelector('.right');
                let ulmonth = document.querySelector('.month');

    先获取到需要操作的Dom元素

         // 获取当前时间
                let nowDate = new Date();
                // 得到当前的年份
            let year = nowDate.getFullYear(); 
            // 得到当前的月份
            let mm = nowDate.getMonth()+1;
                // 将当前时间赋值给点击要操作的时间
                let currentDate = nowDate;

    定义一个方法判断是否为闰年

     function  isLeepYear(year){
                if(year%4===0&&year%100!==0||year%400===0){
                    return true;
                }
                return false;
            }

    定义一个方法判断当前月一共有多少天

       // 判断当前查看的这一个月一共有多少天
            function MonthAllDay(year,month){
                switch (month) {
                    case 1:case 3: case 5: case 7: case 8: case 10: case 12:
                        return 31;
                        break;
                    case 4: case 6: case 9: case 11:
                        return 30;
                        break;
                    default:
                        if(isLeepYear(year)){
                            return 29;
                        }
                        return 28;
                        break;
                }
            }

    定义一个方法得到当前月份的第一天

       // 得到当前月的第一天
          function getMonthOne(year,month){ 
           let currentDate = new Date(year,month-1,1);
            let day = currentDate.getDay();
            return day;
          }

    根据上面对的方法,定义一个showDate()方法将日历添加到网页上

       // 根据当前传过来的时间绘制日历
          function showDate(currentDate){
              let strli = ''
            let year = currentDate.getFullYear();
            let mm = currentDate.getMonth()+1;
            let allDay = MonthAllDay(year,mm);
            let day = getMonthOne(year,mm);
            let ul = document.createElement('ul');
            for(let i=1;i<=day;i++){
                let li = document.createElement('li');
                ul.append(li);
            }
            for(let i=1;i<=allDay;i++){
                let li = document.createElement('li');
                ul.append(li);
                li.innerText = i;
            }
           ulmonth.innerHTML = ''
            ulmonth.append(ul);
            center.innerText = `${year}年${mm}月`
          }

    当点击上一个月时,将月份减一,调用showDate函数,得到上一个月的日历添加到网页中

     left.addEventListener('click',function(){
            let year = currentDate.getFullYear();
            let mm = currentDate.getMonth();
            let dd = currentDate.getDate();
                mm--;
                console.log(mm,dd);
             currentDate = new Date(year,mm,dd);
            showDate(currentDate);
           })

    但点击下一个月时,将月份加一,调用showDate函数,得到下一个月的日记重构到网页上

     right.addEventListener('click',function(){
            let year = currentDate.getFullYear();
            let mm = currentDate.getMonth()+1;
            let dd = currentDate.getDate();
             currentDate = new Date(year,mm,dd);
            showDate(currentDate);
           })
    

    这里一点,当月份小于1时,得到是时间会是上一年的十二月份,当月份大于12时,得到的时间会是下一年的一月份,所里这里我们可以不需要在月份的边界值做越界判断了。

    最后,一个简单的原生js小日历就做出来啦!

    展开全文
  • js制作简单的日历

    千次阅读 2020-12-10 11:51:40
    自己闲暇时用js写了一个比较简单的日历, 给大家分享下 一、下面是完整代码 代码如下(示例): <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" ...
  • 用原生js制作日历

    千次阅读 2018-06-14 10:46:27
    (文采一塌糊涂就写到这吧^_^)下面说一说日历日历制作主要应用了js的Date对象(不太了解的可以去查阅一下),其中有个重要知识点就是新建new Date()使时,把日子设为0;例如 var myDate=new Date(2018.7.0)...
  • 主要为大家介绍了JavaScript制作简单的日历效果实现代码,感兴趣的小伙伴们可以参考一下
  • JS制作日历

    2018-04-08 17:55:12
    &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&...text
  • 主要为大家详细介绍了js html制作简单日历的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • js日历制作

    2019-11-21 11:47:51
    代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <...
  • 用html+css+javascript制作日历

    千次阅读 2018-02-10 23:29:00
    这是做好后的效果。不是很美观,还可以进一步完善。  html+css代码如下: <!DOCTYPE html>...日历</title> <style type="text/css"> #div1{ width:425px; height...
  • JavaScript编写日历(简单易懂,代码可以直接运行) 运行效果图如下: 点个????吧,代码如下: 首先是日历代码是HTML文件: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &...
  • JavaScript实现日历效果

    2013-04-09 19:26:00
    JavaScript实现挂历效果;内容都在js文件中;直接复制就可使用
  • 思路: 效果: <html> <head> <style> * { box-sizing: border-box; } .calendar { width: 300px; border: 1px solid #eee } .calenda...
  • javascript 制作日历

    2007-12-18 15:16:00
     <script language="javascript" type="text/javascript">  //定义一个数组,存放每个月的天数  var monthDays=new Array(31,28,31,30,31,30,31,31,30,31,30,31);  //闰年,则二月份的天数未29天  var today=new ...
  • 2、设计一个注册页面,使用js日历控件帮助用户输入出生日期。效果如图所示: 学习项目一 Calendar日历控件 1、在站点下创建一个Calendar页面,并在页面上拖放一个TextBox控件用来输入日期,一个Calendar1日历控件...
  • js移动端日历签到页面代码.zip日历制作,每天只能签到一次
  • 利用MomentJS 绘制日历

    2020-12-03 23:57:33
      最近因为工作原因,需要按照日历形式展示某功能数据,又遇到前端同事不给力(至于原因嘛,大家都懂得,不在多说),只好自己动手了,毕竟毛主席都说过:自己动手,丰衣足食。废话不多说,先上图耍耍。 页面源码:...
  • 主要介绍了javascript html实现网页版日历代码,需要的朋友可以参考下
  • <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" ...meta name="Description" content
  • 本文实例讲述了js制作简易年历的方法。分享给大家供大家参考。具体如下: 今天学习了一下用js来实现年历的制作,顺便复习了一下this的用法,跟选项卡的制作有点差别,新用到了innerHTML,希望自己坚持下去,各位js...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 6,498
精华内容 2,599
关键字:

js制作日历