当前位置: 开发笔记 > 前端 > 正文

js实现符合国情的日期插件详解

作者：裂爆传说_818 | 来源：互联网 | 2022-03-10 22:47

本篇文章主要介绍了js实现符合国情的日期插件的方法与步骤。具有一定的参考价值，下面跟着小编一起来看下吧

这次开始的项目是PC版的，貌似有2年没正儿八经的折腾PC端了。

言归正传，这次功能中有个选择日期段的功能，本来不麻烦的事情，但是PM非要参照另外一个网站的效果来做，把别人代码扒下来一看，我去，08年的插件，很多功能不能满足当前，PM非要那效果，时间又TM有限，就又找了个国外的插件daterangepicker，基于bootstrap，跟需求长得很像，功能非常强大，需求都能满足，但是...但是，PM和测试说不好用。。。折腾了半天源代码，优化了下，时间来不及只能凑合用着。

重新动手写了个。依赖jquery和moment.js(主要处理日期，如果自己处理也可以不需要)，

先看效果图

使用方法：

var daterangepicker = new DateRangePicker();
daterangepicker.init({
 "ele": $("#daterange"),
 "pos":"left",
 "min_date": "1990-01-01",
 "format": "YYYY:MM:DD",
 "updateDateFn":function(){
 console.log(daterangepicker.getDate())
 }
});

基本思路是：

创建一个日期选择构造函数

function DateRangePicker() {
this.start_picker = null;
this.end_picker = null;
}

初始化日期构造函数，日期段由两个单独的日期选择组成，当起始日期和结束日期变化时要调用构造函数的updateDate方法，通知日期发生了变化。

DateRangePicker.prototype.init = function(opts) {
 var self = this;
 this.opts = $.extend({
 "pos":"left",//日历位置，靠左或靠右
 "min_date":"1970-01-01",//最小日期
 "updateDateFn":function(){//日期更新回调
 }
 }, opts || {});
 this.createCalendarWrap();
 this.$wrap=this.opts.ele.parents(".ui-datepicker");
 this.start_picker = new DatePicker();//起始日期日历
 this.end_picker = new DatePicker();//结束日期日历
 this.start_picker.init({
 "container": this.$wrap.find(".calendar-container"),
 "min_date":self.opts.min_date,
 "yearOffset": 20,
 "updateCallback": function(){
 self.updateDate();
 }
 });
 this.end_picker.init({
 "container": this.$wrap.find(".calendar-container2"),
 "yearOffset": 20,
 "min_date":self.opts.min_date,
 "updateCallback": function(){
 self.updateDate();
 }
 });
 this.bindEvent();
};

处理日期发生变化的情况，比如起始日期大于结束日期，要进行互换。

DateRangePicker.prototype.updateDate = function() {
 var self = this;
 var start_date = moment(self.start_picker.currentDate).format(self.opts.format);
 var end_date = moment(self.end_picker.currentDate).format(self.opts.format);
 var start_date_time=new Date(self.start_picker.currentDate).getTime();
 var end_date_time=new Date(self.end_picker.currentDate).getTime();
 if(start_date_time>new Date().getTime()){
 self.start_picker.setCurrentDate(new Date());
 }
 if(end_date_time>new Date().getTime()){
 self.end_picker.setCurrentDate(new Date());
 }
 if(start_date_time>end_date_time){
 self.opts.ele.val(end_date + "~" + start_date);
 }else{
 self.opts.ele.val(start_date + "~" + end_date);
 }
 $(".ui-daterangepicker-range li").removeClass("active");
 self.opts.updateDateFn.call(null,this.getDate());//日期更新后重新获取当前的起始和结束日期
};

获取起始和结束日期

