利用JS实现简单的日期选择插件


Posted in Javascript onJanuary 23, 2017

首先是调用方法如下

//调用方法,后面回调函数返回的是当前选择的日期 
calender('#calend').init(function(date){ 
 this.innerHTML = date 
});
//具体参数说明 
//如果需要传入参数,第一个为json,第二个为回调函数 
//下面是format格式化显示格式类型,有如下几种: 
//yyyy为年数  
//大写M为月数  
//d为几号  
//h为小时  
//小写m为分钟  
//s为秒数  
//q为季度  
//小写e,为数字星期格式  
//大写E,为中文星期格式  
//举例:'yyyy年MM月dd日','yyyy-MM-dd','yyyy','MM','e','dd E' 
//注意:以上获取时间如果是个位数则返回个位数,比如7月,则返回7,如果需要返回07,参数可以写成这样“MM”,其它同理,由于时分秒功能还没有添加,默认获取当前时分秒  
calender('#calend').init({ 
 date : [2015,12,12], //设置默认显示年月日,默认当前年月日  
 format : 'yyyy-MM-dd', //设置显示格式 
 button : false //是否显示按钮 
 left : 0, //追加left,默认0
 top :0, //追加top,默认0
 onload : function(){ } //初始化完成执行,this为当前创建的日历对象 
},function(date){ 
 //回调函数 
 this.innerHTML = date 
});

主要css样式

.containter {
	width:320px;
	margin:auto
}
.calender-wrap {
	-webkit-animation:clafade .3s ease;
	-moz-animation:clafade .3s ease;
	animation:clafade .3s ease;
	padding:5px;
	background:#fff;
	width:240px;
	box-shadow:0 5px 10px rgba(0,0,0,0.2);
	border-radius:4px;
	position:relative;
	font-family:"Microsoft yahei";
	position:absolute;
	z-index:1000
}
.calender-wrap {
	border:1px solid #e2e2e2
}
.calender-wrap:after {
	content:'';
	display:inline-block;
	border-left:7px solid transparent;
	border-right:7px solid transparent;
	border-bottom:7px solid #eee;
	border-top:0;
	border-bottom-color:#d7d7d7;
	position:absolute;
	left:9px;
	top:-7px
}
.calender-wrap:before {
	content:'';
	display:inline-block;
	border-left:6px solid transparent;
	border-right:6px solid transparent;
	border-bottom:6px solid #ffffff;
	border-top:0;
	position:absolute;
	left:10px;
	top:-6px;
	z-index:10
}
.calender-caption {
	height:35px;
	border-bottom:1px solid #ddd;
	z-index:2;
	background:#eee
}
.calender-content {
	position:relative;
	overflow:hidden
}
.calender-content:after {
	content:'';
	display:block;
	clear:both
}
.calender-cell {
	cursor:pointer;
	float:left;
	width:14.28571428%;
	height:35px;
	text-align:center;
	line-height:35px;
	font-size:12px;
	color:#000;
	z-index:1;
	border-bottom:1px solid #eee
}
.calender-cell:hover {
	background:#eee
}
.calender-caption .calender-cell:hover {
	background:none
}
.calender-cell-dark {
	cursor:no-drop;
	color:#b9b9b9
}
.calender-caption .calender-cell {
	height:35px;
	line-height:35px;
	font-size:13px;
	color:#111;
	font-weight:bold
}
.calender-header {
	text-align:center;
	line-height:35px;
	text-align:center;
	color:#888;
	padding-bottom:4px;
	margin-bottom:1px;
	background:#fff;
	position:relative;
	border-bottom:1px solid #e6e6e6;
	font-size:14px
}
#calender-prev,#calender-next {
	text-decoration:none;
	display:block;
	width:14.2857%;
	height:35px;
	background:#fff;
	position:absolute;
	left:0%;
	top:0px;
	font-family:'宋体';
	font-size:14px;
	color:#555
}
#calender-prev,#calender-next {
	color:#999;
	font-size:16px
}
#calender-prev:hover,#calender-next:hover {
	background:#eee;
	border-radius:5px;
	color:#222
}
#calender-next {
	left:auto;
	right:0%
}
#calender-year,#calender-mon {
	cursor:pointer;
	padding:2px 4px;
	border-radius: 3px;
	margin:0 3px;
}
#calender-year:hover,#calender-mon:hover {
	background:#eee
}
.calender-list {
	overflow:hidden
}
.calender-list2,.calender-list3 {
	display:none
}
.calender-year-cell,.calender-mon-cell {
	width:32.41%;
	float:left;
	border-radius:4px;
	text-align:center;
	font-size:12px;
	padding:15px 0;
	border:1px solid #fff
}
.calender-year-cell:hover,.calender-mon-cell:hover {
	background:#eee;
	cursor:pointer
}
.calender-cell.active,.calender-year-cell.active,.calender-mon-cell.active {
	background:#23acf1;
	color:#fff
}
.calender-cell.active:hover,.calender-year-cell.active:hover,.calender-mon-cell.active:hover {
	background:#23acf1;
	color:#fff
}
.calender-button {
	border-top:1px solid #eee;
	width:100%;
	margin-top:-1px;
	padding:7px 0px 2px 0;
	overflow:hidden
}
.calender-button a {
	display:block;
	text-align:center;
	padding:0px 15px;
	height: 25px;
	line-height: 25px;
	float:right;
	background:#23acf1;
	color:#fff;
	margin-right:5px;
	cursor:pointer;
	margin-left:5px;
	font-size:12px;
	text-decoration:none
}
.calender-button a:hover {
	background:#0084c9
}
.calender-wrap.year .calender-list,.calender-wrap.month .calender-list {
	display:none
}
.calender-wrap.year .calender-list2 {
	display:block
}
.calender-wrap.month .calender-list3 {
	display:block
}
@keyframes clafade {
	0% {
	transform:scale(0.95);
	opacity:0
}
100% {
	transform:scale(1);
	opacity:1
}
}@-webkit-keyframes clafade {
	0% {
	-webkit-transform:scale(0.95);
	opacity:0
}
100% {
	-webkit-transform:scale(1);
	opacity:1
}
}	.calend {
	display: block;
	width: 180px;
	line-height: 28px;
	background: #222;
	color: #fff;
	padding: 5px 12px;
	margin:20px 20px 20px 0;
	font-size: 14px;
}

