我的编程空间，编程开发者的网络收藏夹
学习永远不晚
位置：首页-资讯-前端开发

Vue-cli框架实现计时器应用

2024-04-02 19:55

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号
获取短信验证
立即预约

请填写图片验证码后获取短信验证码

看不清楚，换张图片

免费获取短信验证码

Vue-cli框架实现计时器应用

技术背景

本应用使用 vue-cli 框架，并使用了自定义组件（将按钮拆分成单独的组件）和vue 模板。

使用说明

开始正计时：点击工具栏的“开始正计时”按钮即可，快捷键为"Enter"键。

开始倒计时：在输入框内写入时间后，点击“开始倒计时”按钮，即可开始倒计时。

暂停计时器：点击“暂停计时器”按钮即可暂停。

清空正/倒计时：点击此按钮，计时器便会回到初始状态，等待新的计时。

重新再计时：点击此按钮，计时器便会重新开始此次计时。

恢复计时器：点击此按钮即可从暂停状态中恢复。

代码

首先初始化项目


vue init webpack <project name>

components文件夹中放入文件：CounterButton.vue


<template>
  <div>
    <button v-bind:class="styleObject" v-on:click="$emit('click-button')">{{ text }}</button>
  </div>
</template>

<script>
export default {
  name: "CounterButton",
  props: {
    text: String
  },
  data: function() {
    return {
      styleObject: {
        countup: false,
        countdown: false,
        clear: false,
        pause: false,
        restart: false,
        resume: false
      }
    };
  },
  created: function() {
    if (this.text == "开始正计时") {
      this.styleObject.countup = true;
    } else if (this.text == "开始倒计时") {
      this.styleObject.countdown = true;
    } else if (this.text == "清空倒计时" || this.text == "清空正计时") {
      this.styleObject.clear = true;
    } else if (this.text == "暂停计时器") {
      this.styleObject.pause = true;
    } else if (this.text == "重新再计时") {
      this.styleObject.restart = true;
    } else if (this.text == "恢复计时器") {
      this.styleObject.resume = true;
    }
  }
};
</script>

<style>
.countup {
  background-color: #2188e9;
  border-radius: 5px;
  border-color: #2188e9;
  position: absolute;
  left: 310px;
  top: 15px;
  width: 98px;
  height: 40px;
  font-family: PingFangSC-Regular, "PingFang SC", sans-serif;
  font-size: 16px;
  color: #ffffff;
}

.countdown {
  background-color: #2188e9;
  border-radius: 5px;
  border-color: #2188e9;
  position: absolute;
  left: 428px;
  top: 15px;
  width: 98px;
  height: 40px;
  font-family: PingFangSC-Regular, "PingFang SC", sans-serif;
  font-size: 16px;
  color: #ffffff;
}

.clear {
  background-color: #dd2e1d;
  border-radius: 5px;
  border-color: #dd2e1d;
  position: absolute;
  left: 964px;
  top: 15px;
  width: 98px;
  height: 40px;
  font-family: PingFangSC-Regular, "PingFang SC", sans-serif;
  font-size: 16px;
  color: #ffffff;
}

.pause {
  background-color: #2188e9;
  border-radius: 5px;
  border-color: #2188e9;
  position: absolute;
  left: 227px;
  top: 15px;
  width: 98px;
  height: 40px;
  font-family: PingFangSC-Regular, "PingFang SC", sans-serif;
  font-size: 16px;
  color: #ffffff;
}

.restart {
  background-color: #ffb020;
  border-radius: 5px;
  border-color: #ffb020;
  position: absolute;
  left: 1082px;
  top: 15px;
  width: 98px;
  height: 40px;
  font-family: PingFangSC-Regular, "PingFang SC", sans-serif;
  font-size: 16px;
  color: #ffffff;
}

.resume {
  background-color: #2188e9;
  border-radius: 5px;
  border-color: #2188e9;
  position: absolute;
  left: 227px;
  top: 15px;
  width: 98px;
  height: 40px;
  font-family: PingFangSC-Regular, "PingFang SC", sans-serif;
  font-size: 16px;
  color: #ffffff;
}
</style>