//获取起始日期和结束日期段,起始日期若大于结束日期则互换
DateRangePicker.prototype.getDate = function() {
 var start_date=Math.min(this.start_picker.currentDate.getTime(),this.end_picker.currentDate.getTime());
 var end_date=Math.max(this.start_picker.currentDate.getTime(),this.end_picker.currentDate.getTime());
 start_date=moment(start_date).format(this.opts.format);
 end_date=moment(end_date).format(this.opts.format);
 return {
 "start_date":start_date,
 "end_date": end_date
 };
};

提供动态设置当前起始日期和结束日期的方法

//设置起始日期和结束日期
DateRangePicker.prototype.setDate = function(start_date, end_date) {
 this.start_picker.setCurrentDate(new Date(start_date));
 this.end_picker.setCurrentDate(new Date(end_date));
 this.updateDate();
};

创建一个容器，因为日期选择要刚好在日期文本框下面，在日期文本框外面包一层方便定位。

//创建日期段容器
DateRangePicker.prototype.createCalendarWrap = function() {
 var $parent=this.opts.ele.parents(".ui-datepicker");
 var h=$parent.height(),w=$parent.width();
 var wrap = '开始日期
' +
 '结束日期
' +
 '' +
 '今日' +
 '昨日' +
 '最近7日' +
 '最近30日' +
 '' +
 '';
 $parent.append(wrap);
};

接下来是单个日期选择的处理

定义构造函数和初始化

function DatePicker() {
 this.opts = null;
 this.today = new Date(); //今天
 this.todayDate=this.today.getDate();
 this.currentDate = new Date(); //当前选中日期
}
DatePicker.prototype.init = function(opts) {
 var opts = $.extend({
 'min_date':"1970-01-01",
 "yearOffset": 20//默认往前推20年
 }, opts || {});
 this.opts = opts;
 this.renderCalendar();
 this.bindEvent();
};

事件处理

DatePicker.prototype.bindEvent = function() {
 var self = this;
 self.opts.container.on("change", ".year-select", function() {
 self.renderSelectedDate();
 });
 //选中月份
 self.opts.container.on("change", ".month-select", function() {
 self.renderSelectedDate();
 });
 //下一月
 self.opts.container.on("click", ".next-btn", function(e) {
 e.stopPropagation();
 var cur_date =self.currentDate.setMonth(self.currentDate.getMonth()+1);;
 self.setCurrentDate(cur_date);
 });
 //上一月
 self.opts.container.on("click", ".prev-btn", function(e) {
 e.stopPropagation();
 var cur_date = self.currentDate.setMonth(self.currentDate.getMonth()-1);
 self.setCurrentDate(cur_date);
 });
 //选择日历中某一天
 self.opts.container.on("click", ".date-item", function() {
 if (!$(this).hasClass("disabled")) {
 var _day = $(this).attr("date");
 var cur_date = self.currentDate.setDate(_day);
 self.setCurrentDate(cur_date);
 }
 });
};

定义临时存储的当前日期，默认日期是今天，但是选择的时候当前日期会变化。

//临时被选中的日期
DatePicker.prototype.tempActiveDate=(function(){
 var _date=new Date();
 return {
 getDate: function() {
 return _date;
 },
 setDate:function(date){
 _date=new Date(date);
 }
 };
})();

年月下拉框变化时更新日期

//设置下拉框选中的日期
DatePicker.prototype.renderSelectedDate = function() {
 var _year = this.opts.container.find(".year-select").val();
 var _mOnth= this.opts.container.find(".month-select").val();
 var _day = this.currentDate.getDate();
 var cur_date = new Date(_year, _month, _day);
 this.setCurrentDate(cur_date);
};

渲染日历框架，日历固定为42格，7列6行，星期从一到天

//渲染日历框架
DatePicker.prototype.renderCalendar = function() {
 var calendar_header = this.renderHeader();
 var calendar_days = '';
 var calendar_body = '';
 for (var i = 0; i <6; i++) {
 calendar_body += '';
 }
 calendar_body + '日 一 二 三 四 五 六
';
 this.opts.container.html(calendar_header + calendar_days + calendar_body);
 this.renderCalendarData();
};

