doctype html
>
<
html
lang
="en"
>
<
head
>
<
meta
charset
="utf-8"
>
<
title
>title
title
>
<
script
src=""
>
script
>
<
style
>
* ul
body
#calendar
.month
.month ul
.year-month
.year-month:hover
.choose-year
.choose-month
.arrow
.arrow:hover
.month ul li
.weekdays
.weekdays li
.days
.days li
.days li .active
.days li .other-month
.days li:hover
style
>
head
>
<
body
>
<
div
id="calendar"
>
<
div
class
="month"
>
<
ul>
<
li class
="arrow"
@click
="pickpre(currentyear,currentmonth)"
>❮
li>
<
li class
="year-month"
@click
="pickyear(currentyear,currentmonth)"
>
<
span
class
="choose-year"
>}
span
>
<
span
class
="choose-month"
>}月
span
>
li>
<
li class
="arrow"
@click
="picknext(currentyear,currentmonth)"
>❯
li>
ul>
div>
<
ul class
="weekdays"
>
<
li>一
li>
<
li>二
li>
<
li>三
li>
<
li>四
li>
<
li>五
li>
<
li style
="color:red"
>六
li>
<
li style
="color:red"
>日
li>
ul>
<
ul class
="days"
>
<
li
v-for
="dayobject in days"
>
<
span
v-if
="dayobject.day.getmonth()+1 != currentmonth"
class
="other-month"
>}
span
>
<
span
v-else
>
<
span
v-if
=" dayobject.issign===true"
class
="active"
>}
span
>
<
span
v-else
>}
span
>
span
>
li>
ul>
div>
<
script
>
varmyvue
=new
vue(,
created:
function
() ,
methods:
else
this
.currentday
=date.getdate();
this
.currentyear
=date.getfullyear();
this
.currentmonth
=date.getmonth() +1
;
this
.currentweek
=date.getday();
//1...6,0if(
this
.currentweek ==0
)
varstr
=this
.formatdate(
this
.currentyear ,
this
.currentmonth,
this
.currentday);
this
.days.length =0
;
//今天是週日，放在第一行第7個位置，前面6個
//初始化本週
for(
vari
=this
.currentweek -1
; i
>=
0; i
--) ;
//用乙個物件包裝date物件 以便為以後預定功能新增屬性
dayobject.day=d;
this
.days.push(dayobject);
//將日期放入data 中的days陣列 供頁面渲染使用
}
//其他周
for(
vari =1
; i
<=42-
this
.currentweek; i
++) ;
dayobject
=
this
.days.push(dayobject);}},
isverdate (v) ,
pickpre:
function
(year, month) ,
picknext:
function
(year, month) ,
pickyear:
function
(year, month) ,
//返回 類似 2016-01-02 格式的字串
formatdate:
function
(year,month,day),
},});
script
>
body
>
html
>
個人部落格
簽到日曆外掛程式
1 html 2 css ul,libody.checkin.clear clearfix after clearfix for ie6 ie7 title.title p.title a.checkin lili.able qiandaoli.checked.mask.modala.closebt...
PHP 日曆簽到模組
create table create table tb signinfo id int 10 unsigned not null auto increment comment 記錄每條簽到詳情 memberid int 11 default null comment 關聯member表id sig...
vue打卡日曆 Vue日曆
new vue else date new date this.currentday date.getdate this.currentyear date.getfullyear this.currentmonth date.getmonth 1 this.currentweek date.getd...