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 相关文章推荐
JQueryEasyUI datagrid框架的基本使用
Apr 08 Javascript
基于编写jQuery的无缝滚动插件
Aug 02 Javascript
javascript特殊日历控件分享
Mar 07 Javascript
Bootstrap选项卡与Masonry插件的完美结合
Jul 06 Javascript
JS实现的手机端精简幻灯片效果
Sep 05 Javascript
利用Vue2.x开发实现JSON树的方法
Jan 04 Javascript
jquery获取元素到屏幕四周可视距离的方法
Sep 05 jQuery
解决Vue开发中对话框被遮罩层挡住的问题
Nov 26 Javascript
JS document内容及样式操作完整示例
Jan 14 Javascript
javascript设计模式 ? 工厂模式原理与应用实例分析
Apr 09 Javascript
vue组件中实现嵌套子组件案例
Aug 31 Javascript
手写实现JS中的new
Nov 07 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
php桌面中心(三) 修改数据库
2007/03/11 PHP
PHP 获取MySQL数据库里所有表的实现代码
2011/07/13 PHP
php中文验证码实现示例分享
2014/01/12 PHP
php生成随机颜色方法汇总
2014/12/03 PHP
PHP面向对象程序设计重载(overloading)操作详解
2019/06/13 PHP
JavaScript读取中文cookie时的乱码问题的解决方法
2009/10/14 Javascript
js png图片(有含有透明)在IE6中为什么不透明了
2010/02/07 Javascript
jquery常用特效方法使用示例
2014/04/25 Javascript
基于socket.io和node.js搭建即时通信系统
2014/07/30 Javascript
escape函数解决js中ajax传递中文出现乱码问题
2014/10/30 Javascript
JavaScript声明变量名的语法规则
2015/07/10 Javascript
网页中JS函数自动执行常用三种方法
2016/03/30 Javascript
vue实现可增删查改的成绩单
2016/10/27 Javascript
JS克隆,属性,数组,对象,函数实例分析
2016/11/26 Javascript
JavaScript ES6中export、import与export default的用法和区别
2017/03/14 Javascript
Vue关于数据绑定出错解决办法
2017/05/15 Javascript
基于axios 解决跨域cookie丢失的问题
2018/09/26 Javascript
用node开发并发布一个cli工具的方法步骤
2019/01/03 Javascript
JavaScript实现筛选数组
2021/03/02 Javascript
Python实现批量下载文件
2015/05/17 Python
Python快速从注释生成文档的方法
2016/12/26 Python
python爬虫实战之最简单的网页爬虫教程
2017/08/13 Python
在cmd命令行里进入和退出Python程序的方法
2018/05/12 Python
Python使用Shelve保存对象方法总结
2019/01/28 Python
TensorBoard 计算图的查看方式
2020/02/15 Python
python实现小程序推送页面收录脚本
2020/04/20 Python
python接口自动化之ConfigParser配置文件的使用详解
2020/08/03 Python
Selenium执行完毕未关闭chromedriver/geckodriver进程的解决办法(java版+python版)
2020/12/07 Python
python中pivot()函数基础知识点
2021/01/03 Python
丽笙酒店官方网站:Radisson Hotels
2019/05/07 全球购物
远程网络教育毕业生自我鉴定
2014/04/14 职场文书
思想作风整顿个人剖析材料
2014/10/06 职场文书
2014年幼儿园工作总结
2014/11/10 职场文书
后勤个人工作总结
2015/02/28 职场文书
学生党支部工作总结2015
2015/05/26 职场文书
Oracle中DBLink的详细介绍
2022/04/29 Oracle