将App.vue改为


<template>
  <div id="app">
    <div class="toolbar">
      <div v-show="initialSeen">
        <input v-model="hour" id="hour" />

        <input v-model="minute" id="minute" />

        <input v-model="second" id="second" />

        <span id="hourlabel">时</span>

        <span id="minutelabel">分</span>

        <span id="secondlabel">秒</span>

        <counter-button text="开始正计时" v-on:click-button="startCountUp" id="countup"></counter-button>

        <counter-button text="开始倒计时" v-on:click-button="startCountDown" id="countdown"></counter-button>
      </div>

      <span id="hint" v-show="hintSeen">{{ hint }}</span>

      <counter-button v-bind:text="clearText" v-on:click-button="clearCounter" v-show="clearSeen" id="clear"></counter-button>
      <counter-button text="暂停计时器" v-on:click-button="pauseCounter" v-show="pauseSeen" id="pause"></counter-button>
      <counter-button text="重新再计时" v-on:click-button="restartCounter" v-show="restartSeen" id="restart"></counter-button>
      <counter-button text="恢复计时器" v-on:click-button="resumeCounter" v-show="resumeSeen" id="resume"></counter-button>
    </div>
    <span id="time">{{ time }}</span>
  </div>
</template>

<script>
import CounterButton from "./components/CounterButton";
export default {
  name: "App",
  data: function() {
    return {
      status: 1,
      // status---1: before start; 2: up timing; 3: down timing; 4: up pausing;
      // 5: down pausing; 6: down finished;
      hour: null,
      minute: null,
      second: null,
      time: "00:00:00",
      timer: null,
      Hour: 0,
      Minute: 0,
      Second: 0,
      Millisecond: 0,
      hourString: "",
      minuteString: "",
      secondString: "",
      recordHour: 0,
      recordMinute: 0,
      recordSecond: 0,
      recordMillisecond: 0,
      hint: "正在倒计时 12:20:00",
      clearText: "清空倒计时",
      initialSeen: true,
      clearSeen: false,
      pauseSeen: false,
      restartSeen: false,
      resumeSeen: false,
      hintSeen: false
    };
  },
  methods: {
    format: function(Hour, Minute, Second) {
      if (Second < 10) {
        this.secondString = "0" + Second;
      } else {
        this.secondString = Second;
      }

      if (Minute < 10) {
        this.minuteString = "0" + Minute;
      } else {
        this.minuteString = Minute;
      }

      if (Hour < 10) {
        this.hourString = "0" + Hour;
      } else {
        this.hourString = Hour;
      }
      return (
        this.hourString + ":" + this.minuteString + ":" + this.secondString
      );
    },
    changeStatus: function(aimStatus) {
      if (aimStatus == 1) {
        // before start
        this.initialSeen = true;
        this.clearSeen = false;
        this.pauseSeen = false;
        this.restartSeen = false;
        this.resumeSeen = false;
        this.hintSeen = false;
      } else if (aimStatus == 2 || aimStatus == 3) {
        // up timing || down timing
        this.initialSeen = false;
        this.clearSeen = true;
        this.pauseSeen = true;
        this.restartSeen = true;
        this.resumeSeen = false;
        this.hintSeen = true;

        if (aimStatus == 2) {
          this.hint = "正在正计时";
          this.clearText = "清空正计时";
        } else if (aimStatus == 3) {
          this.recordHour = parseInt(this.recordMillisecond / 3600000);
          this.recordMinute = parseInt(
            (this.recordMillisecond % 3600000) / 60000
          );
          this.recordSecond = parseInt((this.recordMillisecond % 60000) / 1000);
          this.hint =
            "正在倒计时 " +
            this.format(this.recordHour, this.recordMinute, this.recordSecond);
          this.clearText = "清空倒计时";
        }
      } else if (aimStatus == 4 || aimStatus == 5) {
        // up pausing || down pausing
        this.initialSeen = false;
        this.clearSeen = true;
        this.pauseSeen = false;
        this.restartSeen = true;
        this.resumeSeen = true;
        this.hintSeen = true;

        if (aimStatus == 4) {
          // up pausing
          this.hint = "暂停正计时";
          this.clearText = "清空正计时";
        } else if (aimStatus == 5) {
          // down pausing
          this.recordHour = parseInt(this.recordMillisecond / 3600000);
          this.recordMinute = parseInt(
            (this.recordMillisecond % 3600000) / 60000
          );
          this.recordSecond = parseInt((this.recordMillisecond % 60000) / 1000);
          this.hint =
            "暂停倒计时 " +
            this.format(this.recordHour, this.recordMinute, this.recordSecond);
          this.clearText = "清空倒计时";
        }
      } else if (aimStatus == 6) {
        // down finished
        this.initialSeen = false;
        this.clearSeen = true;
        this.pauseSeen = false;
        this.restartSeen = true;
        this.resumeSeen = false;
        this.hintSeen = true;

        this.recordHour = parseInt(this.recordMillisecond / 3600000);
        this.recordMinute = parseInt(
          (this.recordMillisecond % 3600000) / 60000
        );
        this.recordSecond = parseInt((this.recordMillisecond % 60000) / 1000);
        this.hint =
          "倒计时 " +
          this.format(this.recordHour, this.recordMinute, this.recordSecond) +
          " 已结束";
      }
    },
    CountUp: function() {
      this.Millisecond += 50;
      this.Hour = parseInt(this.Millisecond / 3600000);
      this.Minute = parseInt((this.Millisecond % 3600000) / 60000);
      this.Second = parseInt((this.Millisecond % 60000) / 1000);
      this.time = this.format(this.Hour, this.Minute, this.Second);
    },
    CountDown: function() {
      this.Millisecond -= 50;
      this.Hour = parseInt(this.Millisecond / 3600000);
      this.Minute = parseInt((this.Millisecond % 3600000) / 60000);
      this.Second = parseInt((this.Millisecond % 60000) / 1000);
      if (this.Millisecond <= 0) {
        clearInterval(this.timer);
        this.changeStatus(6);
      }
      this.time = this.format(this.Hour, this.Minute, this.Second);
    },
    startCountUp: function() {
      this.status = 2;
      this.Millisecond = 0;
      this.changeStatus(this.status);
      this.timer = setInterval(this.CountUp, 50);
    },
    startCountDown: function() {
      this.status = 3;
      this.Hour = this.hour;
      if (this.minute > 59) {
        this.Minute = 59;
      } else {
        this.Minute = this.minute;
      }
      if (this.second > 59) {
        this.Second = 59;
      } else {
        this.Second = this.second;
      }

      this.hour = null;
      this.minute = null;
      this.second = null;

      this.Millisecond =
        this.Hour * 3600000 + this.Minute * 60000 + this.Second * 1000;
      this.recordMillisecond = this.Millisecond;
      this.changeStatus(this.status);

      this.timer = setInterval(this.CountDown, 50);
    },
    clearCounter: function() {
      this.status = 1;
      this.changeStatus(this.status);
      clearInterval(this.timer);
      this.time = this.format(0, 0, 0);
    },
    pauseCounter: function() {
      if (this.status == 2) {
        // Now count up
        this.status = 4;
        this.changeStatus(this.status);
        clearInterval(this.timer);
      } else if (this.status == 3) {
        // now count down
        this.status = 5;
        this.changeStatus(this.status);
        clearInterval(this.timer);
      }
    },
    restartCounter: function() {
      if (this.status == 2 || this.status == 4) {
        this.status = 2;
        this.Millisecond = 0;
        this.changeStatus(this.status);
        clearInterval(this.timer);
        this.timer = setInterval(this.CountUp, 50);
      } else if ((this.status = 3 || this.status == 5 || this.status == 6)) {
        this.status = 3;
        this.Millisecond = this.recordMillisecond;
        this.changeStatus(this.status);
        clearInterval(this.timer);
        this.timer = setInterval(this.CountDown, 50);
      }
    },
    resumeCounter: function() {
      if (this.status == 4) {
        this.status = 2;
        this.changeStatus(this.status);
        this.timer = setInterval(this.CountUp, 50);
      } else if ((status = 5)) {
        this.status = 3;
        this.changeStatus(this.status);
        this.timer = setInterval(this.CountDown, 50);
      }
    },
    // 键盘事件
    handleKeyup(event) {
      const e = event || window.event || arguments.callee.caller.arguments[0];
      if (!e) return;
      const { key, keyCode } = e;
      if (key == "Enter") {
        if (this.status == 1) {
          // before start
          this.status = 2;
          this.Millisecond = 0;
          this.changeStatus(this.status);
          this.timer = setInterval(this.CountUp, 50);
        }
      } else if (keyCode == 32) {
        if (this.status == 2) {
          // Now count up
          this.status = 4;
          this.changeStatus(this.status);
          clearInterval(this.timer);
        } else if (this.status == 3) {
          // now count down
          this.status = 5;
          this.changeStatus(this.status);
          clearInterval(this.timer);
        } else if (this.status == 4) {
          this.status = 2;
          this.changeStatus(this.status);
          this.timer = setInterval(this.CountUp, 50);
        } else if (this.status == 5) {
          this.status = 3;
          this.changeStatus(this.status);
          this.timer = setInterval(this.CountDown, 50);
        }
      }
    }
  },
  mounted: function() {
    window.addEventListener("keyup", this.handleKeyup);
  },
  destroyed() {
    window.removeEventListener("keyup", this.handleKeyup);
  },
  components: {
    CounterButton
  }
};
</script>

