123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217 |
- Component({
-
- lifetimes: {
- attached: function () {
-
-
- this.setItemStyle();
- this.properties.autoplay && this.properties.timestamp && this.start();
- },
- detached: function () {
-
- clearInterval(this.properties.timer);
- this.properties.timer = null;
- },
- },
-
- attached: function () {
-
-
- this.properties.autoplay && this.properties.timestamp && this.start();
- },
- detached: function () {
-
- clearInterval(this.properties.timer);
- this.properties.timer = null;
- },
-
- observers: {
- 'height,borderColor,bgColor,fontSize,color':function(){
- this.setItemStyle();
- }
- },
- properties: {
- timestamp: {
- type:Number,
- value:0,
- observer:function(newVal,oldVal,changePath){
-
- this.clearTimer();
- this.start();
- }
- },
- autoplay:{
- type:Boolean,
- value:true
- },
-
- separator: {
- type: String,
- value: 'colon'
- },
-
- separatorSize: {
- type: [Number, String],
- value: 30
- },
-
- separatorColor: {
- type: String,
- value: "#303133"
- },
-
- color: {
- type: String,
- value: '#303133'
- },
-
- fontSize: {
- type: [Number, String],
- value: 30
- },
-
- bgColor: {
- type: String,
- value: '#fff'
- },
-
- height: {
- type: [Number, String],
- value: 'auto'
- },
-
- showBorder: {
- type: Boolean,
- value: false
- },
-
- borderColor: {
- type: String,
- value: '#303133'
- },
- showSeconds:{
- type:Boolean,
- value:true
- },
- showMinutes:{
- type:Boolean,
- value:true
- },
- showHours:{
- type:Boolean,
- value:true
- },
- showDays:{
- type:Boolean,
- value:true
- },
- hideZeroDay:{
- type:Boolean,
- value:false
- },
- },
-
- data: {
- d: '00',
- h: '00',
- i: '00',
- s: '00',
- timer: null,
- seconds: 0,
- itemStyle:'',
- letterStyle:''
- },
-
- methods: {
- setItemStyle(){
- let style = '';
- if(this.height) {
- style += `height:${this.properties.height}rpx`;
- style += `width:${this.properties.height}rpx`;
- }
- if(this.properties.showBorder) {
- style += `border-style:solid;`
- style += `border-color:${this.properties.borderColor};`
- style += `border-width:1px;`
- }
- if(this.properties.bgColor) {
- style += `background-color:${this.properties.bgColor};`
- }
- let ls = '';
- if(this.properties.fontSize) ls += `font-size:${this.properties.fontSize}rpx;`
- if(this.properties.color) ls += `color:${this.properties.color};`
- this.setData({itemStyle:style,letterStyle:ls});
- },
-
- start() {
-
- this.clearTimer();
- if (this.properties.timestamp <= 0) return;
- this.properties.seconds = Number(this.properties.timestamp);
- this.formatTime(this.properties.seconds);
- this.properties.timer = setInterval(() => {
- this.properties.seconds--;
-
- this.triggerEvent('change', {seconds:this.properties.seconds}, {})
- if (this.properties.seconds < 0) {
- return this.end();
- }
- this.formatTime(this.properties.seconds);
- }, 1000);
- },
-
- formatTime(seconds) {
-
- seconds <= 0 && this.end();
- let [day, hour, minute, second] = [0, 0, 0, 0];
- day = Math.floor(seconds / (60 * 60 * 24));
-
-
- hour = Math.floor(seconds / (60 * 60)) - day * 24;
-
- let showHour = null;
- if (this.properties.showDays) {
- showHour = hour;
- } else {
-
- showHour = Math.floor(seconds / (60 * 60));
- }
- minute = Math.floor(seconds / 60) - hour * 60 - day * 24 * 60;
- second = Math.floor(seconds) - day * 24 * 60 * 60 - hour * 60 * 60 - minute * 60;
-
- showHour = showHour < 10 ? '0' + showHour : showHour;
- minute = minute < 10 ? '0' + minute : minute;
- second = second < 10 ? '0' + second : second;
- day = day < 10 ? '0' + day : day;
- this.setData({
- d:day,
- h:showHour,
- i:minute,
- s:second
- })
-
- },
-
- end() {
- this.clearTimer();
- this.triggerEvent('end', {}, {})
- },
-
- clearTimer() {
- if (this.properties.timer) {
-
- clearInterval(this.properties.timer);
- this.properties.timer = null;
- }
- }
- }
- })
|