• 华为授权培训中心
  • 腾讯云一级认证培训中心
  • 百度营销大学豫陕深授权运营中心
  • Oracle甲骨文OAEP中心
  • Microsoft Azure微软云合作伙伴
  • Unity公司战略合作伙伴
  • 普华基础软件战略合作伙伴
  • 新开普(股票代码300248)旗下丹诚开普投资
  • 中国互联网百强企业锐之旗旗下锐旗资本投资
联系客服
微信公众号
官方微博
0371-86532888

Jquery实现抖音时钟转动效果

来源:云和教育 时间:2019-12-23 阅读:357

前段时间在抖音看到这样一个效果,感觉很有意思就自己写了一下

一个风格奇特的时钟在不停的旋转,要实现这个效果首先我们分析下他的组成:有时、分、秒和日期等几部分

具体实现思路是使用定时器每隔1000ms获取当前时间,通过jquery结合css3的rotate属性,分别给时分秒设置转动角度来达到轮盘转动效果,具体实现代码如下

首先创建时分秒及日期的容器

<div class=”box”>

<ul>

<li id=”hours”></li>

<li id=”minutes”></li>

<li id=”seconds”></li>

<div class=”line”></div>

<div class=”date”></div>

</ul>

</div>

具体的各个刻度通过js动态创建

var date = [‘一’, ‘二’, ‘三’, ‘四’, ‘五’, ‘六’, ‘七’, ‘八’, ‘九’, ‘十’, ‘十一’, ‘十二’, ‘十三’, ‘十四’, ‘十五’, ‘十六’, ‘十七’, ‘十八’, ‘十九’, ‘二十’, ‘二十一’, ‘二十二’, ‘二十三’, ‘二十四’, ‘二十五’, ‘二十六’, ‘二十七’, ‘二十八’, ‘二十九’, ‘三十’, ‘三十一’, ‘三十二’, ‘三十三’, ‘三十四’, ‘三十五’, ‘三十六’, ‘三十七’, ‘三十八’, ‘三十九’, ‘四十’, ‘四十一’, ‘四十二’, ‘四十三’, ‘四十四’, ‘四十五’, ‘四十六’, ‘四十七’, ‘四十八’, ‘四十九’, ‘五十’, ‘五十一’, ‘五十二’, ‘五十三’, ‘五十四’, ‘五十五’, ‘五十六’, ‘五十七’, ‘五十八’, ‘五十九’, ‘六十’]//日期数组

var year = { 0: ‘零’, 1: ‘一’, 2: ‘二’, 3: ‘三’, 4: ‘四’, 5: ‘五’, 6: ‘六’, 7: ‘七’, 8: ‘八’, 9: ‘九’ }// 2019 根据年份的每一位数字去获得一个汉字数字,拼接成一个中文的年份

var month = [‘一’, ‘二’, ‘三’, ‘四’, ‘五’, ‘六’, ‘七’, ‘八’, ‘九’, ‘十’, ‘十一’, ‘十二’];//根据日期对象获取到的月份来获取中文的月份

var day = [‘一’, ‘二’, ‘三’, ‘四’, ‘五’, ‘六’, ‘七’, ‘八’, ‘九’, ‘十’, ‘十一’, ‘十二’, ‘十三’, ‘十四’, ‘十五’, ‘十六’, ‘十七’, ‘十八’, ‘十九’, ‘二十’, ‘二十一’, ‘二十二’, ‘二十三’, ‘二十四’, ‘二十五’, ‘二十六’, ‘二十七’, ‘二十八’, ‘二十九’, ‘三十’, ‘三十一’]//根据日期对象获取到的日期来获取中文的日期

遍历时分秒和日期,动态创建各个刻度并添加到对应的容器内

