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 相关文章推荐
通用于ie和firefox的函数 GetCurrentStyle (obj, prop)
Dec 27 Javascript
又一个小巧的图片预加载类
May 05 Javascript
javascript getElementsByName()的用法说明
Jul 31 Javascript
zeroclipboard复制到剪切板的flash
Aug 04 Javascript
自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选与多选下拉框
Dec 12 Javascript
如何判断出一个js对象是否一个dom对象
Nov 24 Javascript
关于Javascript中document.cookie的使用
Mar 08 Javascript
详解vue2.0 transition 多个元素嵌套使用过渡
Jun 19 Javascript
深入研究React中setState源码
Nov 17 Javascript
three.js搭建室内场景教程
Dec 30 Javascript
JavaScript动态创建二维数组的方法示例
Feb 01 Javascript
解决VUE项目localhost端口服务器拒绝连接,只能用127.0.0.1的问题
Aug 14 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
虹吸式咖啡探讨–研磨
2021/03/03 冲泡冲煮
多数据表共用一个页的新闻发布
2006/10/09 PHP
PHP注释实例技巧
2008/10/03 PHP
php实现从上传文件创建缩略图的方法
2015/04/02 PHP
CI框架表单验证实例详解
2016/11/21 PHP
JavaScript DOM学习第一章 W3C DOM简介
2010/02/19 Javascript
JSON无限折叠菜单编写实例
2013/12/16 Javascript
JavaScript禁止页面操作的示例代码
2013/12/17 Javascript
js添加select下默认的option的value和text的方法
2014/10/19 Javascript
浅谈jQuery animate easing的具体使用方法(推荐)
2016/06/17 Javascript
Vue 过渡(动画)transition组件案例详解
2017/01/22 Javascript
简单谈谈gulp-changed插件
2017/02/21 Javascript
jQuery实现移动端Tab选项卡效果
2017/03/15 Javascript
vue-resouce设置请求头的三种方法
2017/09/12 Javascript
微信小程序swiper组件用法实例分析【附源码下载】
2017/12/07 Javascript
JS实现的将html转为pdf功能【基于浏览器端插件jsPDF】
2018/02/06 Javascript
微信小程序登录数据解密及状态维持实例详解
2019/05/06 Javascript
layer插件实现在弹出层中弹出一警告提示并关闭弹出层的方法
2019/09/24 Javascript
在Chrome DevTools中调试JavaScript的实现
2020/04/07 Javascript
vue 使用lodash实现对象数组深拷贝操作
2020/09/10 Javascript
python用于url解码和中文解析的小脚本(python url decoder)
2013/08/11 Python
Python查看多台服务器进程的脚本分享
2014/06/11 Python
使用 Python 获取 Linux 系统信息的代码
2014/07/13 Python
在Python中使用lambda高效操作列表的教程
2015/04/24 Python
python字符串编码识别模块chardet简单应用
2015/06/15 Python
在Apache服务器上同时运行多个Django程序的方法
2015/07/22 Python
Python3.2模拟实现webqq登录
2016/02/15 Python
详解字典树Trie结构及其Python代码实现
2016/06/03 Python
Python使用Selenium+BeautifulSoup爬取淘宝搜索页
2018/02/24 Python
Python+OpenCv制作证件图片生成器的操作方法
2019/08/21 Python
C#笔试题和英文面试题
2013/02/07 面试题
幼儿园大班新学期寄语
2014/01/18 职场文书
《记金华的双龙洞》教学反思
2014/04/19 职场文书
2014年度安全生产目标管理责任书
2014/07/25 职场文书
2014和解协议书范文
2014/09/15 职场文书
被告代理词范文
2015/05/25 职场文书