渲染日历的头部，包括上月、下月按钮，年月的下拉框

//渲染日历头部
DatePicker.prototype.renderHeader = function() {
 var _year = this.today.getFullYear();
 var _mOnth= this.today.getMonth() + 1;
 var current_year = this.currentDate.getFullYear();
 var current_mOnth= this.currentDate.getMonth();
 var mOnthArr= ["一", "二", "三", "四", "五", "六", "七", "八", "九", "十", "十一", "十二"];
 var min_year=(new Date(this.opts.min_date)).getFullYear();//最小年份
 var start_year=current_year - this.opts.yearOffset>=min_year&＃63;current_year - this.opts.yearOffset:min_year;//下拉框起始年份
 var yearSelect="";
 //如果已经是最小日期，不显示上月按钮
 if (current_year <= min_year && current_month <= 0) {
 yearSelect+='';
 }
 for (var i =start_year; i <= _year; i++) {
 if (i == current_year) {
 yearSelect += '';
 } else {
 yearSelect += '';
 }
 }
 yearSelect += '';
 var mOnthSelect= '';
 }else{
 monthSelect += '>';
 }
 return "" + yearSelect + monthSelect + "";
};

//渲染日历数据
DatePicker.prototype.renderCalendarData = function() {
 var self = this;
 var _year = this.currentDate.getFullYear(); //当前年
 var _mOnth= this.currentDate.getMonth() + 1; //当前月
 var _firstDay = new Date(_year, _month - 1, 1); //当前月第一天
 var tds = this.opts.container.find(".calendar_body td");
 var header = self.renderHeader();
 this.opts.container.find(".calendar_header").html(header);
 tds.each(function(index, item) {
 var _thisDate = new Date(_year, _month - 1, index + 1 - _firstDay.getDay());
 var _thisDay = _thisDate.getDate();
 var _thisMOnth= _thisDate.getMonth() + 1;
 var _thisDateTime=_thisDate.getTime();
 $(item).html(_thisDay).attr("date", _thisDay).removeClass("active").removeClass("disabled").removeClass("today");
 //当前月并且当前选中日期高亮
 if (_thisDay == self.tempActiveDate.getDate().getDate() && _thisMOnth== _month) {
 $(item).addClass("active");
 }
 //今天日期样式
 if (_thisDay == self.todayDate) {
 $(item).addClass("today");
 }
 //非当前月或者大于今天的日期禁用
 if (_thisMonth !== _month || _thisDateTime>self.today.getTime()) {
 $(item).addClass("disabled").removeClass('active today');
 }
 //如果选择的日期大于今天，则日期重置
 if (_thisDateTime>self.today.getTime() && _thisDay == self.todayDate) {
 $(item).addClass("active");
 self.currentDate = _thisDate;
 }
 });
};
//设置当前日期
DatePicker.prototype.setCurrentDate = function(date) {
 this.tempActiveDate.setDate(date);
 this.currentDate = this.tempActiveDate.getDate();
 this.renderCalendarData();
 if(this.opts.updateCallback){
 this.opts.updateCallback.call(null,this.currentDate);
 }
};

js完整代码