<style>
body {
  margin: 0;
  padding: 0;
}

.toolbar {
  background-color: #97a5bc;
  width: 1220px;
  height: 70px;
}

#hour {
  background-color: white;
  border-radius: 5px;
  position: absolute;
  left: 40px;
  top: 15px;
  width: 69px;
  height: 34px;
  font-size: 15px;
}

#hourlabel {
  position: absolute;
  left: 86px;
  top: 24px;
  font-family: PingFangSC-Regular, "PingFang SC", sans-serif;
  font-size: 16px;
  color: #222222;
}

#minute {
  background-color: white;
  border-radius: 5px;
  position: absolute;
  left: 130px;
  top: 15px;
  width: 69px;
  height: 34px;
  font-size: 15px;
}

#minutelabel {
  position: absolute;
  left: 177px;
  top: 24px;
  font-family: PingFangSC-Regular, "PingFang SC", sans-serif;
  font-size: 16px;
  color: #222222;
}

#second {
  background-color: white;
  border-radius: 5px;
  position: absolute;
  left: 220px;
  top: 15px;
  width: 69px;
  height: 34px;
  font-size: 15px;
}

#secondlabel {
  position: absolute;
  left: 268px;
  top: 24px;
  font-family: PingFangSC-Regular, "PingFang SC", sans-serif;
  font-size: 16px;
  color: #222222;
}

