vue实现抖音时间转盘


Posted in Javascript onSeptember 08, 2019

本文实例为大家分享了vue实现抖音时间转盘的具体代码,供大家参考,具体内容如下

vue实现抖音时间转盘

做了一个抖音时间转盘,还挺简单的,可能我做的很粗糙

用vue做的 才160行代码。

其实很简单 只是大部分人被这个圆给迷惑了

这个圆就是用简单css3就能做 通过rotate来修改计算就能展示出来了。

vue实现抖音时间转盘

然后贴代码。

<template>
 <div class="main">
  <div class="timeBox">
   <div class="yearBox box">{{year}}</div>
   <div class="dayBox box" :style="'transform: rotate('+(360/day.length)*curDay+'deg)'">
    <ul class="container">
     <li
      v-for="(v,i) in day"
      :key="i"
      :style="'transform: rotate('+(-360/day.length) * (i+1) +'deg);transform-origin: -100% 50% 0px;margin-left:150px;margin-top:90px'"
     >{{v}}</li>
    </ul>
   </div>
   <div class="hourBox box" :style="'transform: rotate('+(-360/hour.length)*curHour+'deg)'">
    <ul class="container">
     <li
      v-for="(v,i) in hour"
      :key="i"
      :style="'transform: rotate('+(360/hour.length)*i+'deg);transform-origin: -200% 50% 0px;margin-left:300px;margin-top:190px'"
     >{{v}}</li>
    </ul>
   </div>
   <div class="minutesBox box" :style="'transform: rotate('+(-360/minutes.length)*curMin+'deg)'">
    <ul class="container">
     <li
      v-for="(v,i) in minutes"
      :key="i"
      :style="'transform: rotate('+(360/minutes.length)*i+'deg);transform-origin: -300% 50% 0px;margin-left:450px;margin-top:290px'"
     >{{v}}</li>
    </ul>
   </div>
    <div class="secondBox" :style="'transform: rotate('+(-360/seconds.length)*curSec+'deg)'">
    <ul class="container">
     <li
      v-for="(v,i) in seconds"
      :key="i"
      :style="'transform: rotate('+(360/seconds.length)*i+'deg);transform-origin: -400% 50% 0px;margin-left:600px;margin-top:390px'"
     >{{v}}</li>
    </ul>
   </div>
  </div>
 </div>
</template>
<script>
export default {
 data: function () {
  return {
   data: ['零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖', '拾', '佰', '仟', '万'],
   hour: [],
   curHour: 0,
   day: [],
   curDay: 0,
   minutes: [],
   curMin: 0,
   seconds: [],
   curSec: 0,
   year: ''
  }
 },
 created () {
  this.dealData()
  this.seconds = JSON.parse(JSON.stringify(this.minutes))
  var sky = ['', '辛', '壬', '癸', '甲', '乙', '丙', '丁', '戊', '己', '庚']
  var land = ['', '酉', '戌', '亥', '子', '丑', '寅', '卯', '辰', '巳', '午', '未', '申']
  var one = new Date().getFullYear() % 10
  var two = new Date().getFullYear() % 12
  this.year = sky[one] + land[two]
  setInterval(() => {
   this.getTime()
  }, 1000)
 },
 methods: {
  dealData () { // 生成数据
   // 星期
   for (let i = 0; i < 7; i++) {
    this.day.push('星期' + this.data[i + 1])
   }
   // 小时
   for (let i = 0; i < 24; i++) {
    if (i < 11) {
     this.hour.push(this.data[i])
    } else {
     this.hour.push((parseInt(i / 10) > 1 ? this.data[parseInt(i / 10)] : '') + '拾' + (parseInt(i % 10) !== 0 ? this.data[i % 10] : ''))
    }
   }
   // 分钟
   for (let i = 0; i < 60; i++) {
    if (i < 11) {
     this.minutes.push(this.data[i])
    } else {
     this.minutes.push((parseInt(i / 10) > 1 ? this.data[parseInt(i / 10)] : '') + '拾' + (parseInt(i % 10) !== 0 ? this.data[i % 10] : ''))
    }
   }
  },
  getTime () { // 获取时间
   var now = new Date()
   this.curSec = now.getSeconds()
   this.curDay = now.getDay()
   this.curMin = now.getMinutes()
   this.curHour = now.getHours()
  }
 }
}
</script>
<style lang="scss" scoped>
.box{
 position: absolute;
 transition: 1s;
}
.main{
 width: 100%;
 height: 100vh;
 overflow: hidden;
 background: #ccc;
}
.yearBox{
 top: 50%;
 left: 50%;
 height: 40px;
 width: 40px;
 margin-top: -20px;
 margin-left: -20px;
 line-height: 40px;
 text-align: center;
 font-size: 18px;
}
.timeBox{
 width: 800px;
 height: 800px;
 margin: 0 auto;
 position: relative;
}
.dayBox {
 width: 200px;
 height: 200px;
 top: 300px;
 left: 300px;
}
.hourBox {
 width: 400px;
 height: 400px;
 top: 200px;
 left: 200px;
}
.minutesBox {
 width: 600px;
 height: 600px;
 top: 100px;
 left: 100px;
}
.secondBox {
 width: 800px;
 height: 800px;
 top: 0;
 left: 0;
 position: absolute;
}
.container {
  overflow:auto;
  li {
   width: 50px;
   height: 20px;
   font-size: 12px;
   position: absolute;
  }
 }
