vue获取当前时间

于 2020-11-12 18:13:22 发布
阅读量4.8k 收藏 6
点赞数 1
CC 4.0 BY-SA版权
分类专栏： # Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/milijiangjun/article/details/109650097
本文介绍了使用JavaScript和Vue.js两种方式来获取当前时间的方法。在Vue应用中，通过在`app.vue`组件中实现相关代码，可以达到同样的时间显示效果。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

js 方式实现

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>实现一个简单动态的当前时间</title>
	  
</head>
<body  onload="time()">
	 <script type="text/javascript">
        var t = null;
        t = setTimeout(time,1000);//开始执行
        function time(){
        clearTimeout(t);//清除定时器
        var d=new Date();
        var n=d.getFullYear();
        var y=d.getMonth()+1;
        var r=d.getDate();
        var x=d.getDay();
        var h=d.getHours();
        var m=d.getMinutes();
        var s=d.getSeconds();
        var weekday=new Array(7)
            weekday[0]="日";
            weekday[1]="一";
            weekday[2]="二";
            weekday[3]="三";
            weekday[4]="四";
            weekday[5]="五";
            weekday[6]="六";
        function ling(i){
            if(i<10){
                i = '0' + i;
            }
            return i;
        }
        document.getElementById("timeShow").innerHTML =n+"年"+ling(y)+"月"+ling(r)+"日"+"星期"+weekday[x]+" "+ling(h)+":"+ling(m)+":"+ling(s);
        t = setTimeout(time,1000); //设定定时器，循环执行
    }
    </script>
    <div id="timeShow"></div>
</body>
</html>

效果
在这里插入图片描述
vue方式
实现
app.vue 中实现


<style scoped>
/*  
html {
  font-size: 100%;
   width: 1920px; 
  height: 1080px;
} */

/* 1920*1080 */
/* top 头部 */
/* content map 地图 */
/* 天气 */
/* 标题 */
/* 时间 */
/* 环保监测指标  monitor*/
/* 应急管理 */
/* 环保监测指标 */
/* #app{
    font:normal 100% Arial,sans-serif; font-size:1.0rem;
    width:100%;
    height:100%; 
     
  } */
#app {
  width: 100%;
  height: 100%;
  min-width: 1920px;
  min-height: 1080px;
  position: absolute;
  display: flex;
  flex-direction: column;
}

#nav_top {
  width: 100%;
  min-height: 72px;
  height: 6.666667%;
  /* background: red; */
  background: url("./assets/oneimg/title_bg_normal.png");
}
/* top */
/* topl */
#nav_top_l {
  width: 20%;
   
  height: 100%;
  line-height: 100%;
  opacity: 1;
  float: left;
 /* background-color: red; */
}

#nav_top_l div {
  float: left;
}
#cityimg {
  margin-left: 29px;
  line-height: 72px;
}
#cityimg img {
  width: 20px;
  height: 20px;
}
#cityname {
  width: 40%;
  min-width: 100px;
  max-width: 100px;
  margin-top: 24px;
  margin-left: 10px;
  height: 20px;
  cursor: pointer;

  font-size: 16px;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #FFFFFF;
}
#cityweather_c {
  width: 40%;
  min-width: 100px;
  max-width: 100px;
  margin-top: 23px;
  margin-left: 10px;
  height: 20px;

  font-size: 16px;
  font-family: DINAlternate-Bold, DINAlternate;
  font-weight: bold;
  color: #FFFFFF;
  line-height: 20px;
}
#cityweather {
  line-height: 72px;
  height: 72px;
}

#cityweather img {
  width: 25px;
  height: 25px;
}
#nav_top_c {
  
   opacity: 1;
  width :60%;
  height: 100%;
  float: left; 
  /* background: yellow; */
}
#nav_top_c div {
  width :396px; 
  height :50px;
  margin:8px  auto 14px auto ;
  
  font-size: 36px;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #FFFFFF;
  line-height: 50px;
}
#nav_top_r {
  width: 20%; 
  height: 100%;
  line-height: 100%;
  opacity: 1;
  float: right;
  /* background:black; */
}
#nav_top_r div{
  float :right;
  height :72px;
  
}
#dayimg{
  margin :23px 33px 0 10px ;
}
#daytime{ 
  width: 70%;
  line-height:70px; 
  height :70px;
  font-size: 16px;
  font-family: DINAlternate-Bold, DINAlternate;
  font-weight: bold;
  color: #FFFFFF;
  text-align: right;
}
/* top */
#nav_map {
  width: 100%;
  flex: 1;
  background: #ccc;
}
#nav_monitor_left {
  width: 360px;
  height: 308px;
  z-index: 1px;
  background: violet;
  position: absolute;
  top: 120px;
  left: 32px;
}
#nav_monitor_leftb {
  width: 360px;
  height: 310px;
  z-index: 1px;
  background: violet;
  position: absolute;
  top: 484px;
  left: 32px;
}
#nav_monitor_right {
  width: 360px;
  height: 800px;
  z-index: 1px;
  background: violet;
  position: absolute;
  top: 120px;
  right: 32px;
}
</style>

