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 相关文章推荐
ExtJs之带图片的下拉列表框插件
Mar 04 Javascript
niceTitle 基于jquery的超链接提示插件
May 31 Javascript
jQuery Tools tab(幻灯片)
Jul 14 Javascript
sogou地图API用法实例教程
Sep 11 Javascript
深入理解JavaScript系列(28):设计模式之工厂模式详解
Mar 03 Javascript
js日期范围初始化得到前一个月日期的方法
May 05 Javascript
Javascript动画效果(2)
Oct 11 Javascript
bootstrap提示标签、提示框实现代码
Dec 28 Javascript
Vue2路由动画效果的实现代码
Jul 10 Javascript
vue2过滤器模糊查询方法
Sep 16 Javascript
JS/jQuery实现超简单的Table表格添加,删除行功能示例
Jul 31 jQuery
jquery实现的分页显示功能示例
Aug 23 jQuery
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 中文处理函数集合
2008/08/27 PHP
elgg 获取文件图标地址的方法
2010/03/20 PHP
深入php数据采集的详解
2013/06/02 PHP
[原创]php获取数组中键值最大数组项的索引值
2015/03/17 PHP
PHP实现的迪科斯彻(Dijkstra)最短路径算法实例
2017/09/16 PHP
JS鼠标事件大全 推荐收藏
2011/11/01 Javascript
JS cookie中文乱码解决方法
2014/01/28 Javascript
js监听鼠标事件控制textarea输入字符串的个数
2014/09/29 Javascript
jquery实现动态操作select选中
2015/02/11 Javascript
jQuery实现悬浮在右上角的网页客服效果代码
2015/10/24 Javascript
基于PHP和Mysql相结合使用jqGrid读取数据并显示
2015/12/02 Javascript
基于javascript制作经典传统的拼图游戏
2016/03/22 Javascript
通过sails和阿里大于实现短信验证
2017/01/04 Javascript
JS实现的ajax和同源策略(实例讲解)
2017/12/01 Javascript
vue实现前台列表数据过滤搜索、分页效果
2019/05/28 Javascript
jQuery操作cookie的示例代码
2019/06/05 jQuery
vue下使用nginx刷新页面404的问题解决
2019/08/02 Javascript
解决Vue 给mapState中定义的属性赋值报错的问题
2020/06/22 Javascript
详解JavaScript之ES5的继承
2020/07/08 Javascript
[47:50]Secret vs VP 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Python实现的简单算术游戏实例
2015/05/26 Python
python字符类型的一些方法小结
2016/05/16 Python
详解Python中的Descriptor描述符类
2016/06/14 Python
浅谈使用Python内置函数getattr实现分发模式
2018/01/22 Python
浅谈Python Opencv中gamma变换的使用详解
2018/04/02 Python
pandas数据框,统计某列数据对应的个数方法
2018/04/11 Python
浅谈Pytorch中的torch.gather函数的含义
2019/08/18 Python
python中下标和切片的使用方法解析
2019/08/27 Python
python实现简易版学生成绩管理系统
2020/06/22 Python
Python如何将装饰器定义为类
2020/07/30 Python
香港演唱会订票网站:StubHub香港
2019/10/10 全球购物
西安交大自主招生自荐信
2014/01/27 职场文书
网站客服岗位职责
2014/04/05 职场文书
缓刑人员思想汇报500字
2014/09/12 职场文书
2014年个人债务授权委托书范本
2014/09/22 职场文书
辩论会主持词
2015/07/03 职场文书