站内所涉及的公司名称、商标、产品等均为其各自所有者所有的资产,站点内使用仅供用于识别。站点内使用的所有游戏图片、游戏文案等其他素材,其版权为游戏权利方所有。
如有异议请发邮件至:bwiki@bilibili.com,或联系客服QQ:1968897839。
如果希望显示隐藏日文注释,请前往 参数设置-小工具 取消勾选“隐藏日文注释”并保存,等待缓存刷新。
可以在 参数设置-小工具 中设置首页主题。
欢迎加入WIKI交流群,群号:945590010
欢迎加入QQ频道【突击莉莉】,点击加入
用户讨论:丩卩夂忄/活动日历
◀ | ▶ | |||||
---|---|---|---|---|---|---|
◀ | ▶ | |||||
日 | 一 | 二 | 三 | 四 | 五 | 六
|
0 | 0 | 0 | 0 | 0 | 0 | 0 |
0 | 0 | 0 | 0 | 0 | 0 | 0 |
0 | 0 | 0 | 0 | 0 | 0 | 0 |
0 | 0 | 0 | 0 | 0 | 0 | 0 |
0 | 0 | 0 | 0 | 0 | 0 | 0 |
0 | 0 | 0 | 0 | 0 | 0 | 0 |
活动:守护天使之誓
活动时间:$START~$END
活动:被强化过的朋友
活动时间:$START~$END
这一天 枫·若昂·努韦勒 $AGE
这一天是 郭神琳的生日
使用说明
JS
本页面使用的HTML&WIKI文本
因为使用了浏览器中无法展示的nowiki
标签,所以请进入编辑页复制
{|id="EC" class="wikitable noselect" style="width:100%;text-align:center" |- !id="ECYM"|◀ !colspan=5 id="ECY" data-notice="想穿越去哪一年?"| !id="ECYP"|▶ |- !id="ECMM"|◀ !colspan=5 id="ECM"| !id="ECMP"|▶ |- !日||一||二||三||四||五||六 {{#loop:||6| {{!}}-{{#loop:||7| {{!}}class="ECD"{{!}}0}}}} |}
数据格式说明
在页面中填写数据
- 创建
class="ECData"
的元素<span class="ECData"></span>
- 添加属性
data-type
,="event"
或="birthday"
,分别对应活动信息和生日信息<span class="ECData" data-type="event"></span>
<span class="ECData" data-type="birthday"></span>
- 当
data-type="event"
时,添加属性data-start="y/m/d"
和data-end="y/m/d"
,分别对应活动的开始日期和结束日期,虚位不补0<span class="ECData" data-type="event" data-start="2021/1/20" data-end="2021/1/31"></span>
- 当
data-type="birthday"
时,添加属性data-date="m/d"
,虚位不补0<span class="ECData" data-type="birthday" data-date="1/1"></span>
- 可选属性:
data-start-year="y"
,使日历只在指定年份后显示生日<span class="ECData" data-type="birthday" data-date="1/1" data-start-year="2020"></span>
- 可选属性:
- 当
- 添加属性
data-title="内容"
,表示鼠标悬浮在日期格时显示的摘要信息<span class="ECData" data-type="event" data-start="2021/1/20" data-end="2021/1/31" data-title="守护天使之誓"></span>
- 在元素内添加内容,表示在点击日期格时显示的详细信息
<span class="ECData" data-type="event" data-start="2021/1/20" data-end="2021/1/31" data-title="守护天使之誓">[[活动:守护天使之誓]]</span>
- 特殊字段
- 当
data-type="event"
时,$START
和$END
会分别被替换为活动开始日期和活动结束日期<span class="ECData" data-type="event" data-start="2021/1/20" data-end="2021/1/31" data-title="守护天使之誓">[[活动:守护天使之誓]]<br>活动时间:$START~$END</span>
- 当
data-type="birthday"
,且有属性data-start-year="y"
时,$AGE
会被替换为年龄<span class="ECData" data-type="birthday" data-date="1/1" data-title="枫·若昂·努韦勒" data-start-year="2020">这一天{{莉莉头像|枫·若昂·努韦勒}} $AGE</span>
- 当
- 特殊字段
本页面使用的数据
<span class="ECData" data-type="event" data-start="2021/1/20" data-end="2021/1/31" data-title="守护天使之誓">[[活动:守护天使之誓]]<br>活动时间:$START~$END</span> <span class="ECData" data-type="event" data-start="2021/1/31" data-end="2021/2/10" data-title="被强化过的朋友">[[活动:被强化过的朋友]]<br>活动时间:$START~$END</span> <span class="ECData" data-type="birthday" data-date="1/1" data-title="枫·若昂·努韦勒" data-start-year="2020">这一天{{莉莉头像|枫·若昂·努韦勒}} $AGE</span> <span class="ECData" data-type="birthday" data-date="2/6" data-title="郭神琳">这一天是{{莉莉头像|郭神琳}}的生日</span>
在JS中填写数据
- 在
ECMeta.data
中
{ "event":[ ["详细信息","开始日期y/m/d","结束日期y/m/d","摘要信息"], ["详细信息","开始日期y/m/d","结束日期y/m/d","摘要信息"], //…… ], "birthday":{ "生日m/d":[["详细信息",开始年份(如无填false),"摘要信息"]], "生日m/d":[["详细信息",开始年份(如无填false),"摘要信息"],["详细信息",开始年份(如无填false),"摘要信息"]],//如果同一天有多个生日 }, }
样式说明
- 日历表格基础样式
#EC{}
整个日历表格的样式#ECY{}
年份的样式#ECM{}
月份的样式#ECYM{}
年份减的样式#ECYP{}
年份加的样式#ECMM{}
月份减的样式#ECMP{}
月份加的样式.ECD{}
日期格的样式
- 表格展示样式
.lastMonth{}
上个月的日期格样式.nextMonth{}
下个月的日期格样式.thisMonth{}
这个月的日期格样式.today{}
今天的日期格样式.birthday{}
有生日信息的日期格样式.eventStart{}
有活动开始信息的日期格样式.eventEnd{}
有活动结束信息的日期格样式.eventGoing{}
有活动进行信息的日期格样式
- 其他样式
#ECInfo{}
弹出详细信息的样式.ECData div{}
弹出详细信息中区块的样式.ECData{}
页面填写数据信息的样式,如无特殊需要,建议display:none;
利用CSS的特性,创建更加复杂的组合样式吧
本页面使用的样式
.ECData{ display:none; } .lastMonth,.nextMonth{ opacity:0.3; } .eventGoing{ background-color:lightgreen; color:green; } .eventStart{ background-color:green; color:yellow; } .eventEnd{ background-color:firebrick; color:yellow; } .eventStart.eventEnd{ background-color:orange; color:blue; } .birthday{ background-color:violet; color:yellow; } .today{ background-color:blue; color:white; font-weight:bold; } .birthday.today{ background-color:red; color:yellow; } #ECInfo{ left:10%; top:10%; width:80%; height:80%; background-color:white; border:2px solid; border-radius:25px; padding:2em; overflow:auto; } #ECInfo div{ margin-bottom:0.5em; }
操作说明
- 点击年份的单元格,弹出输入框,输入年份可以直接跳转
- 弹出框的提示文本由年份单元格的属性
data-notice="内容"
控制,如果不填写,默认提示为:想穿越去哪一年?
- 弹出框的提示文本由年份单元格的属性
- 点击月份的单元格,直接跳转回当前系统时间的年月
- 鼠标悬浮在日期单元格,展示当日摘要信息
- 点击日期单元格,展示当日详细信息
- 在详细信息显示时,点击外围透明黑边以关闭详细信息