小白学VUE——实现抖音时钟（NPM方式）

工具安装：

1.Nodejs：我喜欢用免安装版，自己配置，用的放心（但是更操心，55555~~~~~），这里不多说，如果Nodejs还不会，那还是得先了解一下Nodejs的基本用法（请自行百度）

2.安装Vue及相关：如何安装Vue，如何创建项目也不多说了（仍然自行百度）。另外为了方便，需要SCSS的支持，需要安装scss-loader解析css样式（也可以自己替换成css，省去安装步骤）。

实现效果：

实现原理：

1.设定时钟入口（Timer.vue）

2.设定年（Year.vue）、月（Month.vue）、周（Week.vue）、日（Day.vue）、午时（Apm.vue）、小时（Hour.vue）、分钟（Minute.vue）、秒钟（Second.vue）组件

3.传参，在时钟入口设定一个定时器，每秒钟计算当前时间，将当前时间传递给子组件，更新组件状态，从而实现时钟显示

4.设定时间的显示格式数据，也就是语言库（store.ts）

因此文件目录如下：

实现步骤：

1.新建好所有目录及文件

2.在App.vue中引入Timer.vue，以便查看效果（用的是Vue原装自带Demo，就只加了一个链接）

3.在main.ts中添加store文件夹扫描，方便后面调用相关引用

4.定义Timer组件（将整个时钟定义为一个组件，将组件在App.vue页面中显示），在组件中嵌套时钟子组件（时分秒等组件）

Timer.vue代码如下：

