一个基于vue的时钟
前两天写了一个基于vue的小钟表，给大家分享一下。
其中时针和分针使用的是图片，结合transform制作；表盘刻度是通过transform和transformOrigin配合画的；外面的弧形框框，啊哈哈，也是用的图片。具体的看里面的注释就好了，感觉写的还算清楚，啊哈哈~
能帮到你的话，点个赞呗？
预览图：
效果的话，可以看这里
https://jhcan333.github.io/can-Share/demos-tips/clockDemo.html
github 地址在这里
https://github.com/JHCan333/can-Share/blob/master/demos-tips/clockDemo.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>一个基于vue的时钟小demo</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
.jhc-hour-needle {
z-index: 5;
width: 6%;
height: 25%;
position: absolute;
left: 49%;
bottom: 47%;
transform-origin: center bottom;
background: url(https://jhcan333.github.io/can-Share//image/clock/hourPoint.png) no-repeat;
background-size: 100% 100%;
}
.jhc-min-needle {
z-index: 2;
width: 6%;
height: 30%;
position: absolute;
left: 49%;
bottom: 47%;
transform-origin: center bottom;
background: url(https://jhcan333.github.io/can-Share//image/clock/minPoint.png) no-repeat;
background-size: 100% 100%;
}
.jhc-clock-area {
width: 400px;
height: 400px;
position: relative;
background: #050842;
}
.jhc-clock-back {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
background: url(https://jhcan333.github.io/can-Share//image/clock/clockBack.png) no-repeat;
background-size: 100% 100%;
}
.jhc-clock-title {
color: #fff;
position: absolute;
bottom: 10px;
width: 100%;
text-align: center;
font-weight: bold;
}
.jhc-clock-dot {
width: 6%;
height: 6%;
border-radius: 50%;
position: absolute;
background-color: #509fef;
z-index: 20;
left: 49%;
top: 50.5%;
box-shadow: 0px 0px 10px 1px #000;
}
</style>
</head>
<body>
<div id="app">
</div>
<script>
var app = new Vue({
el: '#app',
template:
`<div ref="area" :class="clockArea">
<div :style="cssClock">
<div :style="cssDotWrap">
<div :style="Object.assign({},{
transform: 'rotateZ('+i*6+'deg)',
height: i%5==0?longDot.height:shourtDot.height,
width: i%5==0?longDot.width:shourtDot.width,
},cssDot)"
v-for="(dot,i) in 60"
></div>
</div>
<div :style="Object.assign({},{
transform: 'rotateZ('+hour+'deg)'
})"
:class="hourNeedle"
></div>
<div :style="Object.assign({},{
transform: 'rotateZ('+min+'deg)'
})"
:class="minNeedle"
></div>
<div :class="clockDot"></div>
<div :class="clockBack"></div>
</div>
<div :class="clockTitle" :style="style">当前时间 {{timeDisplayArea}}</div>
</div>`,
data () {
return {
prefixCss: 'jhc-', // css 前缀
cssClock: { //整个钟的盒子
position: 'absolute',
width: '100%',
height: '100%',
borderRadius: '50%',
},
cssDotWrap: { //装刻度的盒子
width: '100%',
height: '100%'
},
cssDot: { //刻度们
position: 'absolute',
backgroundColor: '#509fef'
},
longDot: { //长刻度
width: '3px',
height: '10px'
},
shourtDot: { //短刻度
width: '1px',
height: '5px'
},
timer: null, //用来标记自适应大小的timer
updateTimer: null, // 更新时钟的timer
style: {
bottom: '1px'
}, //时钟的title的style
scale:0.8, // 时钟占外层的百分比
currTime: new Date() //当前日期对象
}
},
created () {
this.currTime = new Date()
clearInterval(this.updateTimer)
this.updateTimer = setInterval(() => {
this.currTime = new Date()
}, 1000)
},
mounted () {
//设置时钟的大小
this.setSize()
},
beforeDestroy () {
clearInterval(this.updateTimer)
},
methods: {
//设置钟表的型号大小
setSize () {
let width = this.getWidth()
let height = this.getHeight()
//时钟占外层的百分比
let scale = this.scale
//获取较短边
let shortLth = width
if (width > height) {
shortLth = height
}
//对时钟的直径做处理
shortLth = shortLth * scale
//获取到顶部和左部的距离
let paddingW = (width - shortLth) / 2
let paddingH = (height - shortLth) / 2
//设置钟表整体的大小以及位置
this.setStates('cssClock', {
height: shortLth + 'px',
width: shortLth + 'px',
top: paddingH + 'px',
left: paddingW + 'px',
})
//设置刻度所围绕区域的位置
this.setStates('cssDotWrap', {
transform: `translate(${shortLth * 0.52}px,${shortLth * 0.16}px)` // 0.52 和 0.16 是我一点一点挪出来的，啊哈哈
})
//设置长短刻度的半径,以及尺寸
let dotRadius = shortLth * 0.75 / 2 - 1
let longDotWidth = Math.floor(dotRadius / 25) || 2
let longDotHeight = Math.floor(dotRadius / 8) || 6
let shortDotWidth = Math.floor(dotRadius / 50) || 1
let shortDotHeight = Math.floor(dotRadius / 16) || 3
//短刻度
this.shourtDot = {
width: shortDotWidth + 'px',
height: shortDotHeight + 'px'
}
//长刻度
this.longDot = {
width: longDotWidth + 'px',
height: longDotHeight + 'px'
}
//设置刻度旋转点的位置
this.setStates('cssDot', {
transformOrigin: `${0}px ${dotRadius}px`
})
},
getWidth () { //获取指定容器的宽度
return this.getRef('area').offsetWidth || 200
},
getHeight () { //获取指定容器的高度
return this.getRef('area').offsetHeight || 200
},
getRef (ref) { // 获取指定 ref 对象
return this.$refs && this.$refs[ref] || {}
},
//模仿 react 的states
setStates (prop, data) {
let cache = this[prop]
this[prop] = Object.assign({}, cache, JSON.parse(JSON.stringify(data)))
},
},
computed: {
sec () { //将当前秒数转化为秒针旋转的度数
return this.currTime.getSeconds() * 6
},
min () { //将当前的分钟数转化为分针旋转的度数
return this.currTime.getMinutes() * 6 + this.currTime.getSeconds() / 60 * 6
},
hour () { //将当前的小时数转化为时针旋转的度数
return this.currTime.getHours() * 30 + this.currTime.getMinutes() / 60 * 30
},
timeDisplayArea(){ // 时间展示区
let hours = this.currTime.getHours() > 9 ? this.currTime.getHours() : ('0' + this.currTime.getHours())
let minutes = this.currTime.getMinutes() > 9 ? this.currTime.getMinutes() : ('0' + this.currTime.getMinutes())
let seconds = this.currTime.getSeconds() > 9 ? this.currTime.getSeconds() : ('0' + this.currTime.getSeconds())
return hours + ':' + minutes + ':' + seconds
},
hourNeedle () { //时针的class
return `${this.prefixCss}hour-needle`
},
minNeedle () { //分针的class
return `${this.prefixCss}min-needle`
},
clockArea () { //表盘的区域
return `${this.prefixCss}clock-area`
},
clockBack () { //时钟的背景（外框图片）
return `${this.prefixCss}clock-back`
},
clockTitle () { //时钟的title的class
return `${this.prefixCss}clock-title`
},
clockDot () { //时钟的中心点
return `${this.prefixCss}clock-dot`
}
},
})
</script>
</body>
</html>
欢迎大家评论留言，请多多指教！
最近在搞一个和前端程序员相关的公号，除了技术分享之外，也增加了对于职业发展、生活记录之类的文章，欢迎大家关注，一起聊天、吐槽，一起努力工作，认真生活！
一个基于vue的时钟的更多相关文章
- 使用webpack4搭建一个基于Vue的组件库
组内负责的几个项目都有一些一样的公共组件,所以就着手搭建了个公共组件开发脚手架,第一次开发 library,所以是参考着 iview 的配置来搭建的.记录如何使用webpack4搭建一个library ...
- 新建一个基于vue.js+Mint UI的项目
上篇文章里面讲到如何新建一个基于vue,js的项目(详细文章请戳用Vue创建一个新的项目). 该项目如果需要组件等都需要自己去写,今天就学习一下如何新建一个基于vue.js+Mint UI的项目,直接 ...
- 一个基于vue的仪表盘demo
最近写了一个基于vue的仪表盘,其中 主要是和 transform 相关的 css 用的比较多.给大家分享一下,喜欢的话点个赞呗?嘿嘿 截图如下: 实际效果查看地址:https://jhcan333. ...
- 一个基于Vue.js+Mongodb+Node.js的博客内容管理系统
这个项目最初其实是fork别人的项目.当初想接触下mongodb数据库,找个例子学习下,后来改着改着就面目全非了.后台和数据库重构,前端增加了登录注册功能,仅保留了博客设置页面,但是也优化了. 一.功 ...
- Vue3教程：一个基于 Vue 3 + Vant 3 的商城项目开源啦！
之前发布过一篇文章,告诉大家我要开发一个 Vue3 的商城项目并开源到 GitHub 上,供大家练手和学习,随后也一直有收到留言和反馈,问我开发到哪里了,什么时候开源之类的问题,今天终于可以通知大家, ...
- 发布自己第一个npm 组件包（基于Vue的文字跑马灯组件）
一.前言 总结下最近工作上在移动端实现的一个跑马灯效果,最终效果如下: 印象中好像HTML标签的'marquee'的直接可以实现这个效果,不过 HTML标准中已经废弃了'marquee'标签 既然HT ...
- 优秀的基于VUE移动端UI框架合集
1. vonic 一个基于 vue.js 和 ionic 样式的 UI 框架,用于快速构建移动端单页应用,很简约,是我喜欢的风格 star 2.3k 中文文档 在线预览 2.vux 基于WeUI和Vu ...
- 一款基于Vue的扩展性组件库 VV-UI
github: https://github.com/VV-UI/VV-UI 演示地址: https://vv-ui.github.io/VV-UI/#/meta-info 1. LoadingBar ...
- Vue Admin - 基于 Vue & Bulma 后台管理面板
Vue Admin 是一个基于 Vue 2.0 & Bulma 0.3 的后台管理面板(管理系统),相当于是 Vue 版本的 Bootstrap 管理系统,提供了一组通用的后台界面 UI 和组 ...
随机推荐
- Java请求Http
一.工具类,直接粘贴调用即可 package cn.com.service.httpReq; import java.io.BufferedReader;import java.io.IOExcept ...
- 缓冲区溢出实例（一)--Windows
一.基本概念 缓冲区溢出:当缓冲区边界限制不严格时,由于变量传入畸形数据或程序运行错误,导致缓冲区被填满从而覆盖了相邻内存区域的数据.可以修改内存数据,造成进程劫持,执行恶意代码,获取服务器控制权限等 ...
- React Native 生命周期及相关方法小技巧使用
ES6 生命周期图解 很多文章里的图解,第一步是 getDefaultProps , 第二步是 getinitialstate ,这是 ES5 的写法; 实际上ES6 中 getinitialstat ...
- 漏洞挖掘技巧之利用javascript:
好久没更新博客了,更新一波. 场景: window.location.href=”” location=”” location.href=”” window.location.* 常见地点:任何二次跳 ...
- unity编辑器扩展_07（创建对话框，检测按钮的点击，点击按钮后提示信息，保存设置的数据，显示点击按钮后的处理的进度条信息)
代码: using UnityEditor;using UnityEngine; public class ChangeValue : ScriptableWizard { ...
- 使用JDBC驱动程序处理元数据
使用 JDBC 驱动程序处理元数据 一.前言 Java 通过JDBC获得连接以后,得到一个Connection 对象,可以从这个对象获得有关数据库管理系统的各种信息,包括数据库中的各个表,表中的各个列 ...
- Java8新特性_lambda表达式和函数式接口最详细的介绍
Lambda表达式 在说Lambda表达式之前我们了解一下函数式编程思想,在数学中,函数就是有输入量.输出量的一套计算方案,也就是“拿什么东西做什么事情”. 相对而言,面向对象过分强调“必须通过对象的 ...
- xcode简介及安装
1. 简介 Xcode 是运行在操作系统Mac OS X上的集成开发工具(IDE),由苹果公司开发. Xcode是开发OS X 和 iOS 应用程序的最快捷的方式. Xcode 具有统一的用户界面设计 ...
- 洛谷P1246编码问题-排列组合，分类讨论
编码问题 题意就是a,b,c.....ab.....编码,给你一个字符串,输出这是第几个: 这里可以用暴力枚举,但也可以用组合数学的高超知识: 既然这样我就说一下排列组合的方法,如果要弄一个 各位数字 ...
- CF - 1110 C Meaningless Operations
题目传送门 题解: 首先根据观察,很容易发的是: x != (1<<k) - 1 时候 答案就是, 将x二进制下再最高位后的0都变成1. 然后就是考虑 x == (1<<k) ...