整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
鋒網訊，距離下一場最愛歌手的演唱會還有多長時間？距離奧運會開幕還有多久？距離新年的到來還有多少天？如果你對即將發生的某個事件充滿期待的話，你一定會在心里想著它究竟還有多少天才會到來，正是因為這些期待，插件 CountdownLS 應運而生。
從名字或許你就能夠猜到，CountdownLS 會將一個倒計時時鐘放置在鎖屏界面中，并以天數、小時數、分鐘數以及秒數作為顯示，除了提供的功能之外，CountdownLS 也有著不錯的顏值，極簡化的設計也和蘋果的設計語言所吻合。
要安裝 CountdownLS 你需要前往這里（可能要掛 VPN）下載插件文件，然后需要用到鎖屏小工具插件例如 lockHTML，如果你使用的是 lockHTML，你甚至可以通過長按的方式來在屏幕中移動倒計時時鐘。要修改日期和時間，你需要對“js”文件夾下的 config.js 文件進行編輯。在文件中你也可以修改項目的名字，這樣就能取代原來默認的“WWDC”字樣。
當然，為設備選擇一張漂亮的壁紙的話，就能夠更好地和倒計時時鐘搭配起來。
npm install -S hzqing-vue-timeline
main.js:
// 全局注冊 import hzqingVueTimeline from 'hzqing-vue-timeline' Vue.use(hzqingVueTimeline) <hzqing-vue-timeline></hzqing-vue-timeline>
引入組件
<hzqing-vue-timeline timelineColor="#5bbcd5" timeContentColor="#fff" :dataList="data" ></hzqing-vue-timeline>
組件數據
data: [
{
time: 1522372393000,
img: 'static/touxiang.jpeg',
title: 'hzqing.com',
content: '這是衡釗清的個人博客'
},
{
time: '2018-03-30 14:36:35',
img: 'static/one.jpeg',
title: '這是一個簡單的vue時間軸插件',
content: '這是一個簡單的vue時間軸插件，使用非常的方便'
},
{
time: 1522372393000,
img: 'static/three.jpg',
title: '努力奮斗',
content: '當你發現你的才華撐不起野心時，就請安靜下來學習吧~~~'
}
]
屏幕寬度大于1200px
屏幕寬度小于1200px
https://gitee.com/hzqing/hzqing-vue-timeline
于jq制作簡單的日期插件，源代碼簡單易懂
<script src="https://lf3-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>
下面是源代碼
/*
$('input').eq(0).date({
start:'2010-02-03',開始時間 格式 '2010' ||'2010-02'默認為1974-1-1
current:'2018-02-03',當前時間，格式 '2010' ||'2010-02'默認為本地當前時間
end:'2020-02-03',結束時間，格式 '2010' ||'2010-02'默認為本地當前時間
success:function(date){回調函數，date用戶點擊確定時返回的時間參數
console.log(date);
}
});
*/
jQuery.prototype.date=function(obj) {
if($('#date').length>0)$('#date').remove();
var _this=this;
var date=new Date();
var start=obj.start !=undefined ? obj.start.split('-') : [1974,1,1];
var end=obj.end !=undefined ? obj.end.split('-') : [date.getFullYear(),date.getMonth()+1,date.getDate()];
var current=obj.current !=undefined ? obj.current.split('-') : [date.getFullYear(),date.getMonth()+1,date.getDate()];
start[0]=start[0]!=undefined ? start[0] : 1974;
start[1]=start[1]!=undefined ? start[1] : 1;
start[2]=start[2]!=undefined ? start[2] : 1;
end[0]=end[0]!=undefined ? end[0] : date.getFullYear();
end[1]=end[1]!=undefined ? end[1] : date.getMonth()+1;
end[2]=end[2]!=undefined ? end[2] : date.getDate();
current[0]=current[0]!=undefined ? current[0] : date.getFullYear();
current[1]=current[1]!=undefined ? current[1] : date.getMonth()+1;
current[2]=current[2]!=undefined ? current[2] : date.getDate();
//console.log(start,end,current)
_this.date.month=current[1];
_this.date.year=current[0];
var box_top='<div style="width:100%;height:50px;border-bottom:1px solid #ccc;"><a class="date_a_prev" style="'+_this.date.css.box_top_a+'" href="javascript：;"><</a><select style="'+_this.date.css.box_top_select+'padding-left:10px;">';
//注入年份
var selected_year;
_this.date.value=current[0];
for(var i=start[0];i<=end[0];i++){
selected_year=i==current[0] ? 'selected' : ' ';
box_top +='<option value="'+i+'" '+selected_year+'>'+i+'</option>';
}
box_top +='</select><select style="'+_this.date.css.box_top_select+'padding-left:18px;">';
//注入月份
box_top +=_this.date.injection_month(start,end,current);
//注入日歷
box_top +='</select><a style="'+_this.date.css.box_top_a+'" class="date_a_next" href="javascript：;">></a></div>';
var box_center_li='<ul style="margin:0;padding:0;">';
var date=new Date();
date.setMonth(_this.date.month-1);//獲取當前月份
date.setFullYear(current[0]); //獲取當前年份
box_center_li +=_this.date.getDateList(date,start,end);
box_center_li +='</ul>';
var box_center='<div style="width:100%;height:260px;">'+box_center_li+'</div>';
var box_bottom='<div style="width:100%;height:38px;background:#fff;border-top:1px solid #ccc;"><button style="'+_this.date.css.box_bottom_button+'">取消</button><span style="'+_this.date.css.box_bottom_span+'">'+current[0]+'-'+current[1]+'-'+current[2]+'</span><button style="'+_this.date.css.box_bottom_button+'">確定</button></div>';
$('body').append('<div id="date" style="Z-index:10000;width:300px;height:350px;border:1px solid #ccc;background:#fff;position:absolute;top:'+parseInt(_this.offset().top+_this.height())+'px;left:'+parseInt(_this.offset().left+_this.width())+'px;" >'+box_top+box_center+box_bottom+'</div>');
$('#date select').eq(0).on('change',function(){//年份
_this.date.year=this.value;
$('#date select').eq(1).empty().append(_this.date.injection_month(start,end,current,this));
var obj=new Date();
obj.setMonth(_this.date.month-1);//獲取當前月份
obj.setFullYear(this.value); //獲取當前年份
$('#date ul').eq(0).empty().append(_this.date.getDateList(obj,start,end));
});
$('#date select').eq(1).on('change',function(){//月份
_this.date.month=this.value;
var obj=new Date();
obj.setMonth(this.value-1);//獲取當前月份
obj.setFullYear(_this.date.year); //獲取當前年份
$('#date ul').eq(0).empty().append(_this.date.getDateList(obj,start,end));
});
$('#date').on('click','a.date_a_prev',function(){//上個月
//console.log($('#date select').get(0).selectedIndex)
//console.log($('#date select').get(0).options.length);
var select_one_index=$('#date select').get(0).selectedIndex;
var select_two_index=$('#date select').get(1).selectedIndex;
if(select_two_index > 0){
$('#date select').get(1).selectedIndex=select_two_index-1;
//console.log($('#date select').get(1).options[select_two_index-1].value);
_this.date.month=$('#date select').get(1).options[select_two_index-1].value;
var obj=new Date();
obj.setMonth(_this.date.month-1);//獲取當前月份
obj.setFullYear(_this.date.year); //獲取當前年份
$('#date ul').eq(0).empty().append(_this.date.getDateList(obj,start,end));
}else{
if(select_one_index>0){
_this.date.year=$('#date select').get(0).options[select_one_index-1].value;
$('#date select').get(0).selectedIndex=select_one_index-1;
_this.date.month=12;
$('#date select').eq(1).empty().append(_this.date.injection_month(start,end,current,$('#date select').get(0)));
var obj=new Date();
obj.setMonth(11);//獲取當前月份
obj.setFullYear(_this.date.year); //獲取當前年份
$('#date ul').eq(0).empty().append(_this.date.getDateList(obj,start,end));
}
}
});
$('#date').on('click','a.date_a_next',function(){//下個月
//console.log($('#date select').get(0).selectedIndex)
//console.log($('#date select').get(0).options.length);
var select_one_index=$('#date select').get(0).selectedIndex;
var select_two_index=$('#date select').get(1).selectedIndex;
var select_one_option=$('#date select').get(0).options.length;
var select_two_option=$('#date select').get(1).options.length;
if(select_two_index < select_two_option-1){
//console.log(select_two_index , select_two_option)
$('#date select').get(1).selectedIndex=select_two_index+1;
//console.log($('#date select').get(1).options[select_two_index+1].value);
_this.date.month=$('#date select').get(1).options[select_two_index+1].value;
var obj=new Date();
obj.setMonth(_this.date.month-1);//獲取當前月份
obj.setFullYear(_this.date.year); //獲取當前年份
$('#date ul').eq(0).empty().append(_this.date.getDateList(obj,start,end));
}else{
if(select_one_index < select_one_option-1){
//console.log(select_one_index , select_one_option);
$('#date select').get(0).selectedIndex=select_one_index+1;
_this.date.year=$('#date select').get(0).options[select_one_index+1].value;
_this.date.month=1;
$('#date select').eq(1).empty().append(_this.date.injection_month(start,end,current,$('#date select').get(0)));
var obj=new Date();
obj.setMonth(0);//獲取當前月份
obj.setFullYear(_this.date.year); //獲取當前年份
$('#date ul').eq(0).empty().append(_this.date.getDateList(obj,start,end));
}
}
});
//鼠標經過時
$('#date').on('mouseenter','li.bg',function(){
this.style.background='#ccc';
})
$('#date').on('mouseleave','li.bg',function(){
this.style.background='#eee';
})
$('#date').on('click','li.bg',function(){
$('#date span').html($('#date select').eq(0).val()+'-'+$('#date select').eq(1).val()+'-'+$(this).html());
//console.log();
});
$('#date').on('click','button:first',function(){
//console.log(obj);
$('#date').remove();
});
$('#date').on('click','button:last',function(){
//console.log(obj);
obj.success($('#date span').html());
$('#date').remove();
});
}
//注入月份函數
jQuery.prototype.date.injection_month=function(start,end,current,_this){
if(arguments.length==3){
var start_month=current[0]==start[0]&&start[1]!=undefined ? start[1] : 1;
var end_month=current[0]==end[0]&&end[1]!=undefined ? end[1] : 12;
var year_flag=current[0]==start[0] ? 'start' : current[0]==end[0] ? 'end' : 'center';
}else {
var start_month=_this.value==start[0]&&start[1]!=undefined ? start[1] : 1;
var end_month=_this.value==end[0]&&end[1]!=undefined ? end[1] : 12;
var year_flag=_this.value==start[0] ? 'start' : _this.value==end[0] ? 'end' : 'center';
}
var month='';
var selected_month='';
var selected_id='';
//console.log(this.month)
for(var i=start_month;i<=end_month;i++){
if(i==this.month) {
selected_month='selected';
selected_id=i;
}
month +='<option value="'+i+'" '+selected_month+'>'+i+'</option>';
selected_month=' ';
}
if(selected_id==''){
month='';
selected_id=year_flag=='start' ? start_month : year_flag=='end' ? end_month : this.month;
for(var i=start_month;i<=end_month;i++){
selected_month=selected_id==i ? 'selected' : ' ';
month +='<option value="'+i+'" '+selected_month+'>'+i+'</option>';
}
}
this.month=selected_id!='' ? selected_id : 1;
return month;
}
//獲取本月有多少天
jQuery.prototype.date.getDateNum=function(month,year,start,end){
var day30=[4, 6, 9, 11];
var day31=[1, 3, 5, 7, 8, 10, 12];
var date_array=[];
var type=start[0]==year&&start[1]==month&&year==end[0]&&end[1]==month ? 'current' : start[0]==year&&start[1]==month ? 'start' : year==end[0]&&end[1]==month ? 'end' : 'center';
this.checkDay=function(num,type){
if(type=='end'){
num=parseInt(num);
//console.log(typeof num);
for(var i=1;i<num+1;i++){
date_array[i]=i;
}
return date_array;
}else if(type=='start'){
num=parseInt(num);
if ($.inArray(month,day30 )>=0) { //月份為30天
for(var i=num;i<31;i++){
date_array[i]=i;
}
return date_array;
} else if ($.inArray(month, day31)>=0) { //月份為31天
for(var i=num;i<32;i++){
date_array[i]=i;
}
return date_array;
} else { //2月份
if (parseInt(year) % 4==0 || parseInt(year) % 400==0) { //29天
for(var i=num;i<30;i++){
date_array[i]=i;
}
return date_array;
} else { //28天
for(var i=num;i<29;i++){
date_array[i]=i;
}
return date_array;
}
}
}else if(type=='current'){
if ($.inArray(month,day30 )>=0) { //月份為30天
for(var i=num.start;i<num.end;i++){
date_array[i]=i;
}
return date_array;
} else if ($.inArray(month, day31)>=0) { //月份為31天
for(var i=num.start;i<num.end;i++){
date_array[i]=i;
}
return date_array;
} else { //2月份
if (parseInt(year) % 4==0 || parseInt(year) % 400==0) { //29天
for(var i=num.start;i<num.end;i++){
date_array[i]=i;
}
return date_array;
} else { //28天
for(var i=num.start;i<num.end;i++){
date_array[i]=i;
}
return date_array;
}
}
}else if(type=='center'){
if ($.inArray(month,day30 )>=0) { //月份為30天
for(var i=1;i<31;i++){
date_array[i]=i;
}
return date_array;
} else if ($.inArray(month, day31)>=0) { //月份為31天
for(var i=1;i<32;i++){
date_array[i]=i;
}
return date_array;
} else { //2月份
if (parseInt(year) % 4==0 || parseInt(year) % 400==0) { //29天
for(var i=1;i<30;i++){
date_array[i]=i;
}
return date_array;
} else { //28天
for(var i=1;i<29;i++){
date_array[i]=i;
}
return date_array;
}
}
}
}
if(type=='start'){
return this.checkDay(start[2],'start');
}else if(type=='end'){
return this.checkDay(end[2],'end');
}else if(type=='current'){
return this.checkDay({'start':start[2],'end':parseInt(end[2])+1},'current');
}else {
return this.checkDay(null,'center');
}
}
jQuery.prototype.date.getDateList=function(obj,start,end){
obj.setDate(1); // 設置日期為1,
var Dday=obj.getDay(); //獲取當月第一天是星期幾
var Dmonth=obj.getMonth();//獲取當前月份
var Dyear=obj.getFullYear(); //獲取當前年份
var date_num=this.getDateNum(Dmonth+1,Dyear,start,end);
//console.log(date_num);
var box_center_li='';
var day_array=['日','一','二','三','四','五','六'];
for(var i=0;i<day_array.length;i++){
box_center_li +='<li style="'+this.css.box_center_li+'background:#fff;">'+day_array[i]+'</li>';
}
for(var i=0;i<Dday;i++){
box_center_li +='<li style="'+this.css.box_center_li+'background:#f5f5f5;"></li>';
}
for(var i=1;i<date_num.length;i++){
//console.log(date_num[i])
if(date_num[i]!=undefined){
box_center_li +='<li class="bg" style="'+this.css.box_center_li+'background:#eee;">'+date_num[i]+'</li>';
}else {
box_center_li +='<li style="'+this.css.box_center_li+'background:#eee;"></li>';
}
}
for(var i=0;i<42-(date_num.length+Dday-1);i++){
box_center_li +='<li style="'+this.css.box_center_li+'background:#f5f5f5;"></li>';
}
return box_center_li;
}
jQuery.prototype.date.css={
box_top_a:'display:inline-block;color:#000;width:50px;height:50px;line-height:50px;text-align:center;vertical-align: middle;text-decoration:none;font-size:30px;font-weight:bold;',
box_top_select:'width:82px;height:30px;border:1px solid #ccc;text-align:center;padding:0px 5px;box-sizing: border-box;font-size:18px;vertical-align:middle;margin:0 9px;',
box_center_li:'margin:1px;list-style-type:none;width:13.61%;height:35px;float:left;text-align:center;line-height:35px;cursor:pointer;',
box_bottom_span:'display:inline-block;width:50%;height:38px;vertical-align:middel;text-align:center;line-height:38px;',
box_bottom_button:'width:25%;height:38px;border:0;font-size:20px;color:#000;background:#fff;cursor:pointer;'
}
效果動畫
如果你遇到了前端難題或php難題，你可以留下你的評論，本人會盡力幫你解決
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