function DatePicker() {
 this.opts = null;
 this.today = new Date(); //今天
 this.todayDate=this.today.getDate();
 this.currentDate = new Date(); //当前选中日期
}
DatePicker.prototype.init = function(opts) {
 var opts = $.extend({
 'min_date':"1970-01-01",
 "yearOffset": 20//默认往前推20年
 }, opts || {});
 this.opts = opts;
 this.renderCalendar();
 this.bindEvent();
};
DatePicker.prototype.bindEvent = function() {
 var self = this;
 self.opts.container.on("change", ".year-select", function() {
 self.renderSelectedDate();
 });
 //选中月份
 self.opts.container.on("change", ".month-select", function() {
 self.renderSelectedDate();
 });
 //下一月
 self.opts.container.on("click", ".next-btn", function(e) {
 e.stopPropagation();
 var cur_date =self.currentDate.setMonth(self.currentDate.getMonth()+1);;
 self.setCurrentDate(cur_date);
 });
 //上一月
 self.opts.container.on("click", ".prev-btn", function(e) {
 e.stopPropagation();
 var cur_date = self.currentDate.setMonth(self.currentDate.getMonth()-1);
 self.setCurrentDate(cur_date);
 });
 //选择日历中某一天
 self.opts.container.on("click", ".date-item", function() {
 if (!$(this).hasClass("disabled")) {
 var _day = $(this).attr("date");
 var cur_date = self.currentDate.setDate(_day);
 self.setCurrentDate(cur_date);
 }
 });
};
//临时被选中的日期
DatePicker.prototype.tempActiveDate=(function(){
 var _date=new Date();
 return {
 getDate: function() {
 return _date;
 },
 setDate:function(date){
 _date=new Date(date);
 }
 };
})();
//设置下拉框选中的日期
DatePicker.prototype.renderSelectedDate = function() {
 var _year = this.opts.container.find(".year-select").val();
 var _mOnth= this.opts.container.find(".month-select").val();
 var _day = this.currentDate.getDate();
 var cur_date = new Date(_year, _month, _day);
 this.setCurrentDate(cur_date);
};
//渲染日历框架
DatePicker.prototype.renderCalendar = function() {
 var calendar_header = this.renderHeader();
 var calendar_days = '';
 var calendar_body = '';
 for (var i = 0; i <6; i++) {
 calendar_body += '';
 }
 calendar_body + '日 一 二 三 四 五 六
';
 this.opts.container.html(calendar_header + calendar_days + calendar_body);
 this.renderCalendarData();
};
//渲染日历头部
DatePicker.prototype.renderHeader = function() {
 var _year = this.today.getFullYear();
 var _mOnth= this.today.getMonth() + 1;
 var current_year = this.currentDate.getFullYear();
 var current_mOnth= this.currentDate.getMonth();
 var mOnthArr= ["一", "二", "三", "四", "五", "六", "七", "八", "九", "十", "十一", "十二"];
 var min_year=(new Date(this.opts.min_date)).getFullYear();//最小年份
 var start_year=current_year - this.opts.yearOffset>=min_year&＃63;current_year - this.opts.yearOffset:min_year;//下拉框起始年份
 var yearSelect="";
 //如果已经是最小日期，不显示上月按钮
 if (current_year <= min_year && current_month <= 0) {
 yearSelect+='';
 }
 for (var i =start_year; i <= _year; i++) {
 if (i == current_year) {
 yearSelect += '';
 } else {
 yearSelect += '';
 }
 }
 yearSelect += '';
 var mOnthSelect= '';
 }else{
 monthSelect += '>';
 }
 return "" + yearSelect + monthSelect + "";
};
//渲染日历数据
DatePicker.prototype.renderCalendarData = function() {
 var self = this;
 var _year = this.currentDate.getFullYear(); //当前年
 var _mOnth= this.currentDate.getMonth() + 1; //当前月
 var _firstDay = new Date(_year, _month - 1, 1); //当前月第一天
 var tds = this.opts.container.find(".calendar_body td");
 var header = self.renderHeader();
 this.opts.container.find(".calendar_header").html(header);
 tds.each(function(index, item) {
 var _thisDate = new Date(_year, _month - 1, index + 1 - _firstDay.getDay());
 var _thisDay = _thisDate.getDate();
 var _thisMOnth= _thisDate.getMonth() + 1;
 var _thisDateTime=_thisDate.getTime();
 $(item).html(_thisDay).attr("date", _thisDay).removeClass("active").removeClass("disabled").removeClass("today");
 //当前月并且当前选中日期高亮
 if (_thisDay == self.tempActiveDate.getDate().getDate() && _thisMOnth== _month) {
 $(item).addClass("active");
 }
 //今天日期样式
 if (_thisDay == self.todayDate) {
 $(item).addClass("today");
 }
 //非当前月或者大于今天的日期禁用
 if (_thisMonth !== _month || _thisDateTime>self.today.getTime()) {
 $(item).addClass("disabled").removeClass('active today');
 }
 //如果选择的日期大于今天，则日期重置
 if (_thisDateTime>self.today.getTime() && _thisDay == self.todayDate) {
 $(item).addClass("active");
 self.currentDate = _thisDate;
 }
 });
};
//设置当前日期
DatePicker.prototype.setCurrentDate = function(date) {
 this.tempActiveDate.setDate(date);
 this.currentDate = this.tempActiveDate.getDate();
 this.renderCalendarData();
 if(this.opts.updateCallback){
 this.opts.updateCallback.call(null,this.currentDate);
 }
};