#time {
  position: absolute;
  left: 131px;
  top: 197px;
  font-size: 200px;
  font-family: PTMono-Bold, "PT Mono", monospace;
  font-weight: 700;
  color: #333333;
}

#hint {
  position: absolute;
  left: 40px;
  top: 24px;
  font-family: PTMono-Bold, "PT Mono", monospace;
  font-size: 16px;
  color: white;
}
</style>

最后在目录中使用


npm run dev

即可运行该项目。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程网。

免责声明：

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

阅读原文内容投诉

Vue-cli框架实现计时器应用

下载Word文档到电脑，方便收藏和打印～

下载Word文档

相关文章

猜你喜欢

Vue-cli框架实现计时器应用

2024-04-02

Vue-cli框架中怎么实现一个计时器应用

Vue-cli框架中怎么实现一个计时器应用，相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。使用说明开始正计时：点击工具栏的“开始正计时”按钮即可，快捷键为"Enter"键。开始倒
2023-06-20

vue-cli如何构建vue应用并实现webpack打包

2024-04-02

使用vue实现计时器功能

2024-04-02

vue计时器的实现方法

2024-04-02

Vue.js实现简单计时器应用

2024-04-02

如何使用vue实现计时器功能

小编给大家分享一下如何使用vue实现计时器功能，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！具体内容如下首先我们要知道setTimeout和setInterval的区别setTimeout只在指定时间后执行一次，代码如下：
2023-06-20

