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 模拟JQuery的Ready方法实现并出现的问题
Dec 06 Javascript
js中判断Object、Array、Function等引用类型对象是否相等
Aug 29 Javascript
谷歌Chrome浏览器扩展程序开发小记
Jan 06 Javascript
JavaScript数据类型转换的注意事项
Jul 31 Javascript
js Canvas绘制圆形时钟效果
Feb 17 Javascript
基于React实现表单数据的添加和删除详解
Mar 14 Javascript
Vue.js实现模拟微信朋友圈开发demo
Apr 20 Javascript
JS中的回调函数实例浅析
Mar 21 Javascript
Node.js实现简单管理系统
Sep 23 Javascript
JavaScript文档加载模式以及元素获取
Jul 28 Javascript
在vue中配置不同的代理同时访问不同的后台操作
Sep 11 Javascript
详解Vue中$props、$attrs和$listeners的使用方法
Feb 18 Vue.js
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缓存函数的使用说明
2013/05/10 PHP
Yii查询生成器(Query Builder)用法实例教程
2014/09/04 PHP
php打包压缩文件之ZipArchive方法用法分析
2016/04/30 PHP
laravel中的错误与日志用法详解
2016/07/26 PHP
PHP基于PDO扩展操作mysql数据库示例
2018/12/24 PHP
详解PHP中的8个魔术常量
2020/07/06 PHP
javascript 打印页面代码
2009/03/24 Javascript
js原型链原理看图说明
2012/07/07 Javascript
jQuery中:contains选择器用法实例
2014/12/30 Javascript
js实现的彩色方块飞舞奇幻效果
2016/01/27 Javascript
JS DOMReady事件的六种实现方法总结
2016/11/23 Javascript
解决vue2.x中数据渲染以及vuex缓存的问题
2017/07/13 Javascript
BootStrap selectpicker后台动态绑定数据的方法
2017/07/28 Javascript
浅谈JS中的反柯里化( uncurrying)
2017/08/17 Javascript
vue组件中使用iframe元素的示例代码
2017/12/13 Javascript
angular4 JavaScript内存溢出问题
2018/03/06 Javascript
react-native封装插件swiper的使用方法
2018/03/20 Javascript
js实现二级菜单点击显示当前内容效果
2018/04/28 Javascript
layerUI下的绑定事件实例代码
2018/08/17 Javascript
vue自定义switch开关组件,实现样式可自行更改
2019/11/01 Javascript
javascript实现支付宝滑块验证码效果
2020/07/24 Javascript
JavaScript编写开发动态时钟
2020/07/29 Javascript
python 字符串格式化代码
2013/03/17 Python
Python列表计数及插入实例
2014/12/17 Python
Python Matplotlib库安装与基本作图示例
2019/01/09 Python
Python页面加载的等待方式总结
2021/02/28 Python
Html5监听手机摇一摇事件的实现
2019/11/07 HTML / CSS
美国家居装饰网上商店:Lulu & Georgia
2019/09/14 全球购物
应届毕业生求职信范例分享
2013/12/17 职场文书
优秀学生事迹材料
2014/02/08 职场文书
新疆民族团结演讲稿
2014/08/27 职场文书
幼儿园八一建军节活动方案
2014/08/27 职场文书
英语辞职信范文
2015/02/28 职场文书
信息技术远程培训心得体会
2016/01/09 职场文书
2016年学校禁毒宣传活动工作总结
2016/04/05 职场文书
Java如何实现树的同构?
2021/06/22 Java/Android