//日期段由两个单独日期实例组成
function DateRangePicker() {
 this.start_picker = null;
 this.end_picker = null;
}
DateRangePicker.prototype.init = function(opts) {
 var self = this;
 this.opts = $.extend({
 "pos":"left",//日历位置，靠左或靠右
 "min_date":"1970-01-01",//最小日期
 "updateDateFn":function(){//日期更新回调
 
 }
 }, opts || {});
 this.createCalendarWrap();
 this.$wrap=this.opts.ele.parents(".ui-datepicker");
 this.start_picker = new DatePicker();
 this.end_picker = new DatePicker();
 this.start_picker.init({
 "container": this.$wrap.find(".calendar-container"),
 "min_date":self.opts.min_date,
 "yearOffset": 20,
 "updateCallback": function(){
 self.updateDate();
 }
 });
 this.end_picker.init({
 "container": this.$wrap.find(".calendar-container2"),
 "yearOffset": 20,
 "min_date":self.opts.min_date,
 "updateCallback": function(){
 self.updateDate();
 }
 });
 this.bindEvent();
};
DateRangePicker.prototype.bindEvent = function() {
 var self = this;
 var start_picker = self.start_picker,
 end_picker = self.end_picker;
 this.opts.ele.on("focus",function(){
 self.$wrap.find(".ui-daterangepicker-wrap").show();
 });
 $(".ui-daterangepicker-range").on("click", "[range-key]", function() {
 var _year = start_picker.currentDate.getFullYear();
 var _mOnth= start_picker.currentDate.getMonth();
 var range = $(this).attr("range-key");
 var start_day = start_picker.todayDate,
 end_day = end_picker.todayDate
 switch (range) {
 case "今日":
 start_day = new Date(moment());
 break;
 case "昨日":
 start_day = new Date(moment().subtract(1, 'days'));
 break;
 case "最近7日":
 start_day = new Date(moment().subtract(6, 'days'));
 break;
 case "最近30日":
 start_day = new Date(moment().subtract(30, 'days'));
 break;
 }
 self.setDate(start_day,new Date())
 $(this).addClass("active").siblings("[range-key]").removeClass("active");
 });
 $("html").on("click",function(e){
 var $target=$(e.target);
 if($target.closest(".ui-daterangepicker-wrap").length==0&&$target[0]!=self.opts.ele[0]){
 self.$wrap.find(".ui-daterangepicker-wrap").hide();
 }
 });
};
DateRangePicker.prototype.updateDate = function() {
 var self = this;
 var start_date = moment(self.start_picker.currentDate).format(self.opts.format);
 var end_date = moment(self.end_picker.currentDate).format(self.opts.format);
 var start_date_time=new Date(self.start_picker.currentDate).getTime();
 var end_date_time=new Date(self.end_picker.currentDate).getTime();
 if(start_date_time>new Date().getTime()){
 self.start_picker.setCurrentDate(new Date());
 }
 if(end_date_time>new Date().getTime()){
 self.end_picker.setCurrentDate(new Date());
 }
 if(start_date_time>end_date_time){
 self.opts.ele.val(end_date + "~" + start_date);
 }else{
 self.opts.ele.val(start_date + "~" + end_date);
 }
 $(".ui-daterangepicker-range li").removeClass("active");
 self.opts.updateDateFn.call(null,this.getDate());
};
//获取起始日期和结束日期段,起始日期若大于结束日期则互换
DateRangePicker.prototype.getDate = function() {
 var start_date=Math.min(this.start_picker.currentDate.getTime(),this.end_picker.currentDate.getTime());
 var end_date=Math.max(this.start_picker.currentDate.getTime(),this.end_picker.currentDate.getTime());
 start_date=moment(start_date).format(this.opts.format);
 end_date=moment(end_date).format(this.opts.format);
 return {
 "start_date":start_date,
 "end_date": end_date
 };
};
//设置起始日期和结束日期
DateRangePicker.prototype.setDate = function(start_date, end_date) {
 this.start_picker.setCurrentDate(new Date(start_date));
 this.end_picker.setCurrentDate(new Date(end_date));
 this.updateDate();
};
//创建日期段容器
DateRangePicker.prototype.createCalendarWrap = function() {
 var $parent=this.opts.ele.parents(".ui-datepicker");
 var h=$parent.height(),w=$parent.width();
 var wrap = '开始日期
' +
 '结束日期
' +
 '' +
 '今日' +
 '昨日' +
 '最近7日' +
 '最近30日' +
 '' +
 '';
 $parent.append(wrap);
};
var daterangepicker = new DateRangePicker();
daterangepicker.init({
 "ele": $("#daterange"),
 "pos":"left",
 "min_date": "1990-01-01",
 "format": "YYYY:MM:DD",
 "updateDateFn":function(){
 console.log(daterangepicker.getDate())
 }
});