效果图一(默认参数)

利用JS实现简单的日期选择插件

效果图二(显示按钮,设置时间)

利用JS实现简单的日期选择插件

完整实例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
.containter {
	width:320px;
	margin:auto
}
.calender-wrap {
	-webkit-animation:clafade .3s ease;
	-moz-animation:clafade .3s ease;
	animation:clafade .3s ease;
	padding:5px;
	background:#fff;
	width:240px;
	box-shadow:0 5px 10px rgba(0,0,0,0.2);
	border-radius:4px;
	position:relative;
	font-family:"Microsoft yahei";
	position:absolute;
	z-index:1000
}
.calender-wrap {
	border:1px solid #e2e2e2
}
.calender-wrap:after {
	content:'';
	display:inline-block;
	border-left:7px solid transparent;
	border-right:7px solid transparent;
	border-bottom:7px solid #eee;
	border-top:0;
	border-bottom-color:#d7d7d7;
	position:absolute;
	left:9px;
	top:-7px
}
.calender-wrap:before {
	content:'';
	display:inline-block;
	border-left:6px solid transparent;
	border-right:6px solid transparent;
	border-bottom:6px solid #ffffff;
	border-top:0;
	position:absolute;
	left:10px;
	top:-6px;
	z-index:10
}
.calender-caption {
	height:35px;
	border-bottom:1px solid #ddd;
	z-index:2;
	background:#eee
}
.calender-content {
	position:relative;
	overflow:hidden
}
.calender-content:after {
	content:'';
	display:block;
	clear:both
}
.calender-cell {
	cursor:pointer;
	float:left;
	width:14.28571428%;
	height:35px;
	text-align:center;
	line-height:35px;
	font-size:12px;
	color:#000;
	z-index:1;
	border-bottom:1px solid #eee
}
.calender-cell:hover {
	background:#eee
}
.calender-caption .calender-cell:hover {
	background:none
}
.calender-cell-dark {
	cursor:no-drop;
	color:#b9b9b9
}
.calender-caption .calender-cell {
	height:35px;
	line-height:35px;
	font-size:13px;
	color:#111;
	font-weight:bold
}
.calender-header {
	text-align:center;
	line-height:35px;
	text-align:center;
	color:#888;
	padding-bottom:4px;
	margin-bottom:1px;
	background:#fff;
	position:relative;
	border-bottom:1px solid #e6e6e6;
	font-size:14px
}
#calender-prev,#calender-next {
	text-decoration:none;
	display:block;
	width:14.2857%;
	height:35px;
	background:#fff;
	position:absolute;
	left:0%;
	top:0px;
	font-family:'宋体';
	font-size:14px;
	color:#555
}
#calender-prev,#calender-next {
	color:#999;
	font-size:16px
}
#calender-prev:hover,#calender-next:hover {
	background:#eee;
	border-radius:5px;
	color:#222
}
#calender-next {
	left:auto;
	right:0%
}
#calender-year,#calender-mon {
	cursor:pointer;
	padding:2px 4px;
	border-radius: 3px;
	margin:0 3px;
}
#calender-year:hover,#calender-mon:hover {
	background:#eee
}
.calender-list {
	overflow:hidden
}
.calender-list2,.calender-list3 {
	display:none
}
.calender-year-cell,.calender-mon-cell {
	width:32.41%;
	float:left;
	border-radius:4px;
	text-align:center;
	font-size:12px;
	padding:15px 0;
	border:1px solid #fff
}
.calender-year-cell:hover,.calender-mon-cell:hover {
	background:#eee;
	cursor:pointer
}
.calender-cell.active,.calender-year-cell.active,.calender-mon-cell.active {
	background:#23acf1;
	color:#fff
}
.calender-cell.active:hover,.calender-year-cell.active:hover,.calender-mon-cell.active:hover {
	background:#23acf1;
	color:#fff
}
.calender-button {
	border-top:1px solid #eee;
	width:100%;
	margin-top:-1px;
	padding:7px 0px 2px 0;
	overflow:hidden
}
.calender-button a {
	display:block;
	text-align:center;
	padding:0px 15px;
	height: 25px;
	line-height: 25px;
	float:right;
	background:#23acf1;
	color:#fff;
	margin-right:5px;
	cursor:pointer;
	margin-left:5px;
	font-size:12px;
	text-decoration:none
}
.calender-button a:hover {
	background:#0084c9
}
.calender-wrap.year .calender-list,.calender-wrap.month .calender-list {
	display:none
}
.calender-wrap.year .calender-list2 {
	display:block
}
.calender-wrap.month .calender-list3 {
	display:block
}
@keyframes clafade {
	0% {
	transform:scale(0.95);
	opacity:0
}
100% {
	transform:scale(1);
	opacity:1
}
}@-webkit-keyframes clafade {
	0% {
	-webkit-transform:scale(0.95);
	opacity:0
}
100% {
	-webkit-transform:scale(1);
	opacity:1
}
}	.calend {
	display: block;
	width: 180px;
	line-height: 28px;
	background: #222;
	color: #fff;
	padding: 5px 12px;
	margin:20px 20px 20px 0;
	font-size: 14px;
}
</style>

