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 相关文章推荐
ExtJS下grid的一些属性说明
Dec 13 Javascript
js给dropdownlist添加选项的小例子
Mar 04 Javascript
Jquery Post处理后不进入回调的原因及解决方法
Jul 15 Javascript
jQuery实现自动切换播放的经典滑动门效果
Sep 12 Javascript
chrome浏览器当表单自动填充时如何去除浏览器自动添加的默认样式
Oct 09 Javascript
JavaScript入门系列之知识点总结
Mar 24 Javascript
jQuery日程管理插件fullcalendar使用详解
Jan 07 Javascript
vue指令以及dom操作详解
Mar 04 Javascript
JS自定义滚动条效果简单实现代码
Oct 27 Javascript
微信小程序拍照和摄像功能实现方法示例
Feb 01 Javascript
150行代码带你实现微信小程序中的数据侦听
May 17 Javascript
vue控制多行文字展开收起的实现示例
Oct 11 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/19 PHP
[原创]php使用curl判断网页404(不存在)的方法
2016/06/23 PHP
Android AsyncTack 异步任务实例详解
2016/11/02 PHP
20款非常优秀的 jQuery 工具提示插件 推荐
2012/07/15 Javascript
Javascript图像处理—虚拟边缘介绍及使用方法
2012/12/27 Javascript
javascript+html5实现绘制圆环的方法
2015/07/28 Javascript
layui分页效果实现代码
2017/05/19 Javascript
微信小程序开发之toast提示插件使用示例
2017/06/08 Javascript
ES6 Array常用扩展的应用实例分析
2019/06/26 Javascript
vue实现图片上传预览功能
2019/12/23 Javascript
jQuery使用jsonp实现百度搜索的示例代码
2020/07/08 jQuery
详解JavaScript自定义函数
2020/07/29 Javascript
[53:44]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Magma BO3 第一场 1月31日
2021/03/11 DOTA
Python中非常实用的一些功能和函数分享
2015/02/14 Python
Python多线程下载文件的方法
2015/07/10 Python
Python卸载模块的方法汇总
2016/06/07 Python
Python排序搜索基本算法之选择排序实例分析
2017/12/09 Python
matplotlib作图添加表格实例代码
2018/01/23 Python
numpy中的delete删除数组整行和整列的实例
2018/05/09 Python
详解PyCharm配置Anaconda的艰难心路历程
2018/08/13 Python
Python爬取商家联系电话以及各种数据的方法
2018/11/10 Python
python的内存管理和垃圾回收机制详解
2019/05/18 Python
获取python运行输出的数据并解析存为dataFrame实例
2020/07/07 Python
HTML5实现Notification API桌面通知功能
2016/03/02 HTML / CSS
印度和世界各地的精美产品:Ikka Dukka
2018/02/12 全球购物
安全的后院和健身蹦床:JumpSport
2019/07/15 全球购物
J2EE模式面试题
2016/10/11 面试题
销售经理工作职责范文
2013/12/03 职场文书
趣味活动策划方案
2014/02/08 职场文书
分公司经理任命书
2014/06/05 职场文书
2014年少先队工作总结
2014/12/03 职场文书
实习班主任自我评价
2015/03/11 职场文书
新年晚会开场白
2015/05/29 职场文书
安全教育日主题班会
2015/08/13 职场文书
从贫穷到富有,是知识技能和学习力的差别
2019/08/20 职场文书
vue Element-ui表格实现树形结构表格
2021/06/07 Vue.js