整合營(yíng)銷服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢熱線:

          如何在JavaScript/Vue中獲取當(dāng)前時(shí)間并格式化輸出精確到時(shí)分秒

          ue 示例

          在JavaScript或Vue中獲取當(dāng)前時(shí)間并格式化輸出到精確的時(shí)分秒,你可以使用Date對(duì)象結(jié)合字符串拼接或者模板字符串來(lái)實(shí)現(xiàn)。下面是一個(gè)簡(jiǎn)單示例,展示了如何在Vue中完成這項(xiàng)任務(wù):

          <template>
            <div>
              <p>當(dāng)前時(shí)間:{{ formattedTime }}</p>
            </div>
          </template>
          
          <script>
          export default {
            data() {
              return {
                formattedTime: ''
              };
            },
            mounted() {
              this.updateTime();
              setInterval(this.updateTime, 1000); // 每秒更新一次
            },
            methods: {
              updateTime() {
                const now = new Date();
                // 使用模板字符串進(jìn)行格式化
                this.formattedTime = `${now.getFullYear()}-${this.padZero(now.getMonth() + 1)}-${this.padZero(now.getDate())} ${this.padZero(now.getHours())}:${this.padZero(now.getMinutes())}:${this.padZero(now.getSeconds())}`;
              },
              // 輔助函數(shù),用于補(bǔ)零操作
              padZero(num) {
                return num < 10 ? '0' + num : num;
              }
            },
            beforeDestroy() {
              // 清除定時(shí)器,避免內(nèi)存泄漏
              clearInterval(this.timer);
            }
          };
          </script>

          在這個(gè)示例中,我們?cè)赩ue組件的mounted生命周期鉤子中初始化了一個(gè)定時(shí)器,每秒鐘調(diào)用updateTime方法來(lái)更新當(dāng)前時(shí)間,并在組件銷毀前通過(guò)beforeDestroy鉤子清理定時(shí)器。

          updateTime方法中,我們創(chuàng)建了一個(gè)新的Date對(duì)象來(lái)獲取當(dāng)前時(shí)間,然后使用模板字符串和輔助函數(shù)padZero來(lái)確保月份、日期、小時(shí)、分鐘和秒數(shù)如果是個(gè)位數(shù),則在其前補(bǔ)零,以便格式統(tǒng)一和美觀。

          這樣,頁(yè)面上就會(huì)顯示一個(gè)實(shí)時(shí)更新的當(dāng)前時(shí)間,格式為“年-月-日 時(shí):分:秒”。

          Vue3 Composition API 示例

          在Vue3中,雖然一些API和寫(xiě)法有所變化,但獲取和格式化當(dāng)前時(shí)間的基本邏輯與Vue2相似。以下是使用Vue3 Composition API的一個(gè)示例:

          <template>
            <div>
              <p>當(dāng)前時(shí)間:{{ formattedTime }}</p>
            </div>
          </template>
          
          <script setup>
          import { ref, onMounted, onBeforeUnmount } from 'vue';
          
          const formattedTime = ref('');
          let timer = null;
          
          const updateTime = () => {
            const now = new Date();
            formattedTime.value = `${now.getFullYear()}-${padZero(now.getMonth() + 1)}-${padZero(now.getDate())} ${padZero(now.getHours())}:${padZero(now.getMinutes())}:${padZero(now.getSeconds())}`;
          };
          
          const padZero = (num) => {
            return num < 10 ? '0' + num : num;
          };
          
          onMounted(() => {
            updateTime();
            timer = setInterval(updateTime, 1000); // 每秒更新一次
          });
          
          onBeforeUnmount(() => {
            // 清除定時(shí)器
            clearInterval(timer);
          });
          </script>

          在這個(gè)Vue3的示例中,我們使用了Composition API來(lái)管理狀態(tài)和生命周期鉤子。ref用于定義響應(yīng)式數(shù)據(jù)formattedTime,而onMounted和onBeforeUnmount分別替代了Vue2中的mounted和beforeDestroy生命周期鉤子。

          updateTime函數(shù)和padZero輔助函數(shù)的功能與Vue2示例相同,用于獲取當(dāng)前時(shí)間并進(jìn)行格式化處理,以及在數(shù)字小于10時(shí)前面添加零。

          這樣,你就可以在Vue3應(yīng)用中實(shí)現(xiàn)實(shí)時(shí)更新并格式化顯示當(dāng)前時(shí)間的功能。

          TypeScript 公共函數(shù)封裝

          使用TypeScript可以為你的代碼增加類型安全。下面是如何封裝一個(gè)獲取并格式化當(dāng)前時(shí)間的公共函數(shù),這個(gè)函數(shù)可以在Vue3的項(xiàng)目中作為公共方法使用。

          首先,在你的Vue3項(xiàng)目的某個(gè)公用文件夾(如src/utils)下創(chuàng)建一個(gè)名為dateTimeUtils.ts的文件,并編寫(xiě)如下代碼:

          // src/utils/dateTimeUtils.ts
          
          export function formatCurrentTime(): string {
            const now = new Date();
            return `${now.getFullYear()}-${padZero(now.getMonth() + 1)}-${padZero(now.getDate())} ${padZero(now.getHours())}:${padZero(now.getMinutes())}:${padZero(now.getSeconds())}`;
          }
          
          function padZero(num: number): string {
            return num < 10 ? '0' + num : num.toString();
          }
          

          這個(gè)模塊導(dǎo)出了一個(gè)formatCurrentTime函數(shù),它返回當(dāng)前時(shí)間的格式化字符串。同時(shí),內(nèi)部使用了padZero輔助函數(shù)來(lái)保證數(shù)字的格式正確。

          然后,在你的Vue3組件中,你可以這樣使用這個(gè)公共函數(shù):

          // 某個(gè)Vue3組件.vue文件
          
          <script setup lang="ts">
          import { onMounted, ref } from 'vue';
          import { formatCurrentTime } from '@/utils/dateTimeUtils'; // 根據(jù)你的實(shí)際路徑調(diào)整
          
          const formattedTime = ref('');
          
          onMounted(() => {
            formattedTime.value = formatCurrentTime();
            setInterval(() => {
              formattedTime.value = formatCurrentTime();
            }, 1000);
          });
          </script>
          
          <template>
            <div>
              <p>當(dāng)前時(shí)間:{{ formattedTime }}</p>
            </div>
          </template>

          這里,我們導(dǎo)入了formatCurrentTime函數(shù),并在組件掛載時(shí)設(shè)置初始值,之后每秒更新一次顯示的時(shí)間。注意,為了避免潛在的內(nèi)存泄漏,如果組件需要銷毀時(shí)停止時(shí)間更新,你可能還需要在適當(dāng)?shù)纳芷阢^子中清除定時(shí)器,正如之前Vue2和Vue3 Composition API示例中所示。不過(guò),在此示例中為了保持簡(jiǎn)潔,省略了該部分代碼。

          段時(shí)間發(fā)的五子棋的游戲很多小伙伴都私聊讓再做個(gè),今天小猿圈web前端講師為大家分享的是CSS3動(dòng)畫(huà)練習(xí)案例:用CSS3做個(gè)鐘表,想玩的小伙伴記得自己運(yùn)行一下呦。

          自學(xué)CSS3屬性之后,我們來(lái)用一個(gè)小案例進(jìn)行一個(gè)綜合練習(xí),這個(gè)案例主要是動(dòng)畫(huà)的應(yīng)用,我們就用純css動(dòng)畫(huà)做一個(gè)能走字的鐘表。

          首先我們來(lái)準(zhǔn)備HTML來(lái)布局一下:

          <body>

          <div class="clock">

          <div class="line1"></div>

          <div class="line2"></div>

          <div class="line3"></div>

          <div class="line4"></div>

          <div class="line5"></div>

          <div class="line6"></div>

          <div class="cent"></div>

          <div class="cover"></div>

          <div class="hour"></div>

          <div class="minute"></div>

          <div class="seconds"></div>

          </div>

          </body>

          布局很簡(jiǎn)單,六根直線通過(guò)旋轉(zhuǎn)一定角度做刻度一個(gè)中間小圓點(diǎn),一個(gè)遮罩來(lái)蓋住六根直線的中間部分,使直線變成刻度,后面三個(gè)是時(shí)分秒針。

          下面通過(guò)CSS把鐘表的大概樣子設(shè)置出來(lái)。

          .clock {

          /* 創(chuàng)建圓形盒子當(dāng)做表盤(pán) */

          width: 200px;

          height: 200px;

          margin: 100px auto;

          position: relative;

          border: 10px solid #000;

          border-radius: 50%;

          }

          .clock div:nth-child(-n+6) {

          /* 選中前6個(gè)子元素做出6條線當(dāng)做表的刻度 */

          width: 6px;

          height: 200px;

          background-color: #aaa;

          position: absolute;

          left: 50%;

          margin-left:-3px;

          }

          /* 讓6條線遞增旋轉(zhuǎn)30度 */

          .clock div:nth-child(1) {

          transform: rotate(30deg);

          }

          .clock div:nth-child(2) {

          transform: rotate(60deg);

          }

          .clock div:nth-child(3) {

          transform: rotate(90deg);

          background-color: #333;

          }

          .clock div:nth-child(4) {

          transform: rotate(120deg);

          }

          .clock div:nth-child(5) {

          transform: rotate(150deg);

          }

          .clock div:nth-child(6) {

          transform: rotate(0deg);

          background-color: #333;

          }

          /* 中心小圓點(diǎn) */

          .cent {

          width: 20px;

          height: 20px;

          background-color: #000;

          border-radius: 50%;

          position:absolute;

          z-index: 3;

          left: 50%;

          top:50%;

          margin: -10px 0 0 -10px;

          z-index:2;

          }

          /* 遮住線的中間部分,讓線成為刻度 */

          .cover {

          width: 180px;

          height: 180px;

          border-radius: 50%;

          background-color: #fff;

          position:absolute;

          left: 50%;

          top:50%;

          margin:-90px 0 0 -90px;

          }

          后面加上中心圓點(diǎn)和遮罩,讓它看起來(lái)像個(gè)表盤(pán)。

          接下來(lái)我們就可以準(zhǔn)備表針和動(dòng)畫(huà)了。

          /* 時(shí)針制作 */

          .hour {

          width: 6px;

          height: 50px;

          background-color: #000;

          position:absolute;

          left: 50%;

          top:100px;

          margin-left: -3px;

          animation: clockrotate 43200s steps(43200) infinite linear;

          transform-origin: top center;

          }

          /* 分針制作 */

          .minute {

          width: 60px;

          height: 6px;

          background-color: #555;

          position:absolute;

          left:40px;

          top:50%;

          margin-top: -3px;

          animation: clockrotate 3600s steps(3600) infinite;

          transform-origin: center right;

          }

          /* 秒針制作 */

          .seconds {

          width: 4px;

          height: 70px;

          background-color:red;

          position: absolute;

          left:50%;

          top:30px;

          margin-left: -2px;

          animation: clockrotate 60s steps(60) infinite ;

          transform-origin: bottom center;

          }

          /* 設(shè)置動(dòng)畫(huà)序列 */

          @keyframes clockrotate {

          form{

          }

          to {

          transform: rotate(360deg);

          }

          }

          設(shè)置每個(gè)針的動(dòng)畫(huà)是旋轉(zhuǎn)360度,根據(jù)時(shí)、分、秒來(lái)計(jì)算動(dòng)畫(huà)執(zhí)行完畢需要的時(shí)間和步數(shù),加個(gè)infinite無(wú)限執(zhí)行,另外還要注意表針旋轉(zhuǎn)的中心點(diǎn)設(shè)置。

          上述就是小猿圈老師針對(duì)CSS3動(dòng)畫(huà)練習(xí)案例:用CSS3做個(gè)鐘表介紹,相信你對(duì)web前端也是有一定的了解的,如果遇到不會(huì)的問(wèn)題可以到小猿圈去尋找答案的,里面有最新最全面的視頻教程等你來(lái)學(xué)習(xí),只要你想學(xué)習(xí)編程這里都有。

          時(shí)器類型及語(yǔ)法

          • setTimeout 只執(zhí)行一次的定時(shí)器
          • clearTimeout 關(guān)閉執(zhí)行一次的定時(shí)器
          • setInterval 反復(fù)執(zhí)行的定時(shí)器
          • clearInterval 關(guān)閉反復(fù)執(zhí)行的定時(shí)器

          簡(jiǎn)單用法:

          //定時(shí)器調(diào)用函數(shù),并給定時(shí)器命名
          var time1 = setTimeout(myalert,2000); 
          var time2 = setInterval(myalert,2000);
          //停止指定定時(shí)器
          clearTimeout(time1);
          clearInterval(time2);
          function myalert(){
           alert('ok!');
          }
          //簡(jiǎn)寫(xiě)(匿名函數(shù)代替即可)
          var time1 = setTimeout(
           function(){
           alert('ok!');
           },2000);
          

          實(shí)用的例子:

          1、 動(dòng)態(tài)顯示當(dāng)前時(shí)間

          效果圖:


          主站蜘蛛池模板: 亚洲第一区精品日韩在线播放| 亚洲AV一区二区三区四区| 精品人妻中文av一区二区三区| 波多野结衣一区在线| 一区二区三区人妻无码 | 国产精品一区二区四区| 亚洲国产一区在线| 亚洲综合色自拍一区| 亚洲国产成人久久综合一区77 | 精品一区二区三区3d动漫| 亚洲乱色熟女一区二区三区蜜臀| 国产精品一区二区久久国产| а天堂中文最新一区二区三区| 日韩精品一区二区三区国语自制| 一区二区和激情视频| 91精品福利一区二区| 中日韩精品无码一区二区三区| 亚洲一区二区成人| 亚洲av午夜福利精品一区人妖| 国产一区二区免费| 亚洲日韩精品无码一区二区三区 | 好爽毛片一区二区三区四| 亚洲国产一区二区三区| 成人午夜视频精品一区| 99精品国产高清一区二区三区| 黑人大战亚洲人精品一区| 国产日韩一区二区三区在线观看 | 色老板在线视频一区二区| 中文字幕一区二区区免| 91国在线啪精品一区| 国产亚洲福利精品一区| 久久久久人妻精品一区二区三区| 久久久av波多野一区二区| 美女视频一区三区网站在线观看| 亚洲日韩AV一区二区三区中文| 国产乱码精品一区二区三区四川人 | 色狠狠AV一区二区三区| 亚洲色精品VR一区区三区| 久久中文字幕无码一区二区 | 福利一区二区在线| 精品国产一区二区三区AV性色|