</head>

<body>

<div id="calend" class="calend">选择日期</div>
<div id="calend1" class="calend">选择日期</div>


<script>
window.calender = (function(win,doc){
	function C(str){
		this.dom = doc.querySelector(str);
		this.s = {
			date : [ new Date().getFullYear(),new Date().getMonth()+1,new Date().getDate()],
			button : false,
			format : 'yyyy年MM月dd日',
			left : 0,
			top: 0,
			onload : function(){}
		}
	};
	C.prototype = {
		init : function(){
			var t = this;
			if( typeof arguments[0] == 'function'){
	 		t.cb = arguments[0];
	 	}else{
	 		t.newS = arguments[0];
	 		t.cb = arguments[1] || function(){}
	 	};
	 	t.yoff = false;
	 	t.moff = false;
			t.extend(t.s,t.newS);
			t.nt = new Date();
			t.nt.setFullYear(t.s.date[0]);
		 	t.nt.setMonth(t.s.date[1]-1);
		 	var len = this.getDateLength(t.nt.getFullYear(),t.nt.getMonth() )
		 	t.nt.setDate(t.s.date[2]>len ? len : t.s.date[2]);
		 	t.day = t.nt.getDate();
			t.dom.onclick = function(ev){
				var e = ev || event;
				t.create();
				t.bind();
				t.s.onload.call(this)
				e.stopPropagation ? e.stopPropagation() : (e.cancelBubble = true)
			};	
		},
		hide : function(){
			var t = this;
			t.cb.call(t.dom,t.format( t.nt.getFullYear()+'/'+ (t.nt.getMonth()+1)+'/'+ t.day+' '+new Date().getHours()+':'+new Date().getMinutes()+':'+new Date().getSeconds(),t.s.format));
			if( g('.calender-wrap')) doc.body.removeChild( g('.calender-wrap') )
		},
		bind : function(){
			var t = this;
			var Content = g('.calender-content');
			t.createDay();
			var Prev = g('#calender-prev'),
				Next = g('#calender-next'),
				Year = g('#calender-year'),
				Mon = g('#calender-mon');
			if(t.s.button){
				var today = g('.calender-today');
				var enter = g('.calender-ent');
				today.onclick = function(){
					t.nt.setFullYear(new Date().getFullYear());
				 	t.nt.setMonth(new Date().getMonth());
				 	t.nt.setDate( new Date().getDate());
				 	t.s.date[2] = t.day = new Date().getDate()
					t.createYear()
					t.createDay()
					t.createMon()
				};
				enter.onclick = function(){
					t.hide();
				}
			}
			Content.onclick = function(ev){
				var ev = ev || event; 
		 	var _target = ev.target || ev.srcElement; 
		 	if(!t.has(_target,'calender-cell-dark') ){
		 		var chl = this.children;
		 		for(var i = 0;i<chl.length;i++){
		 			t.del(chl[i],'active');
		 		};
		 		t.add(_target,'active');
		 		t.nt.setDate(_target.getAttribute('data-n'));
		 		t.s.date[2] = t.day = _target.getAttribute('data-n')
		 		if(!t.s.button){
		 			t.hide();
		 		}
		 	}
			}
			Prev.onclick = Next.onclick = function(){
				var y = t.nt.getFullYear(),m = t.nt.getMonth();
				if(t.moff) return
				if(t.yoff){
					t.nt.setFullYear( this.id=="calender-prev" ? y -= 9 : y += 9)
					t.createYear()
				}else{
					this.id=="calender-prev" ? m-- : m++;
					t.nt.setDate(1);
					t.nt.setMonth( m );
					t.createDay()
				}
			}
			Year.onclick = function(){
				t.createYear();
				t.yoff = true;
				t.moff = false;
				t.del(g('.calender-wrap'),'month');
				t.add(g('.calender-wrap'),'year');
			};
			Mon.onclick = function(){
				t.createMon();
				t.moff = true;
				t.yoff = false;
				t.del(g('.calender-wrap'),'year');
				t.add(g('.calender-wrap'),'month');
			};
		},
		getDateLength : function(year,month){
			//获取某一月有多少天, month为实际月份,一月即为1
			return new Date(year,month,0).getDate();
		},
		getFirstDay : function(year,month){
			//获取某一月第一天是周几,month为实际月份,一月即为1,返回0即为周日
			return new Date(year,month-1,0).getDay();
		},
		createMon : function(){
			var t= this,html='';
			var m = t.nt.getMonth()+1;
			m = m == 0 ? 12 : m;
			for(var i = 1;i<=12;i++){
				html+='<div class="calender-mon-cell '+( m == i ? 'active' : '') +' ">'+ (i) +'</div>';
			};
			g('.calender-list3').innerHTML = html;
			var cells = doc.querySelectorAll('.calender-mon-cell');
			for(var i2 = 0;i2<cells.length;i2++){
			 	cells[i2].onclick = function(){
			 		t.moff = false
			 		t.del(g('.calender-wrap'),'month');
			 		t.nt.setDate(1)
					t.nt.setMonth(+this.innerHTML-1);
					t.createDay();
			 	}
			}
		},
		createYear : function(){
			var t= this,html='',y = (t.nt.getFullYear());
			var Year = g('#calender-year');
			for(var i = 0;i<9;i++){
				html+='<div class="calender-year-cell '+( (y-(4-i)) == y ? 'active' :'') +' ">'+ (y-(4-i)) +'</div>';
			}
			Year.innerHTML = y
			g('.calender-list2').innerHTML = html;
			var cells = doc.querySelectorAll('.calender-year-cell');
			for(var i2 = 0;i2<cells.length;i2++){
			 	cells[i2].onclick = function(){
			 		t.yoff = false;
			 		t.del(g('.calender-wrap'),'year');
					t.nt.setFullYear(+this.innerHTML);
					t.createDay();
			 	}
			}
		},
		createDay : function(n){
			var t = this, 
				y = t.nt.getFullYear(),
				m = (t.nt.getMonth())+1;
			g('#calender-year').innerHTML = m===0 ? y-1 : y;
			g('#calender-mon').innerHTML = m === 0 ? 12 : two(m);
			// if(t.nt.getMonth()+1 == t.s.date[1] && t.nt.getFullYear()==t.s.date[0] ){
			// 	t.nt.setDate(t.s.date[2]);
			// };
			var firstDay = this.getFirstDay(y,m),
				length = this.getDateLength(y,m),
				lastMonthLength = this.getDateLength(y,m-1),
				i,html = '';
				t.day = t.s.date[2] > length ? length : t.s.date[2];
			//循环输出月前空格
			if(firstDay ===0) firstDay = 7;
			for(i=1;i<firstDay+1;i++){
				html += '<div class="calender-cell calender-cell-dark">' + (lastMonthLength - firstDay + i) + '</div>';
			}
			//循环输出当前月所有天
			for(i=1;i<length+1;i++){
				html += '<div data-n='+i+' class="calender-cell '+ (i == t.day ? 'active' :'') +'">' + i + '</div>';
			}
			//if(8-(length+firstDay)%7 !=8){
			for(i=1;i<= (41-(length+(firstDay==0 ? 7 : firstDay)-1));i++){
				html+= '<div class="calender-cell calender-cell-dark">' + i + '</div>';
			};
			doc.querySelector('.calender-content').innerHTML = html
		},
		create : function(){
			var t= this;
			if( g('.calender-wrap')) doc.body.removeChild( g('.calender-wrap') )
			var private_Day_title=['一','二','三','四','五','六','日'];
			//内容
			var html = '<div class="calender-wrap">';
			html +='<div id="calender-header" class="calender-header none-btn "><a id="calender-prev" href="javascript:;"><</a><a id="calender-next" href="javascript:;">></a> <span id="calender-year">2016</span>年<span id="calender-mon">10</span>月</div>'
			//星期
			html += '<div class="calender-list"><div class="calender-caption">';
			for(i=0;i<7;i++){
				html += '<div class="calender-cell">' + private_Day_title[i] + '</div>';
			};
			html += '</div><div class="calender-content"></div>';
			if(this.s.button){
				html+='<div class="calender-button"><a href="javascript:;" class="calender-ent">确定</a><a href="javascript:;" class="calender-today">今天</a></div>';
			};
			html += '</div><div class="calender-list calender-list2"></div><div class="calender-list calender-list3"></div>'
			doc.body.insertAdjacentHTML("beforeend", html);
			var wrap = g('.calender-wrap');
			function setPosi(){
				var _top = doc.documentElement.scrollTop || doc.body.scrollTop;
				wrap.style.left = t.dom.getBoundingClientRect().left +t.s.left +'px';;
				wrap.style.top = t.dom.getBoundingClientRect().top + _top + t.dom.offsetHeight+t.s.top + 15 +'px';
			};
			setPosi();
			addEvent(window,'resize',function(){setPosi()})
			wrap.onclick = function(ev){
				var e = ev || event;
				e.stopPropagation ? e.stopPropagation() : (e.cancelBubble = true)
			}
		},
	 format : function(da,format){
	  	var _newDate = new Date(da);
	 		var WeekArr=['星期日','星期一','星期二','星期三','星期四','星期五','星期六']; 
		 var o = { 
		  'M+' : _newDate.getMonth()+1, //month 
		  'd+' : _newDate.getDate(), //day 
		  'h+' : _newDate.getHours(), //hour 
		  'm+' : _newDate.getMinutes(), //minute 
		  's+' : _newDate.getSeconds(), //second 
		  'q+' : Math.floor((_newDate.getMonth()+3)/3), //quarter 
		  'S': _newDate.getMilliseconds(), //millisecond 
		  'E': WeekArr[_newDate.getDay()], 
		  'e+' : _newDate.getDay() 
		 }; 
		 if (/(y+)/.test(format)){
		 	format = format.replace(RegExp.$1, (_newDate.getFullYear()+"").substr(4 - RegExp.$1.length));
		 };
		 for(var k in o) { 
		  if(new RegExp('('+ k +')').test(format)) { 
		   format = format.replace(RegExp.$1, RegExp.$1.length==1 ? o[k] : ('00'+ o[k]).substr((''+ o[k]).length)); 
		  }; 
		 }; 
		 return format; 
	 },
	 extend : function(n,n1){
	  for(var i in n1){n[i] = n1[i]};
	 },
		has : function(o,n){
		 return new RegExp('\\b'+n+'\\b').test(o.className); 
	 },
		add : function(o,n){
		 if(!this.has(o, n)) o.className+=' '+n; 
	 },
		del : function(o,n){
		 if(this.has(o, n)){ 
		  o.className = o.className.replace(new RegExp('(?:^|\\s)'+n+'(?=\\s|$)'), '').replace(/^\s*|\s*$/g, ''); 
		 }; 
	 }
	};
	function g(str){return doc.querySelector(str)};
	function addEvent(obj,name,fn){obj.addEventListener? obj.addEventListener(name, fn, false):obj.attachEvent('on'+name,fn);};
 function two(num){return num<10 ? ('0'+num) : (''+num)};
	addEvent(doc,'click',function(){
		if( g('.calender-wrap')) doc.body.removeChild( g('.calender-wrap') )
	});
	function c(o){return new C(o)};return c;
})(window,document);