<!--定义时钟组件-->
<template><div id="timer"><!--秒钟子组件--><Second :second="second" :secondBox="secondBox" :secondRange="320"></Second><!--分钟子组件--><Minute :minute="minute" :minuteBox="minuteBox" :minuteRange="270"></Minute><!--小时子组件--><Hour :hour="hour" :hourBox="hourBox" :hourRange="220"></Hour><!--午时子组件--><Apm :apm="apm" :apmBox="apmBox" :apmRange="185"></Apm><!--日期子组件--><Day :day="day" :dayBox="dayBox" :dayRange="150"></Day><!--周子组件--><Week :week="week" :weekBox="weekBox" :weekRange="100"></Week><!--月度子组件--><Month :month="month" :monthBox="monthBox" :monthRange="50"></Month><!--年度子组件--><Year :year="year"></Year><!--语言转换开关--><ul style="bottom: -35px;"><li><input type="checkbox" id="checkbox" @click="switchFont" style="z-index: 9999999;position: relative;"></li></ul></div>
</template>
<script>
//引入各个组件
import Year from '@/components/timer/Year.vue'
import Month from '@/components/timer/Month.vue'
import Week from '@/components/timer/Week.vue'
import Day from '@/components/timer/Day.vue'
import Apm from '@/components/timer/Apm.vue'
import Hour from '@/components/timer/Hour.vue'
import Minute from '@/components/timer/Minute.vue'
import Second from '@/components/timer/Second.vue'
import store from '../store/timer/store.ts'export default {name : 'Timer',//引入组件components : {Year,Month,Week,Day,Apm,Hour,Minute,Second},data() {//初始化时间return {//当前时间second : "",minute : "",hour : "",apm : "",day : "",week : "",month : "",year : "",//周期列表（用于存放对应的语言库）secondBox : [],minuteBox : [],hourBox : [],apmBox : [],dayBox : [],weekBox : [],monthBox : [],//当月天数（动态获取，根据当月天数要自动计算扇区角度，网络上有很多代码直接写成固定的30天）days : 0,//字体开关（默认简体中文）fontType : "Simplified"}},methods: {//定时器启动方法start() {//初始化语言库，装配语言库（先把底图数据显示出来）this.makeDate();//获取当前时间（计算当前时间，实时更新）setInterval(() => {let date = new Date();//组装年份this.year = date.getFullYear();//组装月份this.month = date.getMonth() + 1;//获取当月总天数this.days = new Date(this.year,this.month,0).getDate();//获取当年的天干地支信息this.year = store.sky[this.year % 10] + store.land[this.year % 12];//获取星期几this.week = date.getDay();//获取当天几号this.day = date.getDate();//获取当前小时（12小时制）this.hour = (date.getHours() > 12 ? (date.getHours() -12) : date.getHours());;//获取当前分钟（从0分钟开始，因此分钟需增加1）this.minute = date.getMinutes() + 1;//获取当前秒钟（从0秒钟开始，因此秒钟需增加1）this.second = date.getSeconds() + 1;//获取当前是上午还是下午if(this.hour > 12) {this.apm = 2;}else{this.apm = 1;}//组装数据（更新底图，重新装配，达到时钟转动的效果）this.makeDate();}, 1000);},makeDate(){//初始化数据this.secondBox = [];this.minuteBox = [];this.hourBox = [];this.apmBox = [];this.dayBox = [];this.weekBox = [];this.monthBox = [];//获取配置数据let fdata = null;if(this.fontType == "Simplified"){fdata = store.format_Simplified;}else{fdata = store.format_Traditional;}//组装月for(let i=1 ; i<= 12 ; i++){if(i <= 10){this.monthBox.push(fdata[i] + "月");}else {this.monthBox.push(fdata[10] + fdata[i % 10] + "月");}}//组装周for(let i=1 ; i<= 7 ; i++){this.weekBox.push("星期" + fdata[i]);}//组装日for(let i=1 ; i<= this.days ; i++){if(i <= 10){this.dayBox.push(fdata[i] + "日");}else if(i < 20){this.dayBox.push(fdata[10] + fdata[i % 10] + "日");}else{if(i % 10 == 0){this.dayBox.push(fdata[parseInt(i / 10)] + fdata[10] + "日");}else{this.dayBox.push(fdata[parseInt(i / 10)] + fdata[10] + fdata[i % 10] + "日");}}}//组装午时this.apmBox.push("上午");this.apmBox.push("下午");//组装小时for(let i=1 ; i<= 12 ; i++){if(i <= 10){this.hourBox.push(fdata[i] + "点");}else{this.hourBox.push(fdata[10] + fdata[i % 10] + "点");}}//组装分钟for(let i=0 ; i< 60 ; i++){if(i <= 10){this.minuteBox.push(fdata[i] + "分");}else if(i < 20){this.minuteBox.push(fdata[10] + fdata[i % 10] + "分");}else{if(i % 10 == 0){this.minuteBox.push(fdata[parseInt(i / 10)] + fdata[10] + "分");}else{this.minuteBox.push(fdata[parseInt(i / 10)] + fdata[10] + fdata[i % 10] + "分");}}}//组装秒for(let i=0 ; i< 60 ; i++){if(i <= 10){this.secondBox.push(fdata[i] + "秒");}else if(i < 20){this.secondBox.push(fdata[10] + fdata[i % 10] + "秒");}else{if(i % 10 == 0){this.secondBox.push(fdata[parseInt(i / 10)] + fdata[10] + "秒");}else{this.secondBox.push(fdata[parseInt(i / 10)] + fdata[10] + fdata[i % 10] + "秒");}}}},//语言开关，若当前为简体，则转换为繁体，反之亦然switchFont(){this.fontType = (this.fontType == "Simplified" ? "Traditional" : "Simplified");}},created() {//页面加载完成后启动this.start();}
}
</script><style lang="scss">
//时钟样式
#timer {ul {list-style-type: none;padding: 0;position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto;height: 60px;width: 60px;transition: 0.1s 0.1s ease-in;li {position: absolute;height: 60px;width: 60px;color: rgb(204, 46, 46);text-align: center;font-size: 9px;line-height: 60px;&.hover {text-shadow: #009be5 0px 0px 10px, #98f24e 0px 0px 20px, #0c16d6 0px 0px 30px, #b5e927 0px 0px 40px, #d32cbe 0px 0px 70px, #dc1313 0px 0px 80px, #9a17c0 0px 0px 100px;}}}
}
</style>

5.定义月、周、日、午时、小时、分钟、秒钟组件，代码大同小异（就接收参数不同），这里用月组件来展示

Month.vue

<template><!--将旗下内容按360度等分后并逆时针旋转--><ul :style="{transform:`rotate(${-360 / list.length * (rotates - 1)}deg)`}"><!--遍历语言库数据，当前时间采用高亮样式--><li v-for="(item,index) in list" :key="index" :class="{hover: index == rotates - 1}" :style="{transform:`rotate(${360 / list.length * index}deg)  translateX(${range}px)`}">{{ item }}</li></ul>
</template>
<script>
//使用props接受父组件传递的月度数据，其中包含month、monthBox、monthRange
//其他周、日、天等组件，只是接收的数据不同，监听的数据不同，其他都相同（所有控制都在父组件中）
//注意watch用法，这里有坑
export default {name : 'month',props : ["month","monthBox","monthRange"],data() {return {rotates : "",list : [],range : 0}},//添加vue的监听器（watch），对数值变化进行监听，让数据动起来watch : {month(val) {this.rotates = val;},monthBox(val){this.list = val;},monthRange: {handler(val){this.range = val;},immediate : true}}
}
</script>
<style scoped lang="scss">
//层级样式，不要也行
ul {z-index: 2;
}
</style>