HTML：

CSS

* {
 margin: 0;
 padding: 0;
}
body{font:14px "微软雅黑";}
li {
 list-style: none;
}
.ui-datepicker{
 display: inline-block;
 position: relative;
}
.ui-calendar {
 margin: 10px;
 width: 260px;
}
.single-calendar{
 border:1px solid #ccc;
 text-align: center;
 box-shadow: 0 0 3px rgba(0,0,0,0.25);
}
.ui-calendar select {
 padding: 3px 10px;
 margin: 0 10px;
}
.calendar_header {
 margin: 10px 0;
 text-align: center;
}
.calendar-table {
 border-collapse: collapse;
}
.calendar-table td {
 padding: 5px 10px;
 cursor: pointer;
 text-align: center;
 border-radius:3px;
}
.calendar-table td.today {
 color: #337ab7;
}
.calendar-table td.active {
 background: #337ab7;
 color:#fff;
}
.calendar-table td.disabled {
 color: #ccc;
 cursor: default;
}
.ui-calendar .next-btn,
.ui-calendar .prev-btn {
 padding:1px 4px;
 border:1px solid transparent;
 border-radius:3px;
 font-weight: bold;
 cursor: pointer;
}
.ui-calendar .next-btn:hover,.ui-calendar .prev-btn:hover{
 border-color:#ccc;
 box-shadow: 0 0 3px rgba(0,0,0,0.25);
}
.ui-daterangepicker-wrap {
 position: absolute;
 top:0;
 width: 740px;
 border: 1px solid #ccc;
 border-radius:3px;
 box-shadow: 0 0 3px rgba(0,0,0,0.25);
 background: #fff;
 overflow: hidden;
 z-index:1000;
 display: none;
}
.calendar-title{
 text-align: center;
}
.ui-daterangepicker-wrap .ui-calendar {
 float: left;
}
.ui-daterangepicker-range{
 width: 150px;
 float: right;
 margin: 10px;
}
.ui-daterangepicker-range ul{
 margin-bottom:20px;
}
.ui-daterangepicker-range li {
 margin:5px 0;
 padding: 5px 10px;
 border-radius:3px;
 background: #f5f5f5;
 cursor: pointer;
}
.ui-daterangepicker-range li:hover,.ui-daterangepicker-range li.active {
 background: #337ab7;
 color:#fff;
}
.ui-daterangepicker-range .range-btn{
 width:60px;
 height: 30px;
 margin-right: 10px;
 border:1px solid #e5e5e5;
 border-radius:3px;
 background: none;
 cursor: pointer;
}
.ui-daterangepicker-range .range-confirm{
 background: #337ab7;
 border-color:#337ab7;
 color:#fff;
}

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！