for (var i = 0; i < 24; i++) {//添加小时

$(‘#hours’).append(‘<div>’ + date[i] + ‘时</div>’)

}

for (var i = 0; i < 60; i++) {//添加分钟

$(‘#minutes’).append(‘<div>’ + date[i] + ‘分</div>’)

}

for (var i = 0; i < 60; i++) {//添加秒数

$(‘#seconds’).append(‘<div>’ + date[i] + ‘秒</div>’)

}

添加完时分秒之后设置为它们设置转动角度

setTimeout(function () {// 给时分秒 添加过渡属性 通过一个延时器来保证当所有的时分秒添加完成之后再给他们添加转动的角度

for (var i = 0; i < $(‘#hours div’).length; i++) {//遍历所有的小时

var deg = i * 15;

$(‘#hours div’).eq(i).css({//为每一个小时添加旋转的度数

transform: ‘rotate(‘ + -deg + ‘deg)’,

transition: ‘1s’

})

}

for (var i = 0; i < $(‘#minutes div’).length; i++) {//遍历所有的分钟数

var deg = i * 6;

$(‘#minutes div’).eq(i).css({//为每一个分钟添加旋转的度数

transform: ‘rotate(‘ + -deg + ‘deg)’,

transition: ‘1s ease .4s’//让分钟延迟0.4s再开始转动

})

}

for (var i = 0; i < $(‘#seconds div’).length; i++) {//遍历所有的秒数

var deg = i * 6;

$(‘#seconds div’).eq(i).css({//为每一个秒数添加旋转的度数

transform: ‘rotate(‘ + -deg + ‘deg)’,

transition: ‘1s ease .7s’//让秒数延迟0.7s再开始转动

})

}

}, 0)

设置定时器让时分秒动起来

setTimeout(function () {// 延时器 确保 当时分秒全部转动完成之后再开始获取当前的时间

setInterval(function () {// 每隔一秒 获取当前时间

var date = new Date();//创建一个当前时间的日期对象

var y = date.getFullYear() + ”;//获取date的年份

var m1 = date.getMonth();//获取date的月份

var d = date.getDate() – 1;//获取date的日期

var yArr = y.split(”);//把年份转换成一个数组

// console.log(yArr)

var year2 = ”, m2, d1;//声明最终拼接的年月日

for (var i = 0; i < yArr.length; i++) {//遍历yArr 跟年份的每一位数字去年份对象里换取对应的中文数字

year2 += year[yArr[i]]//拼接出最终的中文年份

}

m2 = month[m1];//根据获取到的月份 换取 中文月份

d1 = day[d];//根据获取到的日期 换取中文日期

var dateContent = year2 + ‘年’ + m2 + ‘月’ + d1 + ‘日’//拼接出最终的日期对象

$(‘.date’).html(dateContent)//把日期对象放入页面里

var h = date.getHours()-1;//获取date的时

var m = date.getMinutes()-1;//获取date的分

var s = date.getSeconds()-1;//获取date的秒

if (h == -1) {//如果小时数为0,代表要重新开始过渡了

$(‘#hours’).css({//让小时的容器瞬间旋转到 -15度

transform: ‘rotate(-30deg)’,

transition: ‘0s’

})

setTimeout(function () {//延时器 用来确保上边的代码执行完之后再进行过渡

$(‘#hours’).css({// 让小时的容器从 -30deg 过渡到 -15deg,这样就不会从345deg转一圈再回到0deg了

transform: ‘rotate(‘ + h * 15 + ‘deg)’,

transition: ‘0.3s’

})

}, 0)

} else {//

$(‘#hours’).css({//

transform: ‘rotate(‘ + h * 15 + ‘deg)’

})

}

 

if (m == -1) {// 延时器 用来确保上边的代码执行完之后再进行过渡

$(‘#minutes’).css({//让分钟的容器从 -12deg 过渡到 -6deg,这样就不会从354deg转一圈再回到0deg了

transform: ‘rotate(-12deg)’,

transition: ‘0s’

})

setTimeout(function () {//

$(‘#minutes’).css({

transform: ‘rotate(‘ + m * 6 + ‘deg)’,

transition: ‘0.3s’

})

}, 0)

} else {//

$(‘#minutes’).css({

transform: ‘rotate(‘ + m * 6 + ‘deg)’

})

}

 

if (s == -1) {// 延时器 用来确保上边的代码执行完之后再进行过渡

$(‘#seconds’).css({////让分钟的容器从 -12deg 过渡到 -6deg,这样就不会从354deg转一圈再回到0deg了

transform: ‘rotate(-12deg)’,

transition: ‘0s’

})

setTimeout(function () {//

$(‘#seconds’).css({

transform: ‘rotate(‘ + s * 6 + ‘deg)’,

transition: ‘0.3s’

})

}, 0)

} else {//

$(‘#seconds’).css({

transform: ‘rotate(‘ + s * 6 + ‘deg)’,

transition: ‘0.3s’

})

}

}, 1000)

}, 1700)

以上是时钟的js实现代码,当然最重要的是在使用jQuery之前先引入jQuery。

下面是时钟的样式:

li {

list-style: none;

}

 

.box {

overflow: hidden;

}

 

ul {

width: 700px;

height: 700px;

position: relative;

margin: 100px auto;

}

 

#hours,

#minutes,

#seconds,

.date {

position: absolute;

top: 0;

bottom: 0;

left: 0;

right: 0;

margin: auto;

transition: 0.3s;

}

 

#hours {

width: 360px;

height: 360px;

}

 

#minutes {

width: 520px;

height: 520px;

}

 

#seconds {

width: 700px;

height: 700px;

}

 

#hours div,

#minutes div,

#seconds div {

width: 100%;

height: 20px;

transform-origin: center center;/* 2d或者3d转换的基点 */

position: absolute;

top: 0;

bottom: 0;

left: 0;

right: 0;

margin: auto;

text-align: right;

color: #666;

font-size: 14px;

}

 

.line {

width: 350px;

height: 0;

border-bottom: 1px solid rgba(0, 0, 0, .6);

position: absolute;

right: 0;

top: 360px;

}

 

.date {

width: 200px;

height: 20px;

line-height: 20px;

text-align: center;

}

时钟效果还有许多需要改进的地方,兼容和适配还有很大的提升空间,但当打开页面时钟开始运转让我的小伙伴眼前一亮的时候,还是小小的满足了一下我的虚荣心,嘿嘿。