js实现动态时间功能，实时时间自走动功能

js实现动态时间功能，实时日期自走动功能

效果如下：

html页面js方式实现

1.获取实时日期

     <div id="headerTime"
           class="header-time text">
        <span class="header-time-span1"
              id="tobaccoTime1"></span>
        <span class="header-time-span2 middle"
              id="tobaccoTime2"></span>
        <span class="header-time-span3 middle"
              id="tobaccoTime3"></span>
      </div>

//js部分：
 //获取实时日期
    getTime() {
      let date1 = new Date()
      let year = date1.getFullYear()
      let month = date1.getMonth()
      let day = date1.getDate()
      let xinqi = date1.getDay()
      let w = ['日', '一', '二', '三', '四', '五', '六']
      let hh = date1.getHours()
      let mm = date1.getMinutes()
      let ss = date1.getSeconds()
      //let date = year + "年" + (month + 1) + "月" + day + "日   星期" + xinqi + "  " + hh + ":" + mm + ":" + ss
      let date = year + '年' + (month + 1) + '月' + day + '日'
      //let  week = "星期" +xinqi //星期6
      let week = '星期' + w[xinqi] //星期六
     let realTime = hh + ':' + mm + ':' + ss
      document.getElementById('tobaccoTime1').innerHTML = date
      document.getElementById('tobaccoTime2').innerHTML = week
      document.getElementById('tobaccoTime3').innerHTML = realTime

        console.log(date,week,realTime)  //最终得到时间 2022年11月24日 星期四 16:10:45

    },

 2.设定计时器

<script>
//启动定时器
  var nowtime =0
 nowtime = setInterval(() => {
     getTime()
    }, 1000)
//清除定时器
clearInterval(nowtime)
</script>

 

vue方式实现

  <template>
        <div>
          <span>{{nowDate}}</span>
          <span>{{week}}</span>
        </div>
      </template>

js如下：获取实时读数，进行格式化

<script>
 data() {
  return {
      nowtime: 0,
      nowDate: '2021年8月31日',
      week: '周二',
        
    }
},
 mounted() {
//启动定时器
    this.nowtime = setInterval(() => {
      this.getTime()
    }, 1000)
    this.getWeatherData()
  },
 

  destroyed() {
  //清除定时器
    clearInterval(this.nowtime)
  },
methods: {
//日期格式化
    dateFormat(date, format) {
      format = format || 'yyyy-MM-dd hh:mm:ss'
      if (date !== 'Invalid Date') {
        let o = {
          'M+': date.getMonth() + 1, //month
          'd+': date.getDate(), //day
          'h+': date.getHours(), //hour
          'm+': date.getMinutes(), //minute
          's+': date.getSeconds(), //second
          'q+': Math.floor((date.getMonth() + 3) / 3), //quarter
          S: date.getMilliseconds(), //millisecond
        }
        if (/(y+)/.test(format))
          format = format.replace(
            RegExp.$1,
            (date.getFullYear() + '').substr(4 - RegExp.$1.length)
          )
        for (let k in o)
          if (new RegExp('(' + k + ')').test(format))
            format = format.replace(
              RegExp.$1,
              RegExp.$1.length === 1
                ? o[k]
                : ('00' + o[k]).substr(('' + o[k]).length)
            )
        return format
      }
      return ''
    },
    //获取实时日期
    getTime() {
      const dataTime = new Date()
      this.nowDate =this.dateFormat(dataTime, 'yyyy年MM月dd hh:mm:ss')
      let w = ['日', '一', '二', '三', '四', '五', '六']
      let xinqi = dataTime.getDay()
      this.week = '星期' + w[xinqi] //星期六
    },

}
</script>

注：如果有更简洁的方法，欢迎共享。