</style>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
filemanage功能中用到的lib.js
Apr 08 Javascript
多引号嵌套的变量命名的问题
May 09 Javascript
jQuery插件之jQuery.Form.js用法实例分析(附demo示例源码)
Jan 04 Javascript
聊一聊JS中this的指向问题
Jun 17 Javascript
AngularJS表单验证中级篇(3)
Sep 28 Javascript
微信小程序实战之登录页面制作(5)
Mar 30 Javascript
jQuery查找dom的几种方法效率详解
May 17 jQuery
详解Vue-cli 创建的项目如何跨域请求
May 18 Javascript
JavaScript引用类型RegExp基本用法详解
Aug 09 Javascript
利用Promise自定义一个GET请求的函数示例代码
Mar 20 Javascript
a标签调用js的方法总结
Sep 05 Javascript
js抽奖转盘实现方法分析
May 16 Javascript
javascript移动端 电子书 翻页效果实现代码
Sep 07 #Javascript
使用 js 简单的实现 bind、call 、aplly代码实例
Sep 07 #Javascript
vue 使用高德地图vue-amap组件过程解析
Sep 07 #Javascript
vue 的 solt 子组件过滤过程解析
Sep 07 #Javascript
javascript的惯性运动实现代码实例
Sep 07 #Javascript
vue的滚动条插件实现代码
Sep 07 #Javascript
微信小程序页面滚动到指定位置代码实例
Sep 07 #Javascript
You might like
PHP与C#分别格式化文件大小的代码
2011/05/14 PHP
php数字游戏 计算24算法
2012/06/10 PHP
Thinkphp5.0 框架的请求方式与响应方式分析
2019/10/14 PHP
this[] 指的是什么内容 讨论
2007/03/24 Javascript
javascript 异常处理使用总结
2009/06/21 Javascript
40款非常有用的 jQuery 插件推荐(系列一)
2011/12/21 Javascript
formvalidator验证插件中有关ajax验证问题
2013/01/04 Javascript
jquery 添加节点的几种方法介绍
2013/09/04 Javascript
js去空格技巧分别去字符串前后、左右空格
2013/10/21 Javascript
在linux中使用包管理器安装node.js
2015/03/13 Javascript
javascript实现回到顶部特效
2015/05/06 Javascript
分享使用AngularJS创建应用的5个框架
2015/12/05 Javascript
修改Jquery Dialog 位置的实现方法
2016/08/26 Javascript
详解从Vue.js源码看异步更新DOM策略及nextTick
2017/10/11 Javascript
Angular实现较为复杂的表格过滤,删除功能示例
2017/12/23 Javascript
微信小程序的部署方法步骤
2018/09/04 Javascript
了解javascript中let和var及const关键字的区别
2019/05/24 Javascript
QML实现圆环颜色选择器
2019/09/25 Javascript
openlayers实现图标拖动获取坐标
2020/09/25 Javascript
python学习之matplotlib绘制散点图实例
2017/12/09 Python
Django给admin添加Action的步骤详解
2019/05/01 Python
python return逻辑判断表达式实现解析
2019/12/02 Python
使用Python将Exception异常错误堆栈信息写入日志文件
2020/04/08 Python
利用Opencv实现图片的油画特效实例
2021/02/28 Python
中国酒类在线零售网站:酒仙网
2016/08/20 全球购物
俄罗斯苹果优质经销商商店:iPort
2020/05/27 全球购物
运行时异常与一般异常有何异同?
2014/01/05 面试题
广播电视新闻学专业应届生求职信
2013/10/08 职场文书
通信工程专业毕业生推荐信
2013/12/25 职场文书
学生党员思想汇报范文
2014/01/09 职场文书
保护母亲河倡议书
2014/04/14 职场文书
幼儿园教研工作总结2015
2015/05/12 职场文书
2015年学校管理工作总结
2015/07/20 职场文书
2016教师校本培训心得体会
2016/01/08 职场文书
500字作文之关于爸爸
2019/11/14 职场文书
如何设置多台电脑共享打印机?多台电脑共享打印机的方法
2022/04/08 数码科技