推荐阅读

正则
HTML5网页模板怎么加百度统计？

本文介绍了如何在HTML5网页模板中加入百度统计，并对模板文件、css样式表、js插件库等内容进行了说明。同时还解答了关于HTML5网页模板的使用方法、表单提交、域名和空间的问题，并介绍了如何使用Visual Studio 2010创建HTML5模板。此外，还提到了使用Jquery编写美好的HTML5前端框架模板的方法，以及制作企业HTML5网站模板和支持HTML5的CMS。 ... [详细]

蜡笔小新 2023-12-11 12:06:41
jquery
前端人员必须知道的三个问题及其发展阶段

本文介绍了前端人员必须知道的三个问题，即前端都做哪些事、前端都需要哪些技术，以及前端的发展阶段。初级阶段包括HTML、CSS、JavaScript和jQuery的基础知识。进阶阶段涵盖了面向对象编程、响应式设计、Ajax、HTML5等新兴技术。高级阶段包括架构基础、模块化开发、预编译和前沿规范等内容。此外，还介绍了一些后端服务，如Node.js。 ... [详细]

蜡笔小新 2023-12-12 12:45:59
react
从零基础到精通的前台学习路线

随着互联网的发展，前台开发工程师成为市场上非常抢手的人才。本文介绍了从零基础到精通前台开发的学习路线，包括学习HTML、CSS、JavaScript等基础知识和常用工具的使用。通过循序渐进的学习，可以掌握前台开发的基本技能，并有能力找到一份月薪8000以上的工作。 ... [详细]

蜡笔小新 2023-12-10 20:05:15
jquery
Java实战之电影在线观看系统的实现

本文介绍了Java实战之电影在线观看系统的实现过程。首先对项目进行了简述，然后展示了系统的效果图。接着介绍了系统的核心代码，包括后台用户管理控制器、电影管理控制器和前台电影控制器。最后对项目的环境配置和使用的技术进行了说明，包括JSP、Spring、SpringMVC、MyBatis、html、css、JavaScript、JQuery、Ajax、layui和maven等。 ... [详细]

蜡笔小新 2023-12-14 15:52:03
hover
CSS3选择器的使用方法详解，提高Web开发效率和精准度

本文详细介绍了CSS3新增的选择器方法，包括属性选择器的使用。通过CSS3选择器，可以提高Web开发的效率和精准度，使得查找元素更加方便和快捷。同时，本文还对属性选择器的各种用法进行了详细解释，并给出了相应的代码示例。通过学习本文，读者可以更好地掌握CSS3选择器的使用方法，提升自己的Web开发能力。 ... [详细]

蜡笔小新 2023-12-14 14:37:52
jquery
Voicewo在线语音识别转换jQuery插件的特点和示例

本文介绍了一款名为Voicewo的在线语音识别转换jQuery插件，该插件具有快速、架构、风格、扩展和兼容等特点，适合在互联网应用中使用。同时还提供了一个快速示例供开发人员参考。 ... [详细]

蜡笔小新 2023-12-13 20:01:16
jquery
解决IE678伪类不兼容问题的方法

