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 –>
<script src=”https://unpkg.com/vue/dist/vue.js”></script>
<!– 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前端开发的软件 |
软件开发的前端和后端 |
前端软件开发岗位职责 |
评论前必须登录!
注册