HBase在大数据实时计算框架（如Spark Streaming）中的应用

HBase在大数据实时计算框架（如Spark Streaming）中扮演着重要角色，它能够与这些框架无缝集成，提供高性能的数据存储和查询能力。以下是HBase在大数据实时计算框架中应用的相关信息：HBase与Spark Streaming
HBase在大数据实时计算框架（如Spark Streaming）中的应用
2024-10-22

vue-cli多页面应用实践之实现组件预览项目

2024-04-02

vue实现简易计时器组件

2024-04-02

vue如何实现计时器组件

2024-04-02

使用Linux定时器实现定时任务和计时器应用

通过使用Linux定时器，可以方便地实现各种定时任务和计时器应用，本文将详细介绍如何使用Linux定时器来实现这些功能。
Linux定时器2024-11-30

OpenHarmony - 基于ArkUI框架实现日历应用

eTS语言：基于TypeScript（简称TS）拓展的出来的，是OpenHarmony应用开发语言，使用ArkUI框架提供的组件进行界面开发。
eTS语言TypeScript应用开发2024-11-30

怎么用Vue方法实现简单的计时器

这篇文章主要讲解了“怎么用Vue方法实现简单的计时器”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“怎么用Vue方法实现简单的计时器”吧！Vue简单的计时器，供大家参考，具体内容如下原理：se
2023-06-20

python实现web应用框架之增加响应对象

这篇文章主要介绍了python利用web应用框架如何增加响应对象的，文中有相应的代码示例，对大家的学习或工作有一定的参考价值，需要的同学可以参考下
2023-05-19

轻量级ORM框架Dapper应用之实现DTO

2024-04-02

python实现一个简单的web应用框架

这篇文章主要为大家介绍了使用python写一个简单的web应用框架实现示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-05-18

常用的大数据实时计算框架有哪些？

常用的大数据实时计算框架有哪些？在大数据技术中，有离线计算、批量计算、实时计算以及流式计算，其中，离线计算和实时计算指的是数据处理的延迟;批量计算和流式计算指的是数据处理的方式。
大数据计算技术2024-12-03

基于Vue方法实现简单计时器

2024-04-02

vue怎么实现简易计时器组件

本篇内容主要讲解“vue怎么实现简易计时器组件”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“vue怎么实现简易计时器组件”吧!在做项目中难免会碰到需要实时刷新，广告动画依次出现等等需求，刚最近基
2023-06-20

热门标签

Linux(148)PHP(127)Java(102)正则表达式(101)JavaScript(69)最佳实践(67)jQuery(44)MySQL(39)Docker(37)C语言(36)性能优化(34)Python(34)XML(28)string(27)第三方库(23)回调函数(23)ZIP(22)数组(22)可扩展性(22)字符串比较(21)find(20)RPM(20)Go(20)grep(19)ASP.NETCore(19)XML解析器(19)事件(19)事件处理程序(19)StringBuilder(18)Nginx(18)

编程热搜

查看更多

编程资源站

  • 资料下载
  • 历年试题
2021年下半年软考高级信息系统项目管理师高频考点精选资料
2021下半年软考高级信息系统技术知识点记忆口诀精选资料
2021下半年软考《信息系统项目管理师》考试真题及答案精选资料
2021下半年软考高级考试备考攻略精选资料
2021年软考高级《信息系统项目管理师》巩固练习题汇总精选资料
2021下半年软考高级信息系统项目管理师30个易考知识点汇总精选资料
2021下半年软考高级知识点这样记，还担心记不住吗精选资料
2021年下半年软考高级考试重点汇总精选资料
2021下半年软考高级信息系统项目管理师计算公式汇总精选资料
2021年下半年软考高级《信息系统项目管理师》模拟试题精选资料
查看更多
信息系统项目管理师选择题每日一练（2024）历年试题
2023年下半年信息系统项目管理师综合知识真题演练历年试题
查看更多

目录

本网页已闲置超过3分钟，按键盘任意键或点击空白处，即可回到网页
最新资讯更多
    友情链接编程网

    反馈

    我要
    反馈