本文介绍了解决IE678伪类不兼容问题的方法，包括少用CSS3和HTML5独有的属性，使用CSS hacker，使用last-child清除浮动、批量添加标签、去掉list item最后一个的border-right等技巧。同时还介绍了使用after清除浮动时加上IE独有属性zoom:1的处理方法。另外，本文还提到可以使用jQuery代替批量添加标签的功能，以及使用负边距和CSS2选择器element+element去掉list item最后一个的border-right的方法。 ... [详细]

蜡笔小新 2023-12-13 10:50:43
jquery
Html5-Canvas实现简易的抽奖转盘效果

本文介绍了如何使用Html5和Canvas标签来实现简易的抽奖转盘效果，同时使用了jQueryRotate.js旋转插件。文章中给出了主要的html和css代码，并展示了实现的基本效果。 ... [详细]

蜡笔小新 2023-12-13 06:02:20
jquery
单击时动态创建
元素 - Dynamically create
element on click

Ihavethefollowingonhtml我在html上有以下内容<html><head><scriptsrc..3003_Tes ... [详细]

蜡笔小新 2023-12-12 15:59:36
chrome
响应式页面的概述和实现方式

本文介绍了响应式页面的概念和实现方式，包括针对不同终端制作特定页面和制作一个页面适应不同终端的显示。分析了两种实现方式的优缺点，提出了选择方案的建议。同时，对于响应式页面的需求和背景进行了讨论，解释了为什么需要响应式页面。 ... [详细]

蜡笔小新 2023-12-11 12:37:10
jquery
Android实战——jsoup实现网络爬虫，糗事百科项目的起步

本文介绍了Android实战中使用jsoup实现网络爬虫的方法，以糗事百科项目为例。对于初学者来说，数据源的缺乏是做项目的最大烦恼之一。本文讲述了如何使用网络爬虫获取数据，并以糗事百科作为练手项目。同时，提到了使用jsoup需要结合前端基础知识，以及如果学过JS的话可以更轻松地使用该框架。 ... [详细]

蜡笔小新 2023-12-11 09:19:45
jquery
图片处理应用：固定容器缩略图实现

本文介绍了一种图片处理应用，通过固定容器来实现缩略图的功能。该方法可以实现等比例缩略、扩容填充和裁剪等操作。详细的实现步骤和代码示例在正文中给出。 ... [详细]

蜡笔小新 2023-12-10 18:52:53
正则
lua语言闭包、模式匹配、日期、编译、模块的特性及应用

本文介绍了lua语言中闭包的特性及其在模式匹配、日期处理、编译和模块化等方面的应用。lua中的闭包是严格遵循词法定界的第一类值，函数可以作为变量自由传递，也可以作为参数传递给其他函数。这些特性使得lua语言具有极大的灵活性，为程序开发带来了便利。 ... [详细]

蜡笔小新 2023-12-14 18:18:21
正则
Java实现大数乘法（分治算法）

本文介绍了使用Java实现大数乘法的分治算法，包括输入数据的处理、普通大数乘法的结果和Karatsuba大数乘法的结果。通过改变long类型可以适应不同范围的大数乘法计算。 ... [详细]

蜡笔小新 2023-12-14 15:43:50
正则
Servlet多用户登录时HttpSession会话信息覆盖问题的解决方案

本文讨论了在Servlet多用户登录时可能出现的HttpSession会话信息覆盖问题，并提供了解决方案。通过分析JSESSIONID的作用机制和编码方式，我们可以得出每个HttpSession对象都是通过客户端发送的唯一JSESSIONID来识别的，因此无需担心会话信息被覆盖的问题。需要注意的是，本文讨论的是多个客户端级别上的多用户登录，而非同一个浏览器级别上的多用户登录。 ... [详细]

蜡笔小新 2023-12-10 12:00:40

裂爆传说_818

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章