网页自动刷新小助手
设计初心
为什么要写这个小助手?
为了刷帖子的访问量
有替代方案案吗?
有,而且有许多。如“流量精灵”, 有些浏览器自带有刷新网页的插件。
但是,作为一个程序猿。明明知道其实现原理很简单,为什么不尝试自己做一个呢?
使用了哪些技术
最初写的时候很粗糙,这次优化了一下下。
- 使用 bootstrap4 实现了响应式布局
- 使用 vue 框架。没办法,这框架太好用了,用一次就爱上了。
实现原理
使用 iframe 标签加载目标网页。通过多次修改 iframe 标签的 src 属性来实现多次访问目标网页。
代码
Demo
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>网页自动刷新小助手</title>
<link href="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/vue/2.6.11/vue.min.js"></script>
</head>
<body>
<div class="navbar navbar-expand-md bg-dark text-light w-100 border-top border-warning">
<a href="" class="nav-item text-light nav-link navbar-brand">
网页自动刷新小助手
</a>
</div>
<div id="app" class="container">
<div class="row">
<div class="card aside col-md-4 my-3">
<div class="card-body">
<div class="form-group">
<label for="">
链接
<small>(必须以 http:// 或 https:// 开头)</small>
</label>
<input type="text" v-model="src" class="form-control" placeholder="请输入链接">
</div>
<div class="form-group">
<label for="">刷新次数</label>
<input type="number" v-model="times" class="form-control">
</div>
<div class="form-group">
<label for="">刷新间隔时间(毫秒)</label>
<input type="number" v-model="interval" class="form-control">
</div>
<div class="btn-group-sm">
<button class="btn btn-primary" @click="start">开始刷</button>
<button class="btn btn-danger" @click="stop">停止</button>
</div>
</div>
</div>
<div class="col-md-8 my-3">
<div class="alert alert-info">
{{ message }}
</div>
<iframe class="mt-2 w-100 h-100" ref="iframe_box" frameborder="0"></iframe>
</div>
</div>
</div>
<script>
let App = new Vue({
el: '#app',
data: {
src: "https://api.xygeng.cn/dailywd/api/get.php",
times: 10,
interval: 2000,
job_id: "",
count: 1,
message: '网页预览小窗口'
},
methods: {
start() {
this.message = '任务将会在' + this.interval / 1000 + 's 后开始';
this.job_id = setInterval(() => {
this.message = '任务正在进行中 , 第' + this.count + '次'
if (++this.count > this.times) this.stop()
this.$refs.iframe_box.src = this.src
}, this.interval)
},
stop() {
this.message = '任务已结束'
clearInterval(this.job_id)
this.count = 1;
}
}
}
)
</script>
</body>
</html>