人人影视路由器——使用倒计时上网认证教程

海大虾 · 发表于 2020-10-15 10:23:18

本帖最后由海大虾于 2020-10-19 04:22 编辑

一代4019先升级b1300固件，此认证程序简单易用，非常适合公司，店铺，商场，公园，步行街等人流量大的地方，目的是让人连接你的wifi后，弹出一个认证界面，主要起宣传作用。

此模板简洁明了，仅需修改几个文字，人人都会，你要是会网页制作，可以设计更加精美漂亮的界面，我这里仅抛砖引玉教大家如何使用。

1，无线——开启2.4G访客网络（不用开5G），网络安全选open，无需密码，已自动隔离，十分安全。

2，应用程序——开启上网认证，上网时长自己定，跳转页面可设置任意网址，有自己的网站更好。

3，用WINSCP软件打开/etc/nodogsplash/htdocs目录，splash.html为主页，先备份主页再编辑，images/portal_login.png为你的图片，复制下面源代码到主页，仅需修改几个文字，倒计时时间可随意，别太长了，建议15秒以内。

正在倒计时......目的是强制看一会广告，呵呵！

倒计时完成后，必须点击按钮才能上网。

点击上网按钮后自动跳转到你设置的页面，限定时间内可任意上网，时间到期自动断网，必须重新认证才能继续上网。

更新模板展示，所有模板的文字图片都可更换成你需要的内容

无图模板展示，采用html5代码，电脑，手机，平板等全平台适用，支持横屏

另一款简洁高效的无图模板，适合快速发布信息，同样支持全平台

还有很多各种各样的模板，有时间慢慢更新，认证界面还是以简洁高效为主，让人打开一看就知道是什么，如果做的太花太复杂效果反而不好，对吧。我的水平有限，期待大家的杰作。:lol:

源代码：

<!DOCTYPE html>
<html lang="zh" style="height:100%;">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<meta name="google" value="notranslate">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="renderer" content="webkit">
<link rel="Shortcut Icon" href="$imagesdir/favicon.ico" type="image/x-icon">
<title>XXXX美容院欢迎您</title>
<style>
html,
body,
h1,
h2,
h3,
h4,
h5,
h6,
div,
dl,
dt,
dd,
ul,
ol,
li,
p,
blockquote,
pre,
hr,
figure,
table,
caption,
th,
td,
form,
fieldset,
legend,
input,
button,
textarea,
menu {
margin: 0;
padding: 0;
}
header,
footer,
section,
article,
aside,
nav,
hgroup,
address,
figure,
figcaption,
menu,
details {
display: block;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
caption,
th {
text-align: left;
font-weight: normal;
}
html,
body,
fieldset,
img,
iframe,
abbr {
border: 0;
}
i,
cite,
em,
var,
address,
dfn {
font-style: normal;
}
[hidefocus],
summary {
outline: 0;
}
li {
list-style: none;
}
h1,
h2,
h3,
h4,
h5,
h6,
small {
font-size: 100%;
}
sup,
sub {
font-size: 83%;
}
pre,
code,
kbd,
samp {
font-family: inherit;
}
q:before,
q:after {
content: none;
}
textarea {
overflow: auto;
resize: none;
}
label,
summary {
cursor: default;
}
a,
button {
cursor: pointer;
}
h1,
h2,
h3,
h4,
h5,
h6,
em,
strong,
b {
font-weight: bold;
}
del,
ins,
u,
s,
a,
a:hover {
text-decoration: none;
}
body,
textarea,
input,
button,
select,
keygen,
legend {
font: 12px/1.14 arial, \5b8b\4f53;
color: #333;
outline: 0;
}
body {
background: #fff;
}
a,
a:hover {
color: #333;
}
.img_title {
width: 100%;
display: inline-block;
height: auto;
max-width: 100%;
vertical-align:bottom
}
.main {
display: flex;
justify-content: space-between;
align-items: center;
flex-flow: column;
background: rgb(244, 245, 247);
}
.u-btn {
display: inline-block;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
padding: 0 80px;
height: 35px;
border-radius: 50%;
line-height: 34px;
border: 1px solid #2d88bf;
border-radius: 20px;
font-size: 13px;
letter-spacing: 2px;
text-align: center;
vertical-align: middle;
cursor: pointer;
word-wrap: normal;
white-space: nowrap;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
text-shadow: 0 -1px rgba(0, 0, 0, 0.2);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#6dbde4), to(#399dd8));
background: -webkit-linear-gradient(#6dbde4, #399dd8);
background: -moz-linear-gradient(#6dbde4, #399dd8);
background: -ms-linear-gradient(#6dbde4, #399dd8);
background: linear-gradient(#6dbde4, #399dd8);
color: #fff;
font-family: -webkit-body;
}
.text_style {
font-size: 18px;
font-weight: 700;
color: #555;
padding-top: 60px;
display: flex;
justify-content: center;
align-items: center;
}
.flex-2 {
flex: 2;
}
.flex-10 {
flex: 10;
}
.flex-8 {
flex: 8;
}
</style>
</head>
<body style="height:100%;max-width: 1300px;margin: 0 auto;">
<div>
<div class="header">
<img src="$imagesdir/portal_login.png" class="img_title" id="imgs" alt="">
</div>
<div class="main" id="test">
<div class="text_style flex-10">
XXXX美容院欢迎您
</div>
<div class="flex-8">
<form method="post" name="agree" action="$authtarget">
<input type="submit" name="agreeb" value="(15)秒后开始免费上网" / class="total_client_to u-btn">
</form>
<SCRIPT language=javascript>
<!--
var secs = 15;
document.agree.agreeb.disabled=true;
for(i=1;i<=secs;i++) {
window.setTimeout("update(" + i + ")", i * 1000);
}
function update(num) {
if(num == secs) {
document.agree.agreeb.value =" 点击这里开始上网/2小时 ";
document.agree.agreeb.disabled=false;
}
else {
printnr = secs-num;
document.agree.agreeb.value = "(" + printnr +")秒后开始免费上网";
}
}
//-->
</SCRIPT>
</div>
<div class="flex-2">
注意：2小时后请重新认证，可不保存网络重新连接。
</div>
</div>
</div>
</body>
</html>
<script type="text/javascript">
window.onload= function(){
autodivheight();
function autodivheight() {
// setTimeout(() => {
var winHeight = 0;
winHeight = document.documentElement.clientHeight;
var o = document.getElementById("imgs");
var h = o.clientHeight
document.getElementById("test").style.height = winHeight - h + "px";
// }, 100);
}
window.onresize = autodivheight();
}
</script>