;(function(){
  calender('#calend').init(function(date){
 		this.innerHTML = date
	});
	calender('#calend1').init({format : 'yyyy-MM-dd',
    date : [2020,5,12],
		button : true
	},function(date){
		this.innerHTML = date
	});
})();

</script>


</body>
</html>

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。

Javascript 相关文章推荐
用js实现的抽象CSS圆角效果!!
May 03 Javascript
IE8 原生JSON支持
Apr 13 Javascript
JQuery EasyUI 数字格式化处理示例
May 05 Javascript
自定义百度分享的分享按钮
Mar 18 Javascript
jQuery validate验证插件使用详解
May 11 Javascript
js 声明数组和向数组中添加对象变量的简单实例
Jul 28 Javascript
使用bootstrapValidator插件进行动态添加表单元素并校验
Sep 28 Javascript
JS克隆,属性,数组,对象,函数实例分析
Nov 26 Javascript
使用vue-route 的 beforeEach 实现导航守卫(路由跳转前验证登录)功能
Mar 22 Javascript
vue-cli V3.0版本的使用详解
Oct 24 Javascript
JS实现集合的交集、补集、差集、去重运算示例【ES5与ES6写法】
Feb 18 Javascript
vue elementui 实现搜索栏公共组件封装的实例代码
Jan 20 Javascript
获取IE浏览器Cookie信息的方法
Jan 23 #Javascript
jQuery实现的简单悬浮层功能完整实例
Jan 23 #Javascript
原生和jQuery的ajax用法详解
Jan 23 #Javascript
基于MVC方式实现三级联动(JavaScript)
Jan 23 #Javascript
利用javascript实现的三种图片放大镜效果实例(附源码)
Jan 23 #Javascript
Javascript Event(事件)的传播与冒泡
Jan 23 #Javascript
js选项卡的制作方法
Jan 23 #Javascript
You might like
获取远程文件大小的php函数
2010/01/11 PHP
PHP file_get_contents设置超时处理方法
2013/09/30 PHP
php使浏览器直接下载pdf文件的方法
2013/11/15 PHP
PHP魔术引号所带来的安全问题分析
2014/07/15 PHP
ThinkPHP框架实现的微信支付接口开发完整示例
2019/04/10 PHP
php变量与字符串的增删改查操作示例
2020/05/07 PHP
IE 下的只读 innerHTML
2009/08/21 Javascript
Javascript 自适应高度的Tab选项卡
2011/04/05 Javascript
js 实现日期灵活格式化的小例子
2013/07/14 Javascript
jQuery实现简单的日期输入格式化控件
2015/03/12 Javascript
jQuery超简单选项卡完整实例
2015/09/26 Javascript
jQuery实现分隔条左右拖动功能
2015/11/21 Javascript
js实现增加数字显示的环形进度条效果
2017/02/05 Javascript
微信小程序 Buffer缓冲区的详解
2017/07/06 Javascript
详解react-router4 异步加载路由两种方法
2017/09/12 Javascript
详解JS构造函数中this和return
2017/09/16 Javascript
在vscode中统一vue编码风格的方法
2018/02/22 Javascript
浅谈webpack-dev-server的配置和使用
2018/05/17 Javascript
echarts多条折线图动态分层的实现方法
2019/05/24 Javascript
详解webpack的clean-webpack-plugin插件报错
2020/10/16 Javascript
Python切片索引用法示例
2018/05/15 Python
Linux下多个Python版本安装教程
2018/08/15 Python
python检测文件夹变化,并拷贝有更新的文件到对应目录的方法
2018/10/17 Python
基于Numpy.convolve使用Python实现滑动平均滤波的思路详解
2019/05/16 Python
Python使用正则表达式分割字符串的实现方法
2019/07/16 Python
利用Python小工具实现3秒钟将视频转换为音频
2019/10/29 Python
tensorflow如何继续训练之前保存的模型实例
2020/01/21 Python
Python 实现进度条的六种方式
2021/01/06 Python
pycharm最新激活码有效期至2100年(亲测可用)
2021/02/05 Python
Python3+Appium安装及Appium模拟微信登录方法详解
2021/02/16 Python
CSS3实现可翻转的hover效果
2018/05/23 HTML / CSS
Street One瑞士:德国现代时装公司
2019/10/09 全球购物
主题教育活动总结
2014/05/05 职场文书
小学国庆节活动方案策划书
2014/09/16 职场文书
RestTemplate如何通过HTTP Basic Auth认证示例说明
2022/03/17 Java/Android
element tree树形组件回显数据问题解决
2022/08/14 Javascript