diff --git a/src/components/clock/clock.ts b/src/components/clock/clock.ts index 2b2ec97..389b59b 100644 --- a/src/components/clock/clock.ts +++ b/src/components/clock/clock.ts @@ -21,15 +21,19 @@ export class StarClock extends LitElement { @state() rotateHour = 0 @state() rotateMinute = 0 @state() rotateSecond = 0 - private _date = 0 - set date(val: number) { - this._date = val - val && this.dateUpdated(val) - } - @property({type: Number}) + + private _date: String = '0' + @property({type: String}) get date() { return this._date } + set date(val: String) { + console.log(val, 'val') + // 1664942295167 (长度13) // Wed Oct 05 2022 11:58:40 GMT+0800 (中国标准时间) + let dateMy = val.length <= 13 ? Number(val) : String(val) + val && this.dateUpdated(dateMy) + } + @query('.star-clock') starClock: HTMLDivElement | undefined getTransparentClock() { @@ -110,8 +114,8 @@ export class StarClock extends LitElement { } } } - protected dateUpdated(date: any) { - let timeMy = new Date(Number(date)) + dateUpdated(date: any){ + let timeMy = new Date(date) let hour = timeMy.getHours() let minute = timeMy.getMinutes() let second = timeMy.getSeconds() @@ -128,12 +132,14 @@ export class StarClock extends LitElement { this.style.setProperty('--rotateSecondAfter',this.rotateSecond + 360 + 'deg') this.style.setProperty('--rotateMinuteAfter',this.rotateMinute + 360 + 'deg') this.style.setProperty('--rotateHourAfter', this.rotateHour + 360 + 'deg') - this.resizeFun() + } + protected firstUpdated() { + this.resize() window.addEventListener('resize', () => { - this.resizeFun() + this.resize() }) } - protected resizeFun(){ + protected resize(){ let min = Math.min( this.starClock?.clientHeight || 100, this.starClock?.clientWidth || 100 diff --git a/src/test/panels/clock/clock.ts b/src/test/panels/clock/clock.ts index 2a4ff1a..7c70382 100644 --- a/src/test/panels/clock/clock.ts +++ b/src/test/panels/clock/clock.ts @@ -5,7 +5,7 @@ export class PanelClock extends LitElement { @property() foo = '' @state() - date = 0 + date: any = '0' render() { return html`