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 相关文章推荐
Ajax一统天下之Dojo整合篇
Mar 24 Javascript
javascript jQuery $.post $.ajax用法
Jul 09 Javascript
js arguments对象应用介绍
Nov 28 Javascript
js for循环倒序输出数组元素的实例
Mar 01 Javascript
微信小程序使用progress组件实现显示进度功能【附源码下载】
Dec 12 Javascript
在vue项目中使用element-ui的Upload上传组件的示例
Feb 08 Javascript
react-native动态切换tab组件的方法
Jul 07 Javascript
详解Vue+ElementUI从零开始搭建自己的网站(一、环境搭建)
Apr 30 Javascript
Vue将页面导出为图片或者PDF
Aug 17 Javascript
微信小程序 scroll-view 实现锚点跳转功能
Dec 12 Javascript
JS实现简单移动端鼠标拖拽
Jul 23 Javascript
VUE子组件向父组件传值详解(含传多值及添加额外参数场景)
Sep 01 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
六酷社区论坛HOME页清新格调免费版 下载
2007/03/07 PHP
Windows7下PHP开发环境安装配置图文方法
2010/05/20 PHP
php+ajax无刷新上传图片实例代码
2015/11/17 PHP
Laravel框架实现的记录SQL日志功能示例
2018/06/19 PHP
javascript 对象定义方法 简单易学
2009/03/22 Javascript
Js可拖拽放大的层拖动特效实现方法
2015/02/25 Javascript
图解Sublime Text3使用技巧
2015/12/21 Javascript
JS深度拷贝Object Array实例分析
2016/03/31 Javascript
使用jQuery实现Web页面换肤功能的要点解析
2016/05/12 Javascript
Angular设置title信息解决SEO方面存在问题
2016/08/19 Javascript
Nodejs进阶:核心模块net入门学习与实例讲解
2016/11/21 NodeJs
javascript ASCII和Hex互转的实现方法
2016/12/27 Javascript
ES6学习笔记之map、set与数组、对象的对比
2018/03/01 Javascript
vue配置多页面的实现方法
2018/05/22 Javascript
vue better scroll 无法滚动的解决方法
2018/06/07 Javascript
使用layer弹窗提交表单时判断表单是否输入为空的例子
2019/09/26 Javascript
JS实现动态星空背景效果
2019/11/01 Javascript
js构造函数constructor和原型prototype原理与用法实例分析
2020/03/02 Javascript
js仿淘宝放大镜效果
2020/12/28 Javascript
Python之eval()函数危险性浅析
2014/07/03 Python
用Python从零实现贝叶斯分类器的机器学习的教程
2015/03/31 Python
Python中type的构造函数参数含义说明
2015/06/21 Python
Python爬取数据保存为Json格式的代码示例
2019/04/09 Python
Python用字典构建多级菜单功能
2019/07/11 Python
PyTorch中Tensor的维度变换实现
2019/08/18 Python
利用Python函数实现一个万历表完整示例
2021/01/23 Python
Superdry极度干燥美国官网:英国制造的服装品牌
2018/11/13 全球购物
C#笔试题和英文面试题
2013/02/07 面试题
施工资料员的岗位职责
2013/12/22 职场文书
会计与审计专业自荐信范文
2014/03/15 职场文书
离退休人员聘用协议书
2014/11/24 职场文书
毕业生就业推荐表自我评价
2015/03/02 职场文书
2015年话务员工作总结
2015/04/29 职场文书
乡镇安全生产月活动总结
2015/05/08 职场文书
庆祝教师节主题班会
2015/08/17 职场文书
《索溪峪的野》教学反思
2016/02/19 职场文书