首页
所有分类
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 相关文章推荐
js实现select组件的选择输入过滤代码
Oct 14 Javascript
JS Array创建及concat()split()slice()的使用方法
Jun 03 Javascript
AngularJs html compiler详解及示例代码
Sep 01 Javascript
使用JS实现图片展示瀑布流效果的实例代码
Sep 12 Javascript
a标签跳转到指定div,jquery添加和移除class属性的实现方法
Oct 10 Javascript
angular分页指令操作
Jan 09 Javascript
微信小程序 生命周期函数详解
May 24 Javascript
Bootstrap treeview实现动态加载数据并添加快捷搜索功能
Jan 07 Javascript
vue select选择框数据变化监听方法
Aug 24 Javascript
JavaScript实现HSL拾色器
May 21 Javascript
JavaScript判断数据类型有几种方法及区别介绍
Sep 02 Javascript
在js中修改html body的样式
Nov 11 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
爱尔兰购物网站(30) AE3805(1) ICF-F10(1) 香港购物网站(84) 德生G88(1) SLi Minor 2020(63) 天梯图(1) CPU(2) 纸巾盒(1) 美国购物网站(1542)
You might like
php中的字符编码转换函数用法示例
2014/10/20 PHP
getimagesize获取图片尺寸实例
2014/11/15 PHP
yii2 页面底部加载css和js的技巧
2016/04/21 PHP
Yii 2.0中场景的使用教程
2017/06/02 PHP
Laravel框架实现调用百度翻译API功能示例
2019/05/30 PHP
innerHTML，outerHTML,innerTEXT三者之间的区别
2007/01/28 Javascript
JavaScript ( (__ = !$ + $)[+$] + ({} + $)[_/_] +({} + $)[_/_] )
2011/02/25 Javascript
使用jQuery实现的掷色子游戏动画效果
2014/03/14 Javascript
Bootstrap每天必学之媒体对象
2015/11/30 Javascript
浅析JS运动
2015/12/28 Javascript
Angularjs整合微信UI（weui）
2016/03/15 Javascript
阻止表单提交按钮多次提交的完美解决方法
2016/05/16 Javascript
jQuery 获取跨域XML(RSS)数据的相关总结分析
2016/05/18 Javascript
js轮播图的插件化封装详解
2017/07/17 Javascript
vue2.0 自定义组件的方法（vue组件的封装）
2018/06/05 Javascript
js实现动态添加上传文件页面
2018/10/22 Javascript
详解vue路由篇(动态路由、路由嵌套)
2019/01/27 Javascript
Nuxt.js实战和配置详解
2019/08/05 Javascript
vue 子组件和父组件传值的示例
2020/09/11 Javascript
[01:02:46]VGJ.S vs NB 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
[37:47]IG vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Python实现端口复用实例代码
2014/07/03 Python
python中使用mysql数据库详细介绍
2015/03/27 Python
Python编写一个闹钟功能
2017/07/11 Python
Python设计模式之MVC模式简单示例
2018/01/10 Python
Python3非对称加密算法RSA实例详解
2018/12/06 Python
python仿evething的文件搜索器实例代码
2019/05/13 Python
PyCharm使用Docker镜像搭建Python开发环境
2019/12/26 Python
python zip,lambda,map函数代码实例
2020/04/04 Python
Python map及filter函数使用方法解析
2020/08/06 Python
Python 如何实现数据库表结构同步
2020/09/29 Python
python实现图像随机裁剪的示例代码
2020/12/10 Python
html5中地理位置定位api接口开发应用小结
2013/01/04 HTML / CSS
开普敦通行证：Cape Town Pass
2019/07/18 全球购物
运动会闭幕式致辞
2015/07/29 职场文书
高二化学教学反思
2016/02/22 职场文书