<template>
  <div id="app">
    <!-- <div @click="open();" >点我</div>
    <img src="./assets/logo.png"> -->
    <!-- <router-view/> -->
    <!-- 头部界面 -->
    <div id="nav_top">
      <div id="nav_top_l">
        <div id="cityimg">
          <img src="./assets/oneimg/location_icon_normal.png" alt="" />
        </div>
        <div id="cityname">防城港防城港</div>
        <div id="cityweather_c">19°C～24°C</div>
        <div id="cityweather">
          <img src="./assets/oneimg/weather_icon_sunny.png" alt="" />
        </div>
      </div>
      <div id="nav_top_c">
        <div>环保预警服务平台一张图</div> </div>
      <div id="nav_top_r">
        
        <div id="dayimg" >
          <img src="./assets/oneimg/home_icon_normal.png" alt="">
        </div>
        <div id="daytime" >
          
          {{ShowData}}
        </div>
      </div>
    </div>
    <div id="nav_map" @click="a();">
      地图

      <!-- 伸缩栏 -->
      <!-- <el-collapse accordion>
 <el-collapse-item>
  <template slot="title">
   一致性 Consistency<i class="header-icon el-icon-info"></i>
  </template>
  <div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>
  <div>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div>
 </el-collapse-item>
 <el-collapse-item title="反馈 Feedback">
  <div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>
  <div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>
 </el-collapse-item>
 <el-collapse-item title="效率 Efficiency">
  <div>简化流程：设计简洁直观的操作流程；</div>
  <div>清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；</div>
  <div>帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。</div>
 </el-collapse-item>
 <el-collapse-item title="可控 Controllability">
  <div>用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</div>
  <div>结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。</div>
 </el-collapse-item>
</el-collapse> -->
      <!-- 伸缩栏 -->
    </div>

    <div id="nav_monitor_left" @click="b();">监测</div>
    <div id="nav_monitor_leftb">监测</div>
    <div id="nav_monitor_right">监测</div>
    <!-- <el-radio v-model="radio" label="1">备选项</el-radio>
  <el-radio v-model="radio" label="2">备选项</el-radio>
   <el-row id="nav_map" type="flex" class="row-bg" align="bottom">
  <el-input v-model="input" placeholder="请输入内容"></el-input> -->
  </div>
</template>

<script>
export default {
  name: "App",
  mounted() {},
  data() {
    return {
      radio: "1",
      input: "",//el demos
      ShowData : ""

    };
  },
   // 销毁定时器
  beforeDestroy() {
    if (this.formatDate) {
      clearInterval(this.formatDate); // 在Vue实例销毁前，清除时间定时器
    }
  },
  mounted() {
    this.currentTime();
  },
  methods: {
    currentTime() {
      setInterval(this.formatDate, 500);
    },formatDate() {
      let date = new Date();
      let year = date.getFullYear(); // 年
      let month = date.getMonth() + 1; // 月
      let day = date.getDate(); // 日
      let week = date.getDay(); // 星期
      let weekArr = [ "星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六" ];
      let hour = date.getHours(); // 时
      hour = hour < 10 ? "0" + hour : hour; // 如果只有一位，则前面补零
      let minute = date.getMinutes(); // 分
      minute = minute < 10 ? "0" + minute : minute; // 如果只有一位，则前面补零
      let second = date.getSeconds(); // 秒
      second = second < 10 ? "0" + second : second; // 如果只有一位，则前面补零
      this.ShowData = `${year}年${month}月${day}日 ${hour}:${minute}:${second} ${weekArr[week]}`;
    },
    a(){alert("地图");},
    b(){alert("层");}

  },
};
</script>


<style>
/* #app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
} */
</style>

实现效果同上
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值