You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
65 lines
1.9 KiB
65 lines
1.9 KiB
<!DOCTYPE html>
|
|
<html lang="zh-CN" style="height: 100%">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<script type="text/javascript" src="/script/jquery.min.js"></script>
|
|
<script type="text/javascript" src="/script/vue.js"></script>
|
|
<script src="/script/axios.min.js"></script>
|
|
|
|
<!-- 引入样式 -->
|
|
<link rel="stylesheet" href="/style/element-plus.css" rel="external nofollow" target="_blank" />
|
|
<!-- 引入组件库 -->
|
|
<script src="/script/element-plus.js" rel="external nofollow" ></script>
|
|
</head>
|
|
<body style="height: 100%; margin: 0">
|
|
|
|
<div id="app">
|
|
<div class="block">
|
|
<el-slider v-model="timer_shaft_value" :min="timer_shaft_min" :max="timer_shaft_max" :marks="marks"> </el-slider>
|
|
</div>
|
|
</div>
|
|
|
|
<script type="text/javascript" src="/script/jquery.min.js"></script>
|
|
|
|
<script type="text/javascript">
|
|
const AppInfo = {
|
|
data() {
|
|
return {
|
|
timer_shaft_value: 5,
|
|
timer_shaft_min:1,
|
|
timer_shaft_max:5,
|
|
marks: {
|
|
|
|
1: "1",
|
|
2: "2",
|
|
3: "3",
|
|
4: "4",
|
|
},
|
|
}
|
|
},
|
|
mounted() {
|
|
var _this = this;
|
|
// 每隔5分钟定时刷新
|
|
this.timer = setInterval(() => {
|
|
this.timer_shaft_value += 1;
|
|
this.timer_shaft_min += 1;
|
|
this.timer_shaft_max += 1;
|
|
let marks = {};
|
|
for (let i = this.timer_shaft_max - 5; i < this.timer_shaft_max; i++) {
|
|
marks[i] = i.toString();
|
|
}
|
|
this.marks = marks;
|
|
console.log(this.marks)
|
|
}, 1000 * 1)
|
|
},
|
|
beforeDestroy() {
|
|
clearInterval(this.timer);
|
|
},
|
|
};
|
|
const app = Vue.createApp(AppInfo);
|
|
app.use(ElementPlus);
|
|
app.mount("#app");
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|
|
|