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"><<</th>

<th id="title" colspan="5"></th>

<th class="poin">>></th>
</tr>
<tr id="days">
<th>日</th>
<th>一</th>

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

</body>

</html>

java webview android

更多相关内容
纯javascript制作日历控件
2021-01-19 16:50:44

这个是最初版的，再往后打算做出纯javascript版的，再往后打算用JQuery做一套。 <!doctype html> <html> <head> <meta charset=utf-8> <title>日历控件</title> <style> #...

收起
原生js制作日历控件实例分享
2020-10-22 14:21:36

主要为大家详细介绍了原生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 这是我做出来的最终效果，界面比较简单，以后有时间会稍作修改，把界面和功能做得更加完善。...日历</title> <style type="text/css"> #div1{ width:425px; he

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

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);

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

收起

展开全文

前端

用原生javascript制作日历

2021-04-15 15:06:56

用原生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小日历就做出来啦！

收起

展开全文

css

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制作简单的日历效果
2020-10-22 17:28:06

主要为大家介绍了JavaScript制作简单的日历效果实现代码，感兴趣的小伙伴们可以参考一下

收起
JS制作日历
2018-04-08 17:55:12

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title&...text

收起
js+html制作简单日历的方法
2020-10-19 15:05:25

主要为大家详细介绍了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编写日历（简单易懂，代码可以直接运行）
2021-09-26 12:49:18

JavaScript编写日历（简单易懂，代码可以直接运行）运行效果图如下：点个????吧，代码如下：首先是日历代码是HTML文件： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &...

收起
JavaScript实现日历效果
2013-04-09 19:26:00

JavaScript实现挂历效果；内容都在js文件中；直接复制就可使用

收起
原生javascript-日历的制作
2020-10-26 14:35:04

思路：效果： <html> <head> <style> * { box-sizing: border-box; } .calendar { width: 300px; border: 1px solid #eee } .calenda...

收起

css html
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 ...

收起

border table xhtml html
ASP.NET中日历控件和JS版日历控件的使用方法（第5节）
2021-01-20 08:20:11

2、设计一个注册页面，使用js日历控件帮助用户输入出生日期。效果如图所示：学习项目一 Calendar日历控件 1、在站点下创建一个Calendar页面，并在页面上拖放一个TextBox控件用来输入日期，一个Calendar1日历控件...

收起
js移动端日历签到页面代码.rar
2019-06-13 11:39:10

js移动端日历签到页面代码.zip日历制作，每天只能签到一次

收起
利用MomentJS 绘制日历
2020-12-03 23:57:33

最近因为工作原因，需要按照日历形式展示某功能数据，又遇到前端同事不给力(至于原因嘛，大家都懂得，不在多说)，只好自己动手了，毕竟毛主席都说过：自己动手，丰衣足食。废话不多说，先上图耍耍。页面源码:...

收起
javascript html实现网页版日历代码
2020-10-22 18:09:14

主要介绍了javascript html实现网页版日历代码,需要的朋友可以参考下

收起
用js写日历，并获取点击得时间
2021-02-03 11:17:59

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" ...meta name="Description" content

收起

css
js制作简易年历完整实例
2020-12-10 09:26:47

本文实例讲述了js制作简易年历的方法。分享给大家供大家参考。具体如下：今天学习了一下用js来实现年历的制作，顺便复习了一下this的用法，跟选项卡的制作有点差别，新用到了innerHTML，希望自己坚持下去，各位js...

收起

纯javascript制作日历控件

原生js制作日历控件实例分享

JavaScript制作日历

效果图

代码

用javaScript制作日历

用原生javascript制作日历

用原生js制作日历

js制作简单的日历

用原生js制作日历

JavaScript制作简单的日历效果

JS制作日历

js+html制作简单日历的方法

js日历制作

用html+css+javascript制作日历

JavaScript编写日历（简单易懂，代码可以直接运行）

JavaScript实现日历效果

原生javascript-日历的制作

javascript 制作日历

ASP.NET中日历控件和JS版日历控件的使用方法（第5节）

js移动端日历签到页面代码.rar

利用MomentJS 绘制日历

javascript html实现网页版日历代码

用js写日历，并获取点击得时间

js制作简易年历完整实例

js制作日历