首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

利用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>

总结

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

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

- Author -

daisy

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
重写javascript中window.confirm的行为
Oct 21 Javascript
javascript字符串与数组转换汇总
May 26 Javascript
在Javascript中处理数组之toSource()方法的使用
Jun 09 Javascript
JS实现光滑展开合拢的菜单效果代码
Sep 16 Javascript
js实现tab切换效果实例
Sep 16 Javascript
jQuery自定义滚动条完整实例
Jan 08 Javascript
js ajaxfileupload.js上传报错的解决方法
May 05 Javascript
全面了解js中的script标签
Jul 04 Javascript
jQuery实现判断上传图片类型和大小的方法示例
Apr 11 jQuery
vue 使用 canvas 实现手写电子签名
Mar 06 Javascript
vue axios封装httpjs,接口公用配置拦截操作
Aug 11 Javascript
vue实现购物车的小练习
Dec 21 Vue.js
获取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
声卡驱动(1) Debian(1) svg(1) win7(2) 鸿蒙3.0(1) 蓝屏(1) 滚动条(1) Sunmao(1) 鸿蒙(2) 输入法(2)
You might like
discuz论坛 用户登录 后台程序代码
2008/11/27 PHP
php站内搜索关键词变亮的实现方法
2014/12/30 PHP
学习thinkphp5.0验证类使用方法
2017/11/16 PHP
解决PHP curl或file_get_contents下载图片损坏或无法打开的问题
2019/10/11 PHP
js left,right,mid函数
2008/06/10 Javascript
jquery.ui.progressbar 中文文档
2009/11/26 Javascript
在一个浏览器里呈现所有浏览器测试结果的前端测试工具的思路
2010/03/02 Javascript
Javascript学习笔记-详解in运算符
2011/09/13 Javascript
JavaScript在多浏览器下for循环的使用方法
2012/11/07 Javascript
JS获取几种URL地址的方法小结
2014/02/26 Javascript
JS模式之简单的订阅者和发布者模式完整实例
2015/06/30 Javascript
jQuery实现带有动画效果的回到顶部和底部代码
2015/11/04 Javascript
AngularJS 2.0入门权威指南
2016/10/08 Javascript
angular.js指令中transclude选项及ng-transclude指令详解
2017/05/24 Javascript
详解Vue如何支持JSX语法
2017/11/10 Javascript
JS中移除非数字最多保留一位小数
2018/05/09 Javascript
vue cli 3.0 使用全过程解析
2018/06/14 Javascript
vue-cli项目中使用echarts图表实例
2018/10/22 Javascript
Angular设置别名alias的方法
2018/11/08 Javascript
nodejs中实现用户注册路由功能
2019/05/20 NodeJs
openlayers 3实现车辆轨迹回放
2020/09/24 Javascript
[02:19]DOTA2上海特级锦标赛 观赛指南 Spectator Guide
2016/02/04 DOTA
python实现文件路径和url相互转换的方法
2015/07/06 Python
Python实现字符串匹配算法代码示例
2017/12/05 Python
PyQt5每天必学之组合框
2018/04/20 Python
Python求正态分布曲线下面积实例
2019/11/20 Python
Python定时器线程池原理详解
2020/02/26 Python
Python如何实现自带HTTP文件传输服务
2020/07/08 Python
详解python安装matplotlib库三种失败情况
2020/07/28 Python
python如何实时获取tcpdump输出
2020/09/16 Python
PyTorch中clone()、detach()及相关扩展详解
2020/12/09 Python
不同浏览器对CSS3和HTML5的支持状况
2009/10/31 HTML / CSS
大学毕业生通用求职信
2013/09/28 职场文书
判缓刑人员个人思想汇报
2014/10/10 职场文书
委托证明范本
2014/11/25 职场文书
选调生挂职锻炼工作总结
2015/10/23 职场文书