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>
vue练手项目——桌面时钟的更多相关文章
- Vue练手项目（包含typescript版本）
本项目的git仓库https://github.com/lznism/xiachufang-vue 对应的使用typescript实现的版本地址https://github.com/lznism/xi ...
- Vuex/Vue 练手项目 在线汇率转换器
详情请点击: https://zhuanlan.zhihu.com/p/33362758
- web前端学习部落22群分享给需要前端练手项目
前端学习还是很有趣的,可以较快的上手然后自己开发一些好玩的项目来练手,网上也可以一抓一大把关于前端开发的小项目,可是还是有新手在学习的时候不知道可以做什么,以及怎么做,因此,就整理了一些前端项目教程, ...
- Python之路【第二十四篇】：Python学习路径及练手项目合集
Python学习路径及练手项目合集 Wayne Shi· 2 个月前 参照:https://zhuanlan.zhihu.com/p/23561159 更多文章欢迎关注专栏:学习编程. 本系列Py ...
- 20个Java练手项目，献给嗜学如狂的人
给大家推荐一条由浅入深的JAVA学习路径,首先完成 Java基础.JDK.JDBC.正则表达式等基础实验,然后进阶到 J2SE 和 SSH 框架学习.最后再通过有趣的练手项目进行巩固. JAVA基础 ...
- Python练手项目：20行爬取全王者全英雄皮肤
引言 王者荣耀大家都玩过吧,没玩过的也应该听说过,作为时下最火的手机MOBA游戏,咳咳,好像跑题了.我们今天的重点是爬取王者荣耀所有英雄的所有皮肤,而且仅仅使用20行Python代码即可完成. ...
- 去哪找Java练手项目？
经常有读者在微信上问我: 在学编程的过程中,看了不少书.视频课程,但是看完.听完之后感觉还是不会编程,想找一些项目来练手,但是不知道去哪儿找? 类似的问题,有不少读者问,估计是大部分人的困惑. 练手项 ...
- Python学习路径及练手项目合集
Python学习路径及练手项目合集 https://zhuanlan.zhihu.com/p/23561159
- webpack练手项目之easySlide（三）：commonChunks（转）
Hello,大家好. 在之前两篇文章中: webpack练手项目之easySlide(一):初探webpack webpack练手项目之easySlide(二):代码分割 与大家分享了webpack的 ...
随机推荐
- async包 ES6 async/await的区别
最基本的async 包 ApCollection.find({}).toArray(function (err, aps) { var num = 0; async.whilst( function ...
- stress命令安装
一.stress(cpu) stress是一个linux下的压力测试工具,专门为那些想要测试自己的系统,完全高负荷和监督这些设备运行的用户. 下载地址http://people.seas.harvar ...
- 很全很全的 JavaScript 模块讲解
模块通常是指编程语言所提供的代码组织机制,利用此机制可将程序拆解为独立且通用的代码单元.所谓模块化主要是解决代码分割.作用域隔离.模块之间的依赖管理以及发布到生产环境时的自动化打包与处理等多个方面. ...
- 网络编程OSI介绍
网络编程 软件开发架构 c/s架构(client/server) c:客户端 s:服务端 客户端和服务器端架构,这种架构是从用户层划分的,一般客户端就是在用户电脑上安装的应用程序,而服务端就是公司里的 ...
- shell的循环嵌套语法
测试shell的循环嵌套语法 [root@localhost test]# vi Xunhuanqiantao.sh #!/bin/bash #程序功能描述: # 测试循环嵌套 #作者:孤舟点点 #版 ...
- Mac Webstrom 快捷键
C + D 删除当前行 光标所在行 S + C + F 格式化 S + C + R 重命名 C + { 查找上次 C + } 查找下次 C + S + DE 回到上一次编程位置 C + F 查找 C ...
- spring入门(14)
AOP是一个新的专题,基础部分主要是入门 后续的五.六.七都属于AOP专题: 所以有必要对这三章要学什么有个全局的认识. 1 概要 1 什么是AOP及实现方式 介绍了AOP的用途,以及大致的实现方案 ...
- Golang: chan定义问题(7)
通常都是定义读写双向的 chan,定义单向 chan 问题. 专栏的介绍可以参考 <GotchaGolang专栏>,代码可以看<宝库-Gotcha>. 通过 只写 chan 传 ...
- vuejs 踩坑及经验总结
问题描述 在使用 v-for repeat 组件时控制台会出现警告: 解决方法 在组件标签上使用 v-for : 加 :key 使用 template 标签包裹该组件,再在 template 标签 上 ...
- linux安装部署ftp图片服务器
1.安装http反向代理服务器.安装ftp文件传输组件vsftpd 详细安装及配置参见 https://blog.csdn.net/zhouym/article/details/100145964 2 ...