使用Vue.js实现一个带滑动效果的倒计时组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>倒计时</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
.box-item {
position: relative;
display: inline-block;
width: 190px;
height: 30px;
background: pink;
background-size: 100% 100%;
font-size: 20px;
line-height: 30px;
text-align: center;
border: solid 2px #000;
position: relative;
writing-mode: vertical-lr;
text-orientation: upright;
overflow: hidden;
}
/* 新加部分的代码 */
.box-item span {
position: absolute;
top: 5px;
transform: translate(-50%, -100%);
transition: transform 0.5s ease-in;
letter-spacing: 10px;
}
</style>
</head>
<body>
<h1>倒计时组件</h1>
<div id="app">
倒计时
<input v-model='hr'>小时
<input v-model='min'>分
<input v-model='sec'>秒
<time-counter :hr='hr' :min='min' :sec='sec'>
</time-counterr>
</div>
<script>
const TimeCounter = {
props: ['hr', 'min', 'sec'],
data() {
return {
timer: null,
HR: '00',
MIN: '00',
SEC: '00',
HR_l: '0',
HR_r: '0',
MIN_l: '0',
MIN_r: '0',
SEC_l: '0',
SEC_r: '0',
style_SEC_l: {
transform: 'translate(-50%, -100%)',
marginLeft: '145px'
},
style_SEC_r: {
transform: 'translate(-50%, -100%)',
marginLeft: '160px'
},
style_MIN_l: {
transform: 'translate(-50%, -100%)',
marginLeft: '85px'
},
style_MIN_r: {
transform: 'translate(-50%, -100%)',
marginLeft: '100px'
},
style_HR_l: {
transform: 'translate(-50%, -100%)',
marginLeft: '25px'
},
style_HR_r: {
transform: 'translate(-50%, -100%)',
marginLeft: '40px'
},
}
},
template: `
0123456789
0123456789
0123456789
0123456789
0123456789
0123456789
`,
methods: {
getCode() {
this.HR = parseInt(this.hr);
this.MIN = parseInt(this.min);
this.SEC = parseInt(this.sec);
if (!this.timer) {
this.timer = setInterval(() => {
if (this.HR || this.MIN || this.SEC) {
this.SEC_l = parseInt(this.SEC / 10)
this.SEC_r = this.SEC % 10
// console.log(this.SEC_l, this.SEC_r)
this.style_SEC_l.transform = `translate(-50%, -${
this.SEC_l * 10}%)`
this.style_SEC_r.transform = `translate(-50%, -${
(this.SEC_r) * 10}%)`
this.MIN_l = parseInt(this.MIN / 10)
this.MIN_r = this.MIN % 10
this.style_MIN_l.transform = `translate(-50%, -${
this.MIN_l * 10}%)`
this.style_MIN_r.transform = `translate(-50%, -${
this.MIN_r * 10}%)`
this.HR_l = parseInt(this.HR / 10)
this.HR_r = this.HR % 10
this.style_HR_l.transform = `translate(-50%, -${
this.HR_l * 10}%)`
this.style_HR_r.transform = `translate(-50%, -${
this.HR_r * 10}%)`
if (this.SEC > 0) {
this.SEC_l = parseInt(this.SEC / 10)
this.SEC_r = this.SEC % 10
console.log(this.SEC_r)
this.style_SEC_l.transform = `translate(-50%, -${
this.SEC_l * 10}%)`
this.style_SEC_r.transform = `translate(-50%, -${
(this.SEC_r ) * 10}%)`
this.SEC--;
}
else if (this.MIN > 0) {
this.SEC = 59
this.MIN_l = parseInt(this.MIN / 10)
this.MIN_r = this.MIN % 10
this.style_MIN_l.transform = `translate(-50%, -${
this.MIN_l * 10}%)`
this.style_MIN_r.transform = `translate(-50%, -${
this.MIN_r * 10}%)`
this.MIN--;
}
else if (this.HR > 0) {
this.MIN = 59
this.SEC = 59
this.HR_l = parseInt(this.HR / 10)
this.HR_r = this.HR % 10
this.style_HR_l.transform = `translate(-50%, -${
this.HR_l * 10}%)`
this.style_HR_r.transform = `translate(-50%, -${
this.HR_r * 10}%)`
this.HR--;
}
}
else {
this.style_SEC_l.transform = `translate(-50%, 0)`
this.style_SEC_r.transform = `translate(-50%,0)`
this.style_MIN_l.transform = `translate(-50%, 0)`
this.style_MIN_r.transform = `translate(-50%, 0)`
this.style_HR_l.transform = `translate(-50%, 0)`
this.style_HR_r.transform = `translate(-50%,0)`
clearInterval(this.timer);
this.timer = null;
}
}, 1000)
}
this.SEC_l = this.SEC / 10
this.SEC_r = this.SEC % 10
this.MIN_l = parseInt(this.MIN / 10)
this.MIN_r = this.MIN % 10
this.HR_l = parseInt(this.HR / 10)
this.HR_r = this.HR % 10
},
clearCode() {
if (this.timer) {
clearInterval(this.timer)
this.timer = null;
this.SEC_l = '0'
this.SEC_r = '0'
this.MIN_l = '0'
this.MIN_r = '0'
this.HR_l = '0'
this.HR_r = '0'
this.style_SEC_l.transform = `translate(-50%, 0)`
this.style_SEC_r.transform = `translate(-50%,0)`
this.style_MIN_l.transform = `translate(-50%, 0)`
this.style_MIN_r.transform = `translate(-50%, 0)`
this.style_HR_l.transform = `translate(-50%, 0)`
this.style_HR_r.transform = `translate(-50%,0)`
}
},
}
}
let vm = new Vue({
el: '#app',
data() {
return {
hr: '1',
min: '58',
sec: '12'
}
},
components: {
TimeCounter
},
})
</script>
</body>
</html>