帮助:计时器
完整功能（非模板化）
基本结构
- 创建
class="NewTimer"元素，将用于包裹整个计时器，后文称其为“根元素”- 例如：
<span class="NewTimer"></span>
- 例如：
- 为根元素设置
data-start=计时开始时间，data-end=计时结束时间，完整格式均形如YYYY/MM/DD HH:MM:SS- 例如：
<span class="NewTimer" data-start="2021/11/22 02:26:30" data-end="2021/11/30 16:30:00"></span>
可以对不需要的精度进行省略，形如YYYY/MM/DD HH:MM（省略了秒）等 - 例如：
data-start="2021/11/22 02:26" data-end="2021/11/30 16:30"
- 例如：
- 为根元素创建四个子元素，分别为
class="displayTimer"、class="NotStart"class="StartButNotEnd"、class="End"，后文称第一个为“显示元素”，后三个为“内容元素”- 例如：
<span class="NewTimer" data-start="2021/11/22 02:26:30" data-end="2021/11/30 16:30:00"> <span class="displayTimer"></span> <span class="NotStart"></span> <span class="StartButNotEnd"></span> <span class="End"></span> </span>
- 例如：
内容结构
- 显示元素是最终显示内容的元素，一般来说内容直接留空即可
- 内容元素的内容分别为系统时间“未达到
data-start”（尚未开始）显示的内容、“达到data-start但未达到data-end”（正在进行）显示的内容、“达到data-end”（已经结束）显示的内容：尚未开始 .NotStart 正在进行 .StartButNotEnd 已经结束 .End
- 例如：
<span class="NewTimer" data-start="2021/11/22 02:26:30" data-end="2021/11/30 16:30:00"> <span class="displayTimer"></span> <span class="NotStart">活动尚未开始，准备好战斗了吗？</span> <span class="StartButNotEnd">活动正在进行，赶快肝起来。</span> <span class="End">活动已经结束嘞！</span> </span>
- 例如：
当系统时间满足条件时，显示元素内就会显示对应元素内的内容
如无特殊需要，建议为内容元素设置样式style="display:none"
显示格式
- 显示格式请参考MediaWiki:NewTimer.js格式说明部分，在此只做演示，请通过源代码查看
{{JS|NewTimer}}
<span class="NewTimer" data-start="2021/3/4 02:26:30" data-end="2021/3/10 16:30">
<span class="displayTimer" style="display:block"></span>
<span class="NotStart">
现在是%nyear年%nmonth月%ndate日%nhour时%nmin分%nsec秒<br>
现在是%nyear年%nMonth月%nDate日%nHour时%nMin分%nSec秒（补前导零）<br>
<br>
%syear年%smonth月%sdate日%shour时%smin分%ssec秒开始<br>
%syear年%sMonth月%sDate日%sHour时%sMin分%sSec秒开始（补前导零）<br>
<br>
%eyear年%emonth月%edate日%ehour时%emin分%esec秒结束<br>
%eyear年%eMonth月%eDate日%eHour时%eMin分%eSec秒结束（补前导零）<br>
<br>
距离开始还有~sd天~sh时~sm分~ss秒<br>
或者说还有~sH时~sm分~ss秒<br>
或者说还有~sM分~ss秒<br>
或者说还有~sS秒<br>
<br>
距离结束还有~ed天~eh时~em分~es秒<br>
或者说还有~eH时~em分~es秒<br>
或者说还有~eM分~es秒<br>
或者说还有~eS秒<br>
</span>
<span class="StartButNotEnd">
现在是%nyear年%nmonth月%ndate日%nhour时%nmin分%nsec秒<br>
现在是%nyear年%nMonth月%nDate日%nHour时%nMin分%nSec秒（补前导零）<br>
<br>
%syear年%smonth月%sdate日%shour时%smin分%ssec秒开始<br>
%syear年%sMonth月%sDate日%sHour时%sMin分%sSec秒开始（补前导零）<br>
<br>
%eyear年%emonth月%edate日%ehour时%emin分%esec秒结束<br>
%eyear年%eMonth月%eDate日%eHour时%eMin分%eSec秒结束（补前导零）<br>
<br>
距离开始已经过去~sd天~sh时~sm分~ss秒<br>
或者说已经过去~sH时~sm分~ss秒<br>
或者说已经过去~sM分~ss秒<br>
或者说已经过去~sS秒<br>
<br>
距离结束还有~ed天~eh时~em分~es秒<br>
或者说还有~eH时~em分~es秒<br>
或者说还有~eM分~es秒<br>
或者说还有~eS秒<br>
</span>
<span class="End">
现在是%nyear年%nmonth月%ndate日%nhour时%nmin分%nsec秒<br>
现在是%nyear年%nMonth月%nDate日%nHour时%nMin分%nSec秒（补前导零）<br>
<br>
%syear年%smonth月%sdate日%shour时%smin分%ssec秒开始<br>
%syear年%sMonth月%sDate日%sHour时%sMin分%sSec秒开始（补前导零）<br>
<br>
%eyear年%emonth月%edate日%ehour时%emin分%esec秒结束<br>
%eyear年%eMonth月%eDate日%eHour时%eMin分%eSec秒结束（补前导零）<br>
<br>
距离开始已经过去~sd天~sh时~sm分~ss秒<br>
或者说已经过去~sH时~sm分~ss秒<br>
或者说已经过去~sM分~ss秒<br>
或者说已经过去~sS秒<br>
<br>
距离结束已经过去~ed天~eh时~em分~es秒<br>
或者说已经过去~eH时~em分~es秒<br>
或者说已经过去~eM分~es秒<br>
或者说已经过去~eS秒<br>
</span>
</span>
{{#tag:bstyle|
.NewTimer .NotStart,.NewTimer .StartButNotEnd,.NewTimer .End{
display:none;
}
}}
|
现在是%nyear年%nmonth月%ndate日%nhour时%nmin分%nsec秒 |
- 支持和HTML元素互动，例如：
<span class="NewTimer" data-start="2001/1/1">
<span class="displayTimer"></span>
<span class="End">
<div class="barB"><div class="bar" style="width:calc(%nhour/23*100%)">%nhour </div></div>
<div class="barB"><div class="bar" style="width:calc(%nmin/59*100%)">%nmin </div></div>
<div class="barB"><div class="bar" style="width:calc(%nsec/59*100%)">%nsec </div></div>
</span>
</span>
※注：限于WIKI文本特性所致，实际使用须删除所有换行，此处做了美化
{{#tag:bstyle|
.barB{
width:100%
height:2em;
border:1px black solid;
}
.bar{
height:2em;
background-color:pink;
text-align:right;
line-height:2em;
}
}}
|
|
|
特殊
- 计时器默认所在的时区为GMT+8，如有需要，可以为根元素设置
data-gmt=时区- 例如：
<span class="NewTimer" data-start="2021/11/22 02:26:30" data-end="2021/11/30 16:30:00" data-gmt="+9"></span>
- 例如：
模板化功能
待补充
沪公网安备 31011002002714 号