JS 动态时间栏实时显示当前时间，时间走动实现

最新推荐文章于 2024-05-10 09:50:01 发布

Rio_Gaven

最新推荐文章于 2024-05-10 09:50:01 发布

阅读量331

点赞数 2

文章标签： javascript 前端 java

本文链接：https://blog.csdn.net/Rio_Gaven/article/details/137070988

版权

效果：

代码（直接copy就完事）：

<view class="left">
   <view class="timeOne">{{time1}}</view>
   <view class="timeTwo">
     <text style="margin-right: 10rpx">{{time2}}</text>
     <text>{{time3}}</text>
   </view>
</view>

data () {
    return {
        time1: '',
        time2: '',
        time3: ''
    }
  },

onShow(){
    this.time()
    setInterval(()=>{this.time()},1000)
 },

methods: {
    time(){
		let vWeek, vWeek_s, vDay;
		vWeek = ["星期天", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
		let date =  new Date();
		let year = date.getFullYear();
		let month = date.getMonth() + 1;
		let day = date.getDate();
		let hours = date.getHours().toString().padStart(2, "0");;
		let minutes = date.getMinutes().toString().padStart(2, "0");;
		let seconds = date.getSeconds().toString().padStart(2, "0");;
		vWeek_s = date.getDay();
		let time = year + "年" + month + "月" + day + "日" + "\t" + hours + ":" + minutes +         
                   ":" + seconds + "\t" + vWeek[vWeek_s]
        this.time1 = hours + ":" + minutes + ":" + seconds
        this.time2 = month + "月" + day + "日"
        this.time3 = vWeek[vWeek_s]
	}
}

.left{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
      .timeOne{
         font-weight: 400;
         font-size: 48rpx;
         color: #1D1B1A;
       }
       .timeTwo{
          font-weight: normal;
          font-size: 26rpx;
          color: #6A6A6A;
       }
}