vue简单练习 桌面时钟的实现代码实例


Posted in Javascript onSeptember 19, 2019

用vue实现一个简单的网页桌面时钟,主要包括时钟显示、计时、暂停、重置等几个功能。

效果图如下,页面刚进来的时候是一个时钟,时钟上显示的时、分、秒为当前实际时间,点击计时器按钮后,页面变成一个计时器,并且计时器按钮被暂停与重置两个按钮替代,分别对计时器进行暂停和重置,若点击时钟按钮会切换回时钟界面。

vue简单练习 桌面时钟的实现代码实例

vue简单练习 桌面时钟的实现代码实例

代码如下:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>时钟</title>
  <style type="text/css">
    .clock {
      width: 400px;
      height: 180px;
      line-height: 180px;
      border: 10px solid #aaa;
      border-radius: 10px;
      margin: 120px auto;
      background: pink;
      text-align: center;
      position: relative;
      box-shadow: 0px 5px 20px rgba(0,0,0,.6);
    }
    .clock .text {
      font-size: 70px;
      font-weight: bold;
      color: rgba(0,0,0,.7);
    }
    .clock .btn {
      position: absolute;
      /*top: -66px;*/
      bottom: -66px;
      border: none;
      outline: none;
      width: 80px;
      height: 36px;
      border-radius: 4px;
      font-size: 16px;
      background: #aaa;
      cursor: pointer;
      box-shadow: 0px 5px 20px rgba(0,0,0,.6);
    }
    .clock .btn:hover {
      opacity: 0.8;
    }
    .clock .btn-clock {
      left: 110px;
    }
    .clock .btn-clock.to-left {
      left: 60px;
    }
    .clock .btn-timer {
      right: 110px;
    }
    .clock .btn-suspend {
      right: 160px;
    }
    .clock .btn-reset {
      right: 60px;
    }
  </style>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <div class="clock">
      <span class="text" v-if="index == 0">
        {{ hour }}:{{ min }}:{{ sec }}
      </span>
      <span class="text" v-else>
        {{ min }}:{{ sec }}:{{ msec }}
      </span>
      <button class="btn btn-clock" @click="selectClock" :class="{'to-left': index != 0}">时钟</button>
      <button class="btn btn-timer" @click="selectTimer" v-if="index == 0">
        <span>计时器</span>
      </button>
      <button class="btn btn-suspend" @click="suspendTimer" v-if="index > 0">
        <span v-if="index == 1">暂停</span>
        <span v-if="index == 2">开始</span>
      </button>
      <button class="btn btn-reset" @click="resetTimer" v-if="index == 1 || index == 2">
        <span>重置</span>
      </button>
    </div>
  </div>
  <script type="text/javascript">
    var app = new Vue({
      el: '#app',
      data: {
        index: 0,  // 0表示时钟页面,1表示计时器计时状态,2表示计时器暂停状态
        hour: '00', // 页面显示的数值
        min: '00',
        sec: '00',
        msec: '00',
        h: 0,    // 临时保存的数值
        m: 0,
        s: 0,
        ms: 0,
        timer: null,
        date: null
      },
      // 监视器
      watch: {
        index(newValue, oldValue) {
          clearInterval(this.timer);
          this.timer = null;
          this.date = null;
          // 从时钟页面click过来 或 从计时器页面click过来
          if (oldValue == 0 || newValue == 0) {  // index等于2时数据保留
            this.hour = '00'; 
            this.min = '00';
            this.sec = '00';
            this.msec = '00';
            this.h = 0; 
            this.m = 0;
            this.s = 0;
            this.ms = 0;
          }
          this.autoMove();
        }
      },
      methods: {
        // 自动计时
        autoMove() {
          if (this.index == 0) {
            this.timer = setInterval(res => {
              this.date = new Date();
              this.h = this.date.getHours();
              this.m = this.date.getMinutes();
              this.s = this.date.getSeconds();
              this.hour = this.h > 9 ? this.h : '0' + this.h;
              this.min = this.m > 9 ? this.m : '0' + this.m;
              this.sec = this.s > 9 ? this.s : '0' + this.s;
            }, 1000);
          } else if (this.index == 1){
            this.timer = setInterval(res => {
              this.ms ++;
              if (this.ms == 100) {
                this.s ++;
                this.ms = 0;
              }
              if (this.s == 60) {
                this.m ++;
                this.s = 0;
              }
              this.msec = this.ms > 9 ? this.ms : '0' + this.ms;
              this.min = this.m > 9 ? this.m : '0' + this.m;
              this.sec = this.s > 9 ? this.s : '0' + this.s;
            }, 10);
          }
        },
        // 选择时钟
        selectClock() {
          this.index = 0;
        },
        // 选择计时器
        selectTimer() {
          this.index = 1;
        },
        // 开始、暂停计时器
        suspendTimer() {
          if (this.index == 1) {
            this.index = 2;
          } else if (this.index == 2) {
            this.index = 1;
          }
        },
        // 重置计时器
        resetTimer() {
          this.index = 0;
          setTimeout(res => {
            this.index = 1;
          }, 1);
        }
      },
      mounted() {
        this.autoMove();
      }
    })
  </script>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用javascript实现的激活输入框后隐藏初始内容
