vant地址：Vant Weapp - 轻量、可靠的小程序 UI 组件库
这是一组3分多钟的时间戳
var arr = ["1668743182594","1668743137304","1668743134153","1668743248601","1668743152383","1668743225963","1668743351742","1668743290148","1668743168724","1668743317826","1668743261824","1668743360581","1668743147342","1668743176914","1668743144192","1668743164360","1668743192045","1668743265628","1668743281317","1668743237956","1668743239219","1668743196407","1668743227224","1668743266830","1668743132893","1668743155534","1668743173766","1668743333529","1668743355539","1668743302686","1668743223434","1668743339191","1668743215930","1668743271879","1668743129113","1668743202711","1668743291346","1668743160576","1668743185735","1668743224081","1668743232258","1668743235408","1668743346703","1668743193941","1668743208374","1668743220284","1668743245439","1668743156166","1668743185164","1668743321552","1668743174394","1668743238587","1668743306473","1668743296388","1668743143563","1668743146710","1668743169352","1668743175007","1668743254264","1668743234786","1668743319666","1668743309620","1668743159319","1668743133524","1668743324700","1668743286349","1668743130373","1668743229740","1668743191414","1668743219039","1668743222207","1668743272502","1668743217775","1668743266185","1668743198293","1668743189517","1668743207742","1668743258688","1668743209004","1668743212768","1668743236039","1668743300802","1668743353012","1668743177535","1668743249221","1668743330392","1668743315291","1668743320911","1668743363729","1668743158685","1668743178174","1668743288266","1668743326589","1668743186353","1668743263082","1668743297651","1668743363095","1668743366245","1668743255583","1668743346077","1668743126730","1668743222817","1668743279420","1668743236666","1668743342398","1668743131648","1668743193298","1668743314750","1668743364986","1668743349229","1668743249852","1668743151133","1668743331010","1668743284462","1668743228477","1668743358057","1668743287611","1668743188889","1668743267453","1668743270620","1668743219654","1668743226625","1668743359935","1668743329743","1668743141672","1668743244836","1668743313414","1668743144822","1668743251125","1668743203968","1668743294498","1668743205223","1668743310260","1668743362456","1668743257416","1668743338578","1668743153685","1668743341739","1668743172504","1668743195127","1668743365605","1668743197668","1668743202070","1668743183860","1668743347981","1668743139826","1668743324069","1668743161837","1668743337934","1668743302071","1668743334789","1668743181329","1668743214056","1668743253650","1668743283832","1668743317204","1668743149862","1668743336046","1668743231635","1668743262455","1668743301428","1668743264995","1668743280681","1668743136676","1668743273119","1668743357417","1668743327221","1668743142305","1668743258083","1668743275658","1668743128483","1668743325961","1668743241667","1668743293869","1668743210265","1668743295125","1668743173136","1668743213419","1668743201443","1668743192674","1668743171875","1668743323428","1668743246700","1668743271227","1668743159973","1668743293254","1668743353641","1668743332268","1668743180698","1668743290787","1668743292603","1668743344253","1668743217140","1668743209634","1668743344814","1668743340457","1668743281954","1668743309001","1668743342993","1668743233514","1668743230369","1668743312771","1668743320288","1668743225324","1668743358772","1668743361836","1668743303945","1668743305208","1668743134783","1668743136047","1668743187632","1668743304585","1668743315919","1668743348601","1668743147979","1668743162471","1668743299588","1668743278789","1668743212144","1668743166833","1668743200817","1668743165621","1668743214681","1668743341094","1668743252373","1668743149236","1668743175655","1668743210889","1668743234159","1668743314027","1668743178805","1668743297041","1668743190153","1668743263731","1668743354285","1668743280051","1668743194512","1668743146082","1668743283201","1668743150498","1668743345480","1668743269964","1668743184477","1668743268078","1668743250503","1668743331632","1668743285096","1668743140456","1668743127367","1668743286988","1668743322806","1668743204642","1668743163097","1668743307729","1668743207111","1668743224693","1668743247332","1668743135410","1668743246115","1668743132263","1668743154275","1668743176285","1668743242315","1668743351115","1668743205846","1668743298279","1668743199540","1668743148602","1668743276267","1668743145454","1668743256783","1668743356808","1668743316545","1668743278201","1668743319019","1668743308362","1668743167463","1668743260005","1668743179434","1668743227853","1668743229117","1668743157425","1668743186996","1668743349860","1668743221563","1668743247959","1668743188257","1668743298908","1668743354896","1668743240402","1668743244207","1668743220914","1668743274379","1668743277527","1668743142931","1668743256153","1668743335459","1668743218395","1668743295752","1668743239771","1668743259300","1668743328481","1668743231014","1668743254893","1668743203331","1668743361199","1668743141042","1668743169971","1668743211523","1668743269341","1668743318395","1668743170614","1668743200185","1668743131003","1668743232906","1668743164978","1668743307137","1668743158055","1668743311511","1668743364353","1668743151789","1668743336674","1668743343633","1668743268707","1668743197025","1668743139199","1668743288898","1668743327848","1668743261196","1668743156796","1668743168091","1668743303323","1668743180078","1668743241038","1668743322167","1668743137927","1668743166203","1668743206504","1668743312159","1668743329112","1668743350517","1668743163732","1668743154903","1668743242919","1668743129747","1668743171244","1668743339834","1668743215304","1668743153014","1668743198926","1668743216515","1668743195776","1668743352374","1668743292013","1668743305855","1668743300167","1668743276907","1668743243567","1668743347335","1668743251745","1668743273759","1668743337306","1668743310886","1668743181956","1668743253005","1668743161206","1668743237321","1668743183217","1668743275011","1668743356160","1668743334156","1668743282570","1668743260564","1668743332891","1668743359313","1668743289528","1668743325327","1668743264366","1668743138565","1668743285722","1668743190777"]完整代码（白嫖可不好噢）：
<template>
<view class="slider">
<van-slider class="van-slider" :value="sliderValue" bar-height="4rpx" active-color="#ffffff"
inactive-color="#333333" @change="changeValue">
</van-slider>
<view class="empty"></view>
<button @click="start">开始</button>
<view class="empty"></view>
<button @click="suspend">暂停</button>
</view>
</template>
<script>
export default {
data() {
return {
sliderValue: 0,
index:0,
arrTime:["1668743182594","1668743137304","1668743134153","1668743248601","1668743152383","1668743225963","1668743351742","1668743290148","1668743168724","1668743317826","1668743261824","1668743360581","1668743147342","1668743176914","1668743144192","1668743164360","1668743192045","1668743265628","1668743281317","1668743237956","1668743239219","1668743196407","1668743227224","1668743266830","1668743132893","1668743155534","1668743173766","1668743333529","1668743355539","1668743302686","1668743223434","1668743339191","1668743215930","1668743271879","1668743129113","1668743202711","1668743291346","1668743160576","1668743185735","1668743224081","1668743232258","1668743235408","1668743346703","1668743193941","1668743208374","1668743220284","1668743245439","1668743156166","1668743185164","1668743321552","1668743174394","1668743238587","1668743306473","1668743296388","1668743143563","1668743146710","1668743169352","1668743175007","1668743254264","1668743234786","1668743319666","1668743309620","1668743159319","1668743133524","1668743324700","1668743286349","1668743130373","1668743229740","1668743191414","1668743219039","1668743222207","1668743272502","1668743217775","1668743266185","1668743198293","1668743189517","1668743207742","1668743258688","1668743209004","1668743212768","1668743236039","1668743300802","1668743353012","1668743177535","1668743249221","1668743330392","1668743315291","1668743320911","1668743363729","1668743158685","1668743178174","1668743288266","1668743326589","1668743186353","1668743263082","1668743297651","1668743363095","1668743366245","1668743255583","1668743346077","1668743126730","1668743222817","1668743279420","1668743236666","1668743342398","1668743131648","1668743193298","1668743314750","1668743364986","1668743349229","1668743249852","1668743151133","1668743331010","1668743284462","1668743228477","1668743358057","1668743287611","1668743188889","1668743267453","1668743270620","1668743219654","1668743226625","1668743359935","1668743329743","1668743141672","1668743244836","1668743313414","1668743144822","1668743251125","1668743203968","1668743294498","1668743205223","1668743310260","1668743362456","1668743257416","1668743338578","1668743153685","1668743341739","1668743172504","1668743195127","1668743365605","1668743197668","1668743202070","1668743183860","1668743347981","1668743139826","1668743324069","1668743161837","1668743337934","1668743302071","1668743334789","1668743181329","1668743214056","1668743253650","1668743283832","1668743317204","1668743149862","1668743336046","1668743231635","1668743262455","1668743301428","1668743264995","1668743280681","1668743136676","1668743273119","1668743357417","1668743327221","1668743142305","1668743258083","1668743275658","1668743128483","1668743325961","1668743241667","1668743293869","1668743210265","1668743295125","1668743173136","1668743213419","1668743201443","1668743192674","1668743171875","1668743323428","1668743246700","1668743271227","1668743159973","1668743293254","1668743353641","1668743332268","1668743180698","1668743290787","1668743292603","1668743344253","1668743217140","1668743209634","1668743344814","1668743340457","1668743281954","1668743309001","1668743342993","1668743233514","1668743230369","1668743312771","1668743320288","1668743225324","1668743358772","1668743361836","1668743303945","1668743305208","1668743134783","1668743136047","1668743187632","1668743304585","1668743315919","1668743348601","1668743147979","1668743162471","1668743299588","1668743278789","1668743212144","1668743166833","1668743200817","1668743165621","1668743214681","1668743341094","1668743252373","1668743149236","1668743175655","1668743210889","1668743234159","1668743314027","1668743178805","1668743297041","1668743190153","1668743263731","1668743354285","1668743280051","1668743194512","1668743146082","1668743283201","1668743150498","1668743345480","1668743269964","1668743184477","1668743268078","1668743250503","1668743331632","1668743285096","1668743140456","1668743127367","1668743286988","1668743322806","1668743204642","1668743163097","1668743307729","1668743207111","1668743224693","1668743247332","1668743135410","1668743246115","1668743132263","1668743154275","1668743176285","1668743242315","1668743351115","1668743205846","1668743298279","1668743199540","1668743148602","1668743276267","1668743145454","1668743256783","1668743356808","1668743316545","1668743278201","1668743319019","1668743308362","1668743167463","1668743260005","1668743179434","1668743227853","1668743229117","1668743157425","1668743186996","1668743349860","1668743221563","1668743247959","1668743188257","1668743298908","1668743354896","1668743240402","1668743244207","1668743220914","1668743274379","1668743277527","1668743142931","1668743256153","1668743335459","1668743218395","1668743295752","1668743239771","1668743259300","1668743328481","1668743231014","1668743254893","1668743203331","1668743361199","1668743141042","1668743169971","1668743211523","1668743269341","1668743318395","1668743170614","1668743200185","1668743131003","1668743232906","1668743164978","1668743307137","1668743158055","1668743311511","1668743364353","1668743151789","1668743336674","1668743343633","1668743268707","1668743197025","1668743139199","1668743288898","1668743327848","1668743261196","1668743156796","1668743168091","1668743303323","1668743180078","1668743241038","1668743322167","1668743137927","1668743166203","1668743206504","1668743312159","1668743329112","1668743350517","1668743163732","1668743154903","1668743242919","1668743129747","1668743171244","1668743339834","1668743215304","1668743153014","1668743198926","1668743216515","1668743195776","1668743352374","1668743292013","1668743305855","1668743300167","1668743276907","1668743243567","1668743347335","1668743251745","1668743273759","1668743337306","1668743310886","1668743181956","1668743253005","1668743161206","1668743237321","1668743183217","1668743275011","1668743356160","1668743334156","1668743282570","1668743260564","1668743332891","1668743359313","1668743289528","1668743325327","1668743264366","1668743138565","1668743285722","1668743190777"]
}
},
methods: {
// 开始
start() {
let that = this
that.handleTime()
},
// 暂停
suspend() {
let that = this;
clearInterval(that.interval)
clearTimeout(this.timeout)
},
// 点击拖动进度条数值变化
changeValue(event) {
// uni.showToast({
// icon: 'none',
// title: `当前值：${event.detail}`,
// });
clearTimeout(this.timeout)
this.index = parseInt(event.detail / 100 * this.count)
this.clickSlider = true;
},
handleTime() {
let that = this;
let keys = that.arrTime; //时间戳 []
that.count = keys.length; //数据长度
let time = (keys[that.count - 1] - keys[0]) / that.count; //每帧间隔时间
that.duration = that.formatDuring(keys[that.count - 1] - keys[0]); //总时长
that.interval = setInterval(() => {
let activeTime = (keys[that.count - 1] - keys[0]) - (keys[that.count - 1] - keys[that
.index]);
that.activeDuration = that.formatDuring(activeTime); //已播放时长
that.index++;
// 进度条数值
let tmpVal = that.index / that.count * 100;
if (!that.clickSlider) {
let value_s = (tmpVal - that.sliderValue) / 2 + that.sliderValue; // 中间值(为了进度条更顺滑)
that.sliderValue = value_s
that.timeout = setTimeout(() => {
// console.log('timeout',that.index);
that.sliderValue = tmpVal
}, time / 2)
} else {
that.clickSlider = false
that.sliderValue = tmpVal
}
// console.log('s: '+that.index+'||',Date.now())
if (that.index >= that.count) clearInterval(that.interval)
}, time)
},
//毫秒转00:00
formatDuring(time) {
var days = parseInt(time / (1000 * 60 * 60 * 24));
var hours = parseInt((time % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = parseInt((time % (1000 * 60 * 60)) / (1000 * 60));
var seconds = parseInt((time % (1000 * 60)) / 1000);
if (isNaN(days)) days = 0;
if (isNaN(hours)) hours = 0;
if (isNaN(minutes)) minutes = 0;
if (isNaN(seconds)) seconds = 0;
if (minutes < 10) minutes = '0' + minutes;
if (seconds < 10) seconds = '0' + seconds;
return minutes + ":" + seconds;
}
},
watch: {
sliderValue: {
handler(newVal,oldVal){
if(newVal >= 100) {
this.index = 0;
this.sliderValue = 0;
this.activeDuration = '00:00'
}
},
deep:true //对象内部的属性监听，也叫深度监听
},
}
}
</script>
<style>
.empty {
height: 50rpx;
}
</style>
效果：
423
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
