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 相关文章推荐
jQueryUI写一个调整分类的拖放效果实现代码
May 10 Javascript
表单提交前触发函数返回true表单才会提交
Mar 11 Javascript
jquery操作checkbox实现全选和取消全选
May 02 Javascript
jQuery设置和获取HTML、文本和值示例
Jul 08 Javascript
Jquery实现地铁线路指示灯提示牌效果的方法
Mar 02 Javascript
AngularJS 遇到的小坑与技巧小结
Jun 07 Javascript
用iframe实现不刷新整个页面上传图片的实例
Nov 18 Javascript
Bootstrap基本组件学习笔记之列表组(11)
Dec 07 Javascript
jquery实现输入框实时输入触发事件代码
Dec 21 Javascript
原生JS实现旋转轮播图+文字内容切换效果【附源码】
Sep 29 Javascript
JavaScript实时更新当前的时间的示例代码
Jul 15 Javascript
原生JavaScript实现随机点名表
Jan 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
Syphon 秘笈
2021/03/03 冲泡冲煮
数据库的日期格式转换
2006/10/09 PHP
深入解析PHP中的(伪)多线程与多进程
2013/07/01 PHP
php中如何同时使用session和cookie来保存用户登录信息
2013/07/05 PHP
php递归创建目录的方法
2015/02/02 PHP
教你识别简单的免查杀PHP后门
2015/09/13 PHP
JavaScript 原型与继承说明
2010/06/09 Javascript
JavaScript基础函数整理汇总
2015/01/30 Javascript
理解javascript定时器中的单线程
2016/02/23 Javascript
vue.js实现只弹一次弹框
2018/01/29 Javascript
JS 实现百度搜索功能
2018/02/01 Javascript
vue-devtools的安装步骤
2018/04/23 Javascript
Jquery获取radio选中值实例总结
2019/01/17 jQuery
Javascript中的奇葩知识,你知道吗?
2021/01/25 Javascript
python使用urllib模块开发的多线程豆瓣小站mp3下载器
2014/01/16 Python
利用Python和OpenCV库将URL转换为OpenCV格式的方法
2015/03/27 Python
Python编程之属性和方法实例详解
2015/05/19 Python
Python 多线程实例详解
2017/03/25 Python
Python进阶-函数默认参数(详解)
2017/05/18 Python
Python高级特性与几种函数的讲解
2019/03/08 Python
浅谈Python小波分析库Pywavelets的一点使用心得
2019/07/09 Python
python多进程下实现日志记录按时间分割
2019/07/22 Python
Python通用唯一标识符uuid模块使用案例
2020/09/10 Python
Python实现加密的RAR文件解压的方法(密码已知)
2020/09/11 Python
matplotlib部件之套索Lasso的使用
2021/02/24 Python
浅谈HTML5 &amp; CSS3的新交互特性
2016/07/19 HTML / CSS
意大利制造的西装、衬衫和针对男士量身定制的服装:Lanieri
2018/04/08 全球购物
创业计划书中要认真思考的问题
2013/12/28 职场文书
小学毕业感言300字
2014/02/19 职场文书
学生请假条格式
2014/04/11 职场文书
一份教室追逐打闹的检讨书
2014/09/27 职场文书
学前班学生评语
2014/12/29 职场文书
职代会闭幕词
2015/01/28 职场文书
工作年限证明模板
2015/06/15 职场文书
vue使用refs获取嵌套组件中的值过程
2022/03/31 Vue.js
python绘制简单直方图(质量分布图)的方法
2022/04/21 Python