Jun 29 Javascript
javascript 极速 隐藏/显示万行表格列只需 60毫秒
Mar 28 Javascript
javascript hashtable 修正版 下载
Dec 30 Javascript
javascript的数据类型、字面量、变量介绍
May 23 Javascript
jquery实现先淡出再折叠收起的动画效果
Aug 07 Javascript
使用javaScript动态加载Js文件和Css文件
Oct 24 Javascript
如何高效率去掉js数组中的重复项
Apr 12 Javascript
Angular懒加载机制刷新后无法回退的快速解决方法
Aug 30 Javascript
javascript中异常处理案例(推荐)
Oct 03 Javascript
JS+html5 canvas实现的简单绘制折线图效果示例
Mar 13 Javascript
详解jquery和vue对比
Apr 16 jQuery
15个值得收藏的JavaScript函数
Sep 15 Javascript
JS实现滚动条触底加载更多
Sep 19 #Javascript
Vue v-text指令简单使用方法示例
Sep 19 #Javascript
Vue.set 全局操作简单示例
Sep 19 #Javascript
layui对工具条进行选择性的显示方法
Sep 19 #Javascript
基于js实现抽红包并分配代码实例
Sep 19 #Javascript
Layui table field初始化加载时进行隐藏的方法
Sep 19 #Javascript
Vue 实例事件简单示例
Sep 19 #Javascript
You might like
Zerg剧情介绍
2020/03/14 星际争霸
使用php 获取时间今天明天昨天时间戳的详解
2013/06/20 PHP
php中数字0和空值的区别分析
2014/06/05 PHP
三个思路解决laravel上传文件报错:413 Request Entity Too Large问题
2017/11/13 PHP
YII框架实现自定义第三方扩展操作示例
2019/04/26 PHP
jqPlot 图表中文API使用文档及源码和在线示例
2012/02/07 Javascript
S2SH整合JQuery+Ajax实现登录验证功能实现代码
2013/01/30 Javascript
javascript禁用键盘功能键让右击及其他键无效
2013/10/09 Javascript
整理的比较全的event对像在ie与firefox浏览器中的区别
2013/11/25 Javascript
JS图像无缝滚动脚本非常好用
2014/02/10 Javascript
JavaScript输出当前时间Unix时间戳的方法
2015/04/06 Javascript
jquery实现下拉菜单的手风琴效果
2017/07/23 jQuery
Vuex 入门教程
2018/01/10 Javascript
JavaScript显式数据类型转换详解
2019/03/18 Javascript
详解Vue之父子组件传值
2019/04/01 Javascript
解决layui表格内文本超出隐藏的问题
2019/09/12 Javascript
Json实现传值到后台代码实例
2020/06/30 Javascript
vscode 使用Prettier插件格式化配置使用代码详解
2020/08/10 Javascript
vue 获取元素额外生成的data-v-xxx操作
2020/09/09 Javascript
零基础写python爬虫之爬虫框架Scrapy安装配置
2014/11/06 Python
Python冒泡排序注意要点实例详解
2016/09/09 Python
Python实现的建造者模式示例
2018/08/06 Python
Python使用try except处理程序异常的三种常用方法分析
2018/09/05 Python
Python设计模式之模板方法模式实例详解
2019/01/17 Python
OpenCV哈里斯(Harris)角点检测的实现
2020/01/15 Python
使用tensorboard可视化loss和acc的实例
2020/01/21 Python
python中字典增加和删除使用方法
2020/09/30 Python
Python的logging模块基本用法
2020/12/24 Python
美国滑雪和滑雪板商店:Buckman
2018/03/03 全球购物
五一家具促销方案
2014/01/10 职场文书
2014年创先争优活动总结
2014/05/04 职场文书
服装仓管员岗位职责
2014/06/17 职场文书
政风行风建设责任书
2014/07/23 职场文书
大学生党员自我批评思想汇报
2014/10/10 职场文书
2014年银行员工工作总结
2014/11/12 职场文书
《蓝鲸的眼睛》读后感5篇
2020/01/15 职场文书