js写一个日期

最新推荐文章于 2022-10-30 08:47:13 发布

nbin斌

最新推荐文章于 2022-10-30 08:47:13 发布

阅读量885

点赞数

分类专栏： javascript 文章标签： js 日期效果 js效果

本文链接：https://blog.csdn.net/nbin2008/article/details/48880957

版权

javascript 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

效果图

http://www.hui12.com/nbin/csdn/jsDate/demo.html

https://nbin2008.github.io/demo/jsDate/index.html

日期上面都添加了自定义属性，方便追加时间

html部分，使用说明

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>js日期试玩</title>
		<style type="text/css">
			*{ margin: 0; padding: 0; }
			.box{ width: 350px; margin: 50px auto 0; }
			.box>div>div{ width: 50px; height: 50px; float: left; text-align: center; line-height: 50px; }
			.siblings{ color:#ccc; }
		</style>
		<script src="jquery-2.0.3.js"></script>
		<script src="date.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				function createDiv(){
					var i = 0;
					var arr = ["日","一","二","三","四","五","六"];
					for( i=0; i<7; i++ ){
						$(".week").append("<div>"+ arr[i] +"</div>")
					}
					for( i=0; i<42; i++ ){
						$(".date").append("<div></div>")
					}
				}
				
				createDiv()
				var a = new DateWeek($(".date"));
				a.setDate(2015,9).setDate(2015,9);
				
				/*
				 * 需要42个元素用于显示日期，外围有一个父级$obj,JQ对象
				 * 调用需要传入父级元素,设置日期用	setDate(年，月)方法
				 * siblings类为上下月
				 * 按钮没有，需要啥样式自己写，事件给直接给setDate传参即可
				 */
			});
		</script>
	</head>
	<body>
		<div class="box">
			<div class="week"></div>
			<div class="date"></div>
		</div>
	</body>
</html>

js部分

(function(window,$){
	var proto = {
		getDay: function(y, m) {
			var mday = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
			if ((y % 4 == 0 && y % 100 != 0) || y % 400 == 0) //判断是否是闰月 
				mday[1] = 29;
			return mday[m - 1];
		},
		getWeek: function(y, m, d) {
			var wk;
			if (m <= 12 && m >= 1) {
				for (var i = 1; i < m; ++i) {
					d += this.getDay(y, i);
				}
			}
			/*根据日期计算星期的公式*/
			wk = (y - 1 + (y - 1) / 4 - (y - 1) / 100 + (y - 1) / 400 + d) % 7;
			//0对应星期天，1对应星期一 
			return parseInt(wk);
		},
		getName: function(year,month,day){
			return year + "-" + month + "-" + day;
		},
		getLast: function(y,m){
			if( m-1 == 0){
				return {
					y: y-1,
					m: 12,
					d: this.getDay(y-1, 12)
				};
			}else{
				return {
					y: y,
					m: m-1,
					d: this.getDay(y, m-1)
				};
			}
		},
		getNext: function(y,m){
			if( m+1 > 12 ){
				return {
					y: y+1,
					m: 1,
					d: this.getDay(y+1, 1)
				};
			}else{
				return {
					y: y,
					m: m+1,
					d: this.getDay(y, m+1)
				};
			};
		},
		setDay: function(name,day,index,siblings){
			var $div = this.$obj.find("div");
			$div.eq(index).text(day).attr("name",name);
			siblings && $div.eq(index).addClass("siblings");
		},
		clearDiv: function(){
			var $div = this.$obj.find("div");
			$div.removeAttr("name").removeClass().text('');
		},
		setDate: function(year, month){
			this.clearDiv();
			var $div = this.$obj.find("div");
			var dayNumber = this.getDay(year, month);
			var firstNumber = this.getWeek(year,month,1);
			var lastNumber = this.getWeek(year,month,dayNumber);
			var weekNumber = (dayNumber - (7 - (firstNumber==0?7:firstNumber) ) - (lastNumber + 1)) / 7;
			var day = 1;
			var index = 0;
			var name;
			var last = this.getLast(year, month);
			var lastDay = last.d - firstNumber + 1;
			for( var i=0; i<firstNumber; i++ ){
				name = this.getName(last.y, last.m, lastDay);
				this.setDay(name,lastDay,index,1);
				lastDay++;
				index++;
			};
			if( firstNumber == 0 ){
				lastDay = last.d - 7 + 1;
				for( var i=0; i<7; i++ ){
					name = this.getName(last.y, last.m, lastDay);
					this.setDay(name,lastDay,index,1);
					lastDay++;
					index++;
				};
				weekNumber--;
			};
			for( i= firstNumber; i<7; i++ ){
				name = this.getName(year,month,day);
				this.setDay(name,day,index);
				index++;
				day++;
			};
			for( i=0; i<weekNumber; i++ ){
				for( var k=0; k<7; k++){
					name = this.getName(year,month,day);
					this.setDay(name,day,index);
					day++;
					index++;
				};
			};
			for( i=0; i<lastNumber+1; i++ ){
				name = this.getName(year,month,day);
				this.setDay(name,day,index);
				index++;
				day++;
			};
			var next = this.getNext(year,month);
			day = 1;
			while( $div[index] ){
				name = this.getName(next.y, next.m, day);
				this.setDay(name,day,index,1);
				day++;
				index++;
			};
			return this;
		},
		init: function($obj){
			this.$obj = $obj;
			return this;
		}
	}
	function DateWeek($obj){
		return this.init($obj);
	};
	DateWeek.prototype = proto;
	DateWeek.prototype.constructor = DateWeek;
	window.DateWeek = DateWeek;
})(window,jQuery);

这个js只是做出了日期的排列，其他的事情可以通过日期上面绑定的属性追加