前两天写了一个基于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

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>一个基于vue的时钟小demo</title>
  6.     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  7.     <style>
  8.         .jhc-hour-needle {
  9.             z-index: 5;
  10.             width: 6%;
  11.             height: 25%;
  12.             position: absolute;
  13.             left: 49%;
  14.             bottom: 47%;
  15.             transform-origin: center bottom;
  16.             background: url(https://jhcan333.github.io/can-Share//image/clock/hourPoint.png) no-repeat;
  17.             background-size: 100% 100%;
  18.         }
  20.         .jhc-min-needle {
  21.             z-index: 2;
  22.             width: 6%;
  23.             height: 30%;
  24.             position: absolute;
  25.             left: 49%;
  26.             bottom: 47%;
  27.             transform-origin: center bottom;
  28.             background: url(https://jhcan333.github.io/can-Share//image/clock/minPoint.png) no-repeat;
  29.             background-size: 100% 100%;
  30.         }
  32.         .jhc-clock-area {
  33.             width: 400px;
  34.             height: 400px;
  35.             position: relative;
  36.             background: #050842;
  37.         }
  39.         .jhc-clock-back {
  40.             width: 100%;
  41.             height: 100%;
  42.             position: absolute;
  43.             top: 0px;
  44.             left: 0px;
  45.             background: url(https://jhcan333.github.io/can-Share//image/clock/clockBack.png) no-repeat;
  46.             background-size: 100% 100%;
  47.         }
  49.         .jhc-clock-title {
  50.             color: #fff;
  51.             position: absolute;
  52.             bottom: 10px;
  53.             width: 100%;
  54.             text-align: center;
  55.             font-weight: bold;
  56.         }
  58.         .jhc-clock-dot {
  59.             width: 6%;
  60.             height: 6%;
  61.             border-radius: 50%;
  62.             position: absolute;
  63.             background-color: #509fef;
  64.             z-index: 20;
  65.             left: 49%;
  66.             top: 50.5%;
  67.             box-shadow: 0px 0px 10px 1px #000;
  68.         }
  69.     </style>
  70. </head>
  72. <body>
  73. <div id="app">
  74. </div>
  75. <script>
  76.     var app = new Vue({
  77.         el: '#app',
  78.         template:
  79.             `<div ref="area" :class="clockArea">
  80.                 <div :style="cssClock">
  81.                     <div :style="cssDotWrap">
  82.                         <div :style="Object.assign({},{
  83.                                 transform: 'rotateZ('+i*6+'deg)',
  84.                                 height: i%5==0?longDot.height:shourtDot.height,
  85.                                 width: i%5==0?longDot.width:shourtDot.width,
  86.                             },cssDot)"
  87.                              v-for="(dot,i) in 60"
  88.                         ></div>
  89.                     </div>
  90.                     <div :style="Object.assign({},{
  91.                                                 transform: 'rotateZ('+hour+'deg)'
  92.                                             })"
  93.                          :class="hourNeedle"
  94.                     ></div>
  95.                     <div :style="Object.assign({},{
  96.                                             transform: 'rotateZ('+min+'deg)'
  97.                                         })"
  98.                          :class="minNeedle"
  99.                     ></div>
  100.                     <div :class="clockDot"></div>
  101.                     <div :class="clockBack"></div>
  102.                 </div>
  103.                 <div :class="clockTitle" :style="style">当前时间 {{timeDisplayArea}}</div>
  104.             </div>`,
  105.         data () {
  106.             return {
  107.                 prefixCss: 'jhc-', // css 前缀
  108.                 cssClock: { //整个钟的盒子
  109.                     position: 'absolute',
  110.                     width: '100%',
  111.                     height: '100%',
  112.                     borderRadius: '50%',
  113.                 },
  114.                 cssDotWrap: { //装刻度的盒子
  115.                     width: '100%',
  116.                     height: '100%'
  117.                 },
  118.                 cssDot: { //刻度们
  119.                     position: 'absolute',
  120.                     backgroundColor: '#509fef'
  121.                 },
  122.                 longDot: { //长刻度
  123.                     width: '3px',
  124.                     height: '10px'
  125.                 },
  126.                 shourtDot: { //短刻度
  127.                     width: '1px',
  128.                     height: '5px'
  129.                 },
  130.                 timer: null, //用来标记自适应大小的timer
  131.                 updateTimer: null, // 更新时钟的timer
  132.                 style: {
  133.                     bottom: '1px'
  134.                 }, //时钟的title的style
  135.                 scale:0.8, // 时钟占外层的百分比
  136.                 currTime: new Date() //当前日期对象
  137.             }
  138.         },
  139.         created () {
  140.             this.currTime = new Date()
  141.             clearInterval(this.updateTimer)
  142.             this.updateTimer = setInterval(() => {
  143.                 this.currTime = new Date()
  144.             }, 1000)
  145.         },
  146.         mounted () {
  147.             //设置时钟的大小
  148.             this.setSize()
  149.         },
  150.         beforeDestroy () {
  151.             clearInterval(this.updateTimer)
  152.         },
  153.         methods: {
  154.             //设置钟表的型号大小
  155.             setSize () {
  156.                 let width = this.getWidth()
  157.                 let height = this.getHeight()
  158.                 //时钟占外层的百分比
  159.                 let scale = this.scale
  160.                 //获取较短边
  161.                 let shortLth = width
  162.                 if (width > height) {
  163.                     shortLth = height
  164.                 }
  165.                 //对时钟的直径做处理
  166.                 shortLth = shortLth * scale
  167.                 //获取到顶部和左部的距离
  168.                 let paddingW = (width - shortLth) / 2
  169.                 let paddingH = (height - shortLth) / 2
  170.                 //设置钟表整体的大小以及位置
  171.                 this.setStates('cssClock', {
  172.                     height: shortLth + 'px',
  173.                     width: shortLth + 'px',
  174.                     top: paddingH + 'px',
  175.                     left: paddingW + 'px',
  176.                 })
  177.                 //设置刻度所围绕区域的位置
  178.                 this.setStates('cssDotWrap', {
  179.                     transform: `translate(${shortLth * 0.52}px,${shortLth * 0.16}px)` // 0.52 和 0.16 是我一点一点挪出来的，啊哈哈
  180.                 })
  181.                 //设置长短刻度的半径,以及尺寸
  182.                 let dotRadius = shortLth * 0.75 / 2 - 1
  183.                 let longDotWidth = Math.floor(dotRadius / 25) || 2
  184.                 let longDotHeight = Math.floor(dotRadius / 8) || 6
  185.                 let shortDotWidth = Math.floor(dotRadius / 50) || 1
  186.                 let shortDotHeight = Math.floor(dotRadius / 16) || 3
  187.                 //短刻度
  188.                 this.shourtDot = {
  189.                     width: shortDotWidth + 'px',
  190.                     height: shortDotHeight + 'px'
  191.                 }
  192.                 //长刻度
  193.                 this.longDot = {
  194.                     width: longDotWidth + 'px',
  195.                     height: longDotHeight + 'px'
  196.                 }
  197.                 //设置刻度旋转点的位置
  198.                 this.setStates('cssDot', {
  199.                     transformOrigin: `${0}px ${dotRadius}px`
  200.                 })
  202.             },
  203.             getWidth () { //获取指定容器的宽度
  204.                 return this.getRef('area').offsetWidth || 200
  205.             },
  206.             getHeight () { //获取指定容器的高度
  207.                 return this.getRef('area').offsetHeight || 200
  208.             },
  209.             getRef (ref) { // 获取指定 ref 对象
  210.                 return this.$refs && this.$refs[ref] || {}
  211.             },
  212.             //模仿 react 的states
  213.             setStates (prop, data) {
  214.                 let cache = this[prop]
  215.                 this[prop] = Object.assign({}, cache, JSON.parse(JSON.stringify(data)))
  216.             },
  217.         },
  218.         computed: {
  219.             sec () { //将当前秒数转化为秒针旋转的度数
  220.                 return this.currTime.getSeconds() * 6
  221.             },
  222.             min () { //将当前的分钟数转化为分针旋转的度数
  223.                 return this.currTime.getMinutes() * 6 + this.currTime.getSeconds() / 60 * 6
  224.             },
  225.             hour () { //将当前的小时数转化为时针旋转的度数
  226.                 return this.currTime.getHours() * 30 + this.currTime.getMinutes() / 60 * 30
  227.             },
  228.             timeDisplayArea(){ // 时间展示区
  229.                 let hours = this.currTime.getHours() > 9 ? this.currTime.getHours() : ('0' + this.currTime.getHours())
  230.                 let minutes = this.currTime.getMinutes() > 9 ? this.currTime.getMinutes() : ('0' + this.currTime.getMinutes())
  231.                 let seconds = this.currTime.getSeconds() > 9 ? this.currTime.getSeconds() : ('0' + this.currTime.getSeconds())
  232.                 return hours + ':' + minutes + ':' + seconds
  233.             },
  234.             hourNeedle () { //时针的class
  235.                 return `${this.prefixCss}hour-needle`
  236.             },
  237.             minNeedle () { //分针的class
  238.                 return `${this.prefixCss}min-needle`
  239.             },
  240.             clockArea () { //表盘的区域
  241.                 return `${this.prefixCss}clock-area`
  242.             },
  243.             clockBack () { //时钟的背景（外框图片）
  244.                 return `${this.prefixCss}clock-back`
  245.             },
  246.             clockTitle () { //时钟的title的class
  247.                 return `${this.prefixCss}clock-title`
  248.             },
  249.             clockDot () { //时钟的中心点
  250.                 return `${this.prefixCss}clock-dot`
  251.             }
  252.         },
  253.     })
  254. </script>
  255. </body>
  256. </html>

欢迎大家评论留言，请多多指教！

最近在搞一个和前端程序员相关的公号，除了技术分享之外，也增加了对于职业发展、生活记录之类的文章，欢迎大家关注，一起聊天、吐槽，一起努力工作，认真生活！

一个基于vue的时钟的更多相关文章

  1. 使用webpack4搭建一个基于Vue的组件库

    组内负责的几个项目都有一些一样的公共组件,所以就着手搭建了个公共组件开发脚手架,第一次开发 library,所以是参考着 iview 的配置来搭建的.记录如何使用webpack4搭建一个library ...

  2. 新建一个基于vue.js+Mint UI的项目

    上篇文章里面讲到如何新建一个基于vue,js的项目(详细文章请戳用Vue创建一个新的项目). 该项目如果需要组件等都需要自己去写,今天就学习一下如何新建一个基于vue.js+Mint UI的项目,直接 ...

  3. 一个基于vue的仪表盘demo

    最近写了一个基于vue的仪表盘,其中 主要是和 transform 相关的 css 用的比较多.给大家分享一下,喜欢的话点个赞呗?嘿嘿 截图如下: 实际效果查看地址:https://jhcan333. ...

  4. 一个基于Vue.js+Mongodb+Node.js的博客内容管理系统

    这个项目最初其实是fork别人的项目.当初想接触下mongodb数据库,找个例子学习下,后来改着改着就面目全非了.后台和数据库重构,前端增加了登录注册功能,仅保留了博客设置页面,但是也优化了. 一.功 ...

  5. Vue3教程：一个基于 Vue 3 + Vant 3 的商城项目开源啦！

    之前发布过一篇文章,告诉大家我要开发一个 Vue3 的商城项目并开源到 GitHub 上,供大家练手和学习,随后也一直有收到留言和反馈,问我开发到哪里了,什么时候开源之类的问题,今天终于可以通知大家, ...

  6. 发布自己第一个npm 组件包（基于Vue的文字跑马灯组件）

    一.前言 总结下最近工作上在移动端实现的一个跑马灯效果,最终效果如下: 印象中好像HTML标签的'marquee'的直接可以实现这个效果,不过 HTML标准中已经废弃了'marquee'标签 既然HT ...

  7. 优秀的基于VUE移动端UI框架合集

    1. vonic 一个基于 vue.js 和 ionic 样式的 UI 框架,用于快速构建移动端单页应用,很简约,是我喜欢的风格 star 2.3k 中文文档 在线预览 2.vux 基于WeUI和Vu ...

  8. 一款基于Vue的扩展性组件库 VV-UI

    github: https://github.com/VV-UI/VV-UI 演示地址: https://vv-ui.github.io/VV-UI/#/meta-info 1. LoadingBar ...

  9. Vue Admin - 基于 Vue & Bulma 后台管理面板

    Vue Admin 是一个基于 Vue 2.0 & Bulma 0.3 的后台管理面板(管理系统),相当于是 Vue 版本的 Bootstrap 管理系统,提供了一组通用的后台界面 UI 和组 ...

随机推荐

  1. ASP.NET Core[源码分析篇] - WebHost

    _configureServicesDelegates的承接 在[ASP.NET Core[源码分析篇] - Startup]这篇文章中,我们得知了目前为止(UseStartup),所有的动作都是在_ ...

  2. java学习之- 线程继承Thread类

    标签(空格分隔): 线程 在java.lang包中有个Thread子类,大家可以自行查阅文档,及范例: 如何在自定义的代码中,自定义一个线程呢? 1.通过对api的查找,java已经提供了对线程这类事 ...

  3. OSG与Shader的结合使用

    目录 1. 概述 2. 固定管线着色 3. 纹理着色 4. 参考 1. 概述 以往在OpenGL中学习渲染管线的时候,是依次按照申请数据.传送缓冲区.顶点着色器.片元着色器这几个步骤编程的.OSG是O ...

  4. 移动端 rem单位做适配的 媒体查询节点

    @media screen and (min-width:300px){html,body,input{font-size:15px}}@media screen and (min-width:320 ...

  5. Anaconda简单使用手册

    安装部分 准备工作 下载各平台对应的安装包,各平台安装包下载链接如下: Windows macOs Linux 安装过程 安装过程在此不给出具体过程,可参照官方给出教程,各平台对应教程如下: Wind ...

  6. cogs2823求组合数（lucas定理

    http://cogs.pro:8080/cogs/problem/problem.php?pid=vNQJJVUVj 再写个数学水题,其实lucas适用于m,n比较大而p比较小的情况. 题意:给出两 ...

  7. c++ uconcontext.h实现协程

    目录 c++ uconcontext.h实现协程 什么是协程? ucontext.h库 库的使用示例 代码地址 c++ uconcontext.h实现协程 什么是协程? 协程是一种程序组件,是由子例程 ...

  8. JOBDU 1108 堆栈的使用

    之所以把这道题目贴出来的原因,是因为真的有几个地方要注意的 题目1108:堆栈的使用 时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:10763 解决:3119 题目描述: 堆栈是一种基本的 ...

  9. codeforces 813 D. Two Melodies（dp）

    题目链接:http://codeforces.com/contest/813/problem/D 题意:求两个不相交的子集长度之和最大是多少,能放入同一子集的条件是首先顺序不能变,然后每一个相邻的要么 ...

  10. HDU 1087 Super Jumping! Jumping! Jumping! 最长递增子序列（求可能的递增序列的和的最大值） *

    Super Jumping! Jumping! Jumping! Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64 ...