前端开发vuejs定时任务
摘要： web前端开发使用的软件下载 公司常用的前端开发软件 前端开发啥软件好用 手机开发前端的软件 定时任务 前一段时间，自己接了一个小项目，中间用到了一个需求。工业的触屏电视机，如果页面长时间无……
| web前端开发使用的软件下载 |
| 公司常用的前端开发软件 |
| 前端开发啥软件好用 |
| 手机开发前端的软件 |
定时任务
前一段时间，自己接了一个小项目，中间用到了一个需求。工业的触屏电视机，如果页面长时间无操作，页面就弹出一个类似“欢迎光临”的字样。
当时想了一下，需要用到，定时任务。vuejs可以用监听以及，延迟事件执行任务，如下：
<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″ />
<!– import css –>
<link
rel=”stylesheet”
href=”https://unpkg.com/element-ui/lib/theme-chalk/index.css”
/>
</head>
<body>
<div id=”app”>
<h1>{{ number }}</h1>
</div>
</body>
<!– import vue before Element –>
<!– import JavaScript –>
<script src=”https://unpkg.com/element-ui/lib/index.js”></script>
<script>
new vue({
el: ‘#app’,
data: function() {
return {
number: 0,
}
},
mounted: function() {
setTimeout(() => {
this.number = this.number + 1
}, 1000) //这里是vuejs延时事件，大家应该知道，这边的1000单位为毫秒，也就是1000就代表一秒，然后自己需要别的时间，就直接乘。例如：15分钟，就是1000*60*15
},
watch: {
//页面初始化过一秒，这个number就会变成2
//然后在这里执行一个，number的监听，同样也做个监听，就会变成定时任务了
number() {
setTimeout(() => {
this.number = this.number + 1
}, 1000)
},
},
})
</script>
</html>
这就是常规的定时任务，然后另一个就是无操作任务。
长时间无操作任务
我这边借助了一下elementUI的框架，无操作任务，这里会借助一个弹窗。我们把需要弹出的值，放弹窗中（记住用那种点击空白处，也会隐藏的弹窗）
<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″ />
<!– import css –>
<link
rel=”stylesheet”
href=”https://unpkg.com/element-ui/lib/theme-chalk/index.css”
/>
</head>
<body>
<div id=”app”>
<h1>{{ number }}</h1>
<el-dialog :visible.sync=”centerDialogVisible” width=”30%” center>
<span @click=”hideSpan”>{{ test }}</span>
</el-dialog>
</div>
</body>
<!– import vue before Element –>
<!– import JavaScript –>
<script src=”https://unpkg.com/element-ui/lib/index.js”></script>
<script>
new Vue({
el: ‘#app’,
data: function() {
return {
number: 0,
test: ‘Hello world’,
centerDialogVisible: true,
}
},
mounted: function() {
setTimeout(() => {
this.number = this.number + 1
}, 1000) //这里是vuejs延时事件，大家应该知道，这边的1000单位为毫秒，也就是1000就代表一秒，然后自己需要别的时间，就直接乘。例如：15分钟，就是1000*60*15
},
watch: {
//页面初始化过一秒，这个number就会变成2
//然后在这里执行一个，number的监听，同样也做个监听，就会变成定时任务了
number() {
setTimeout(() => {
this.centerDialogVisible = true
this.number = this.number + 1
}, 5000) //这边五秒钟无操作，这个弹窗就会出现，当我们把弹窗关闭之后，定时就会重新计时
},
centerDialogVisible() {
if (this.centerDialogVisible == true) {
this.timeNum = this.timeNum + 1
}
},
},
methods: {
hideSpan() {
this.centerDialogVisible = false
},
},
})
</script>
</html>
这边自己再写个css，吧原有的白色背景去掉，然后改一下字的大小，就能实现，长时间不操作，页面出“hello world”的字样。然后自己，可以根据自己要求，用css把这个字弄点样式。
备注：hideSpan这个事件，是因为，我写完之后，发现，点空白位置，这个字可以隐藏，但是点字上边，就不行，然后就给加了一个
| 软件开发前端知识视频 |
| web前端开发的软件 |
| 软件开发的前端和后端 |
| 前端软件开发岗位职责 |
» 本文来自：前端开发者 » 《前端开发vuejs定时任务》
» 本文链接地址：https://www.rokub.com/6694.html
» 您也可以订阅本站：https://www.rokub.com
近期评论