1.1.4 • Published 4 years ago
@lvdongy/timedown v1.1.4
预览
地址：https://lvdongy.github.io/timedown/
引入
配合打包工具
npm i @lvdongy/timedown或者使用script标签引入时，可直接拷贝dist文件夹下的 timedown.min.js 到你的项目里引入即可
<script src="./path/timedown.min.js"></script>
<script>
let timer = new Timedown(options);
</script>配置
let timer = new Timedown(options);| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| id | 倒计时实例标识 | any | - |
| endTime | 结束时间（必填）, 传入时间戳或者代表时间的数组，如2021-05-16 16:19:20转换为2021, 5, 16, 16, 19, 20 | number, array | - |
| endText | 结束时显示的文本 | string | '已结束' |
| selector | 将时间值挂载到指定的元素上显示 | string, object（想控制每个单位值可传入对象配置信息，详见下面例子） | - |
| isNotFormatNode | 是否去除默认时间格式（小于10在前面补充'0'） | boolean | false |
| format | 时间格式 | string | '{d}天 {hh}:{mm}:{ss}' |
| endCallback | 倒计时结束时的回调（回调函数接收该倒计时实例的id） | function | - |
用法
1. 配置selector字段挂载到对应的元素显示
<div class="time"></div>let timer = new Timedown({
id: 1,
endTime: Date.now() + 1000 * 60 * 1,
endText: 'ok',
selector: '.time',
endCallback: handleTimeEnd
})2. 使用一个对象配置selector
<span class="time-d"></span>
<span>日</span>
<span class="time-h"></span>
<span>:</span>
<span class="time-m"></span>
<span>:</span>
<span class="time-s"></span>let timer = new Timedown({
id: 2,
endTime: Date.now() + 1000 * 60 * 60 * 24 * 10,
selector: {
value: '.time', // 完整的倒计时字符串
day: '.time-d', // 天数
h: '.time-h', // 小时
m: '.time-m', // 分钟
s: '.time-s' // 秒钟
},
// 默认情况下，h，m，s在小于10时会自动在前面补上‘0’
// 如果不需要则将 isNotFormatNode 设为 true
isNotFormatNode: true,
})3. 对于响应式系统，可直接使用实例的属性（例如Vue）
<div>{{timer.value}}</div>data(){
return {
timer: null,
}
}
mounted(){
this.timer = new Timerdown({
id: 2,
// 2023-06-06 12:12:12
endTime: [2030, 6, 6, 12, 12, 12],
format: '⏰: {d}个日落与日出，{h}个小时，{mm}分{ss}秒',
})
}想要更细致的控制，还可以直接使用实例的其他属性：day（天数），h（小时）， m（分钟）， s（秒钟）, 这些属性的值都会保持更新。
<p>{{timer.day}}</p>
<p>{{timer.h}}</p>
<p>{{timer.m}}</p>
<p>{{timer.s}}</p>