1 Unstar Star 1 Fork 0

liangguifeng / circular-clockJavaScript

Create your Gitee Account
Explore and code with more than 5 million developers,Free private repositories !:)
Sign up
This repository doesn't specify license. Without author's permission, this code is only for learning and cannot be used for other purposes.
抖音上的圆形时钟 spread retract

Clone or download
index.html 18.06 KB
Copy Edit Web IDE Raw Blame History
liangguifeng authored 2019-12-20 14:40 . 抖音圆形时钟
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>在线小时钟</title>
<script src="./index.js"></script>
<style>
html,
body {
width: 100%;
height: 100%;
font-size: 12px;
}
#clock {
font-weight: bold;
width: 700px;
height: 700px;
margin: 50px auto;
position: relative;
color: #606266;
}
.years,
.months,
.days,
.hours,
.mins,
.seconds {
position: absolute;
left: 50%;
top: 50%;
line-height: 30px;
height: 30px;
margin-top: -15px;
width: 350px;
transform-origin: 0 15px;
}
.transform {
transition: transform 1s;
}
.months-item,
.days-item,
.hours-item,
.mins-item,
.seconds-item {
position: absolute;
transform-origin: 0 15px;
transform: rotate(0);
width: 100%;
box-sizing: border-box;
}
.years {
width: 100px;
text-align: center;
margin-left: -50px;
color: #f00;
}
.months-item {
transition: transform 3s;
padding-left: 46px;
}
.days-item {
padding-left: 96px;
transition: transform 7.5s;
}
.hours-item {
padding-left: 160px;
transition: transform 6s;
}
.mins-item {
padding-left: 226px;
transition: transform 7.5s;
}
.seconds-item {
padding-left: 300px;
transition: transform 7.5s;
}
.text-bold {
color: #f00;
}
</style>
</head>
<body>
<div id="clock">
<div class="years" style="'font-weight':bold">{{now_years | yearFormat}}</div>
<div class="months" :style="{transform: 'rotate('+-30*now_months+'deg)'}" :class="{transform:now_months!==0}">
<div class="months-item" v-for="(item,index) in months" :key="item.name"
:class="{ 'text-bold' : index === now_months }" :style="{transform: 'rotate('+30*item.index+'deg)'}">
{{item.name}}</div>
</div>
<div class="days" :style="{transform: 'rotate('+360/days.length*now_days+'deg)'}"
:class="{transform:now_days!==0}">
<div class="days-item" v-for="(item,index) in days" :key="item.name"
:class="{ 'text-bold' : index === now_days }"
:style="{transform: 'rotate('+-360/days.length*item.index+'deg)'}">{{item.name}}</div>
</div>
<div class="hours" :style="{transform: 'rotate('+-15*now_hours+'deg)'}" :class="{transform:now_hours!==0}">
<div class="hours-item" v-for="(item,index) in hours" :key="item.name"
:class="{ 'text-bold' : index === now_hours }" :style="{transform: 'rotate('+15*item.index+'deg)'}">
{{item.name}}</div>
</div>
<div class="mins" :style="{transform: 'rotate('+6*now_mins+'deg)'}" :class="{transform:now_mins!==0}">
<div class="mins-item" v-for="(item,index) in mins" :key="item.name"
:class="{ 'text-bold' : index === now_mins }" :style="{transform: 'rotate('+-6*item.index+'deg)'}">
{{item.name}}</div>
</div>
<div class="seconds" :style="{transform: 'rotate(' + -6*now_seconds +'deg)'}"
:class="{transform:now_seconds!==0}">
<div class="seconds-item" v-for="(item,index) in seconds" :key="item.name"
:class="{ 'text-bold' : index === now_seconds }" :style="{transform: 'rotate('+6*item.index+'deg)'}">
{{item.name}}</div>
</div>
</div>
<script>
var vm = new Vue({
el: '#clock',
filters: {
yearFormat(value) {
let zw = ['', '', '', '', '', '', '', '', '', ''];
let num_arr = (value + '').split('');
num_arr.forEach((el, index, data) => {
data[index] = zw[el];
});
return num_arr.join('');
}
},
data: {
months: [
{ name: "一月", index: 0 },
{ name: "二月", index: 0 },
{ name: "三月", index: 0 },
{ name: "四月", index: 0 },
{ name: "五月", index: 0 },
{ name: "六月", index: 0 },
{ name: "七月", index: 0 },
{ name: "八月", index: 0 },
{ name: "九月", index: 0 },
{ name: "十月", index: 0 },
{ name: "十一月", index: 0 },
{ name: "十二月", index: 0 }
],
days: [],
days_30: [
{ name: "一日", index: 0 },
{ name: "二日", index: 0 },
{ name: "三日", index: 0 },
{ name: "四日", index: 0 },
{ name: "五日", index: 0 },
{ name: "六日", index: 0 },
{ name: "七日", index: 0 },
{ name: "八日", index: 0 },
{ name: "九日", index: 0 },
{ name: "十日", index: 0 },
{ name: "十一日", index: 0 },
{ name: "十二日", index: 0 },
{ name: "十三日", index: 0 },
{ name: "十四日", index: 0 },
{ name: "十五日", index: 0 },
{ name: "十六日", index: 0 },
{ name: "十七日", index: 0 },
{ name: "十八日", index: 0 },
{ name: "十九日", index: 0 },
{ name: "二十日", index: 0 },
{ name: "二十一日", index: 0 },
{ name: "二十二日", index: 0 },
{ name: "二十三日", index: 0 },
{ name: "二十四日", index: 0 },
{ name: "二十五日", index: 0 },
{ name: "二十六日", index: 0 },
{ name: "二十七日", index: 0 },
{ name: "二十八日", index: 0 },
{ name: "二十九日", index: 0 },
{ name: "三十日", index: 0 }
],
days_31: [
{ name: "一日", index: 0 },
{ name: "二日", index: 0 },
{ name: "三日", index: 0 },
{ name: "四日", index: 0 },
{ name: "五日", index: 0 },
{ name: "六日", index: 0 },
{ name: "七日", index: 0 },
{ name: "八日", index: 0 },
{ name: "九日", index: 0 },
{ name: "十日", index: 0 },
{ name: "十一日", index: 0 },
{ name: "十二日", index: 0 },
{ name: "十三日", index: 0 },
{ name: "十四日", index: 0 },
{ name: "十五日", index: 0 },
{ name: "十六日", index: 0 },
{ name: "十七日", index: 0 },
{ name: "十八日", index: 0 },
{ name: "十九日", index: 0 },
{ name: "二十日", index: 0 },
{ name: "二十一日", index: 0 },
{ name: "二十二日", index: 0 },
{ name: "二十三日", index: 0 },
{ name: "二十四日", index: 0 },
{ name: "二十五日", index: 0 },
{ name: "二十六日", index: 0 },
{ name: "二十七日", index: 0 },
{ name: "二十八日", index: 0 },
{ name: "二十九日", index: 0 },
{ name: "三十日", index: 0 },
{ name: "三十一日", index: 0 }
],
hours: [
{ name: "零时", index: 0 },
{ name: "一时", index: 0 },
{ name: "二时", index: 0 },
{ name: "三时", index: 0 },
{ name: "四时", index: 0 },
{ name: "五时", index: 0 },
{ name: "六时", index: 0 },
{ name: "七时", index: 0 },
{ name: "八时", index: 0 },
{ name: "九时", index: 0 },
{ name: "十时", index: 0 },
{ name: "十一时", index: 0 },
{ name: "十二时", index: 0 },
{ name: "十三时", index: 0 },
{ name: "十四时", index: 0 },
{ name: "十五时", index: 0 },
{ name: "十六时", index: 0 },
{ name: "十七时", index: 0 },
{ name: "十八时", index: 0 },
{ name: "十九时", index: 0 },
{ name: "二十时", index: 0 },
{ name: "二十一时", index: 0 },
{ name: "二十二时", index: 0 },
{ name: "二十三时", index: 0 }
],
mins: [
{ name: "零分", index: 0 },
{ name: "一分", index: 0 },
{ name: "二分", index: 0 },
{ name: "三分", index: 0 },
{ name: "四分", index: 0 },
{ name: "五分", index: 0 },
{ name: "六分", index: 0 },
{ name: "七分", index: 0 },
{ name: "八分", index: 0 },
{ name: "九分", index: 0 },
{ name: "十分", index: 0 },
{ name: "十一分", index: 0 },
{ name: "十二分", index: 0 },
{ name: "十三分", index: 0 },
{ name: "十四分", index: 0 },
{ name: "十五分", index: 0 },
{ name: "十六分", index: 0 },
{ name: "十七分", index: 0 },
{ name: "十八分", index: 0 },
{ name: "十九分", index: 0 },
{ name: "二十分", index: 0 },
{ name: "二十一分", index: 0 },
{ name: "二十二分", index: 0 },
{ name: "二十三分", index: 0 },
{ name: "二十四分", index: 0 },
{ name: "二十五分", index: 0 },
{ name: "二十六分", index: 0 },
{ name: "二十七分", index: 0 },
{ name: "二十八分", index: 0 },
{ name: "二十九分", index: 0 },
{ name: "三十分", index: 0 },
{ name: "三十一分", index: 0 },
{ name: "三十二分", index: 0 },
{ name: "三十三分", index: 0 },
{ name: "三十四分", index: 0 },
{ name: "三十五分", index: 0 },
{ name: "三十六分", index: 0 },
{ name: "三十七分", index: 0 },
{ name: "三十八分", index: 0 },
{ name: "三十九分", index: 0 },
{ name: "四十分", index: 0 },
{ name: "四十一分", index: 0 },
{ name: "四十二分", index: 0 },
{ name: "四十三分", index: 0 },
{ name: "四十四分", index: 0 },
{ name: "四十五分", index: 0 },
{ name: "四十六分", index: 0 },
{ name: "四十七分", index: 0 },
{ name: "四十八分", index: 0 },
{ name: "四十九分", index: 0 },
{ name: "五十分", index: 0 },
{ name: "五十一分", index: 0 },
{ name: "五十二分", index: 0 },
{ name: "五十三分", index: 0 },
{ name: "五十四分", index: 0 },
{ name: "五十五分", index: 0 },
{ name: "五十六分", index: 0 },
{ name: "五十七分", index: 0 },
{ name: "五十八分", index: 0 },
{ name: "五十九分", index: 0 }
],
seconds: [
{ name: "零秒", index: 0 },
{ name: "一秒", index: 0 },
{ name: "二秒", index: 0 },
{ name: "三秒", index: 0 },
{ name: "四秒", index: 0 },
{ name: "五秒", index: 0 },
{ name: "六秒", index: 0 },
{ name: "七秒", index: 0 },
{ name: "八秒", index: 0 },
{ name: "九秒", index: 0 },
{ name: "十秒", index: 0 },
{ name: "十一秒", index: 0 },
{ name: "十二秒", index: 0 },
{ name: "十三秒", index: 0 },
{ name: "十四秒", index: 0 },
{ name: "十五秒", index: 0 },
{ name: "十六秒", index: 0 },
{ name: "十七秒", index: 0 },
{ name: "十八秒", index: 0 },
{ name: "十九秒", index: 0 },
{ name: "二十秒", index: 0 },
{ name: "二十一秒", index: 0 },
{ name: "二十二秒", index: 0 },
{ name: "二十三秒", index: 0 },
{ name: "二十四秒", index: 0 },
{ name: "二十五秒", index: 0 },
{ name: "二十六秒", index: 0 },
{ name: "二十七秒", index: 0 },
{ name: "二十八秒", index: 0 },
{ name: "二十九秒", index: 0 },
{ name: "三十秒", index: 0 },
{ name: "三十一秒", index: 0 },
{ name: "三十二秒", index: 0 },
{ name: "三十三秒", index: 0 },
{ name: "三十四秒", index: 0 },
{ name: "三十五秒", index: 0 },
{ name: "三十六秒", index: 0 },
{ name: "三十七秒", index: 0 },
{ name: "三十八秒", index: 0 },
{ name: "三十九秒", index: 0 },
{ name: "四十秒", index: 0 },
{ name: "四十一秒", index: 0 },
{ name: "四十二秒", index: 0 },
{ name: "四十三秒", index: 0 },
{ name: "四十四秒", index: 0 },
{ name: "四十五秒", index: 0 },
{ name: "四十六秒", index: 0 },
{ name: "四十七秒", index: 0 },
{ name: "四十八秒", index: 0 },
{ name: "四十九秒", index: 0 },
{ name: "五十秒", index: 0 },
{ name: "五十一秒", index: 0 },
{ name: "五十二秒", index: 0 },
{ name: "五十三秒", index: 0 },
{ name: "五十四秒", index: 0 },
{ name: "五十五秒", index: 0 },
{ name: "五十六秒", index: 0 },
{ name: "五十七秒", index: 0 },
{ name: "五十八秒", index: 0 },
{ name: "五十九秒", index: 0 }
],
now_years: 1970,
now_months: 0,
now_days: 0,
now_hours: 0,
now_mins: 0,
now_seconds: 0
},
mounted() {
this.init();
},
methods: {
init() {
let max_days = new Date(new Date().getFullYear(), new Date().getMonth() + 1, 0).getDate(); //当前一个月的天数
if (max_days === 30) {
this.days = this.days_30;
} else {
this.days = this.days_31;
}
setTimeout(() => {
this.fn_index(this.months);
this.fn_index(this.days);
this.fn_index(this.hours);
this.fn_index(this.mins);
this.fn_index(this.seconds);
}, 1000);
setTimeout(() => {
this.set_data();
}, 8000);
setTimeout(() => {
setInterval(() => {
this.set_data();
}, 1000);
}, 8500);
},
fn_index(data, type) {
if (type === "reset") {
data.forEach(el => (el.index = 0));
} else {
data.forEach((el, ind) => (el.index = ind));
}
},
set_data() {
this.now_years = new Date().getFullYear();
this.now_months = new Date().getMonth();
this.now_days = new Date().getDate() - 1;
this.now_hours = new Date().getHours();
this.now_mins = new Date().getMinutes();
this.now_seconds = new Date().getSeconds();
}
}
})
</script>
</body>
</html>

Comment ( 0 )

Sign in for post a comment

JavaScript
1
https://gitee.com/liangguifeng/circular-clock.git
git@gitee.com:liangguifeng/circular-clock.git
liangguifeng
circular-clock
circular-clock
master

Search