这里有人就要问了，为什么这些代码相同，为什么我不写在一起呢，嗯嗯，这是为了满足面向对象开发的要求啊~~~

6.定义年度组件

Year.vue

<template><ul><li>{{yearLabel}}</li></ul>
</template><script>
export default {name : "year",props : ["year"],data() {return {yearLabel : ""}},watch : {year(val){this.yearLabel = val;}}
}
</script>

7.我们来看看语言库里是什么样子的

store.ts

export default {format_Traditional : ['零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖', '拾', '佰', '仟', '万'],format_Simplified : ['〇', '一', '二', '三', '四', '五', '六', '七', '八', '九', '十', '百', '千', '万'],sky : ['庚', '辛', '壬', '癸', '甲', '乙', '丙', '丁', '戊', '己'],land : ['申', '酉', '戌', '亥','子', '丑', '寅', '卯', '辰', '巳', '午', '未']
}

运行看看，原理是不是很简单？

代码有参考网络上的某大神开发Demo，原文找不到了，无法当面感谢，原理有借鉴，但代码重整了，若存在侵权请告知删除！

小白学VUE——实现抖音时钟（NPM方式）相关推荐

vue仿抖音视频列表（兼容微信内置X5浏览器）
vue 仿抖音视频列表(兼容微信内置X5浏览器)https://blog.csdn.net/superKM/article/details/87603255制作仿抖音视频列表遇到很多坑,特别是安卓微 ...
抖音投放怎么收费?抖音投放展现方式有哪些
随着移动互联网时代的发展,各种营销手段不断"爆发",而抖音平台受欢迎度较高,据数据统计,用户超过5亿.所以,针对抖音推广的收费是大家迫切想要了解的.今天就来和大家一道分享一下,抖音 ...
用计算机怎么弹学猫叫,抖音我们一起学猫叫计算器谱分享
有很多的小伙伴们都想知道我们一起学猫叫计算器谱怎么弹,下面PConline小编为大家带来抖音我们一起学猫叫计算器谱分享,感兴趣的小伙伴们快来一起了解一下吧! 我们一起学猫叫计算器谱视频地址: 抖音学猫 ...
仿抖音视频自动播放html,vue 仿抖音视频列表（兼容微信内置X5浏览器）
制作仿抖音视频列表遇到很多坑,特别是安卓微信内置浏览器,让人脑壳疼,核心代码不多便于理解组件用到了vant 中的swiper滑动组件 h5 原生 video 属性 webkit-playsinl ...
用计算机唱歌弹奏学猫叫,抖音我们一起学猫叫是什么歌我们一起学猫叫歌词...
我们一起学猫叫一起喵喵喵喵是什么歌?最近,抖音上的一首我们一起学猫叫的歌很火,很多小伙伴在问这首歌是什么谁唱的,那么快随小编一起来看看下面的相关介绍吧! 抖音我们一起学猫叫是什么歌? 据悉,这首歌曲的 ...
学微信，抖音也上线PC版
近日,抖音居然也上线PC版了,目前仅有Windows版本,mac版还需等待. 先看几张抖音PC版界面,就像一个视频播放器. 可以坐在电脑前,刷抖音了. 结合最近微信PC版上上线「视频号」入口. 我们看 ...
抖音通过什么方式变现，抖音变现方式分别有什么
大家发觉很多人都遭遇着这类情景,账号粉许多,可是烦恼没法变现,或者变现艰难. 造成这类状况,一般有二种缘故一是在账号运营早期就沒有想清晰究竟要怎么变现,仅仅见到他人干什么活,自身就发什么結果粉絲拥有, ...
国际版抖音正确打开方式
几乎不刷抖音,本着学习英语的态度,午间休息的时候刷了会,发现...国内外都差不多,所以又pass了这篇文章记录下,也算给广大抖音爱好者换种方式~刷国内的不如刷国外的~ 1.安装谷歌应用首先需要安装 ...
从开发小白到入职抖音音视频开发岗位技术总结
1.职业发展的迷茫前几天发了一篇关于音视频开发学习录总结,文章链接:https://blog.csdn.net/Linuxhus/article/details/112705431 收到一些网友的来 ...
vue 仿照抖音视频效果（滑动切换）
看个效果图,再决定学不学 ================ 好像还凑合吧那就学起来吧~~~~~~~~~~~~~~~~~~~~~~~ <template><div class=&qu ...

小白学VUE——实现抖音时钟（NPM方式）

小白学VUE——实现抖音时钟（NPM方式）相关推荐

最新文章

热门文章