[资料分享] 自适应Wifi认证页面 - 广告倒计时后认证(公布代码)

[复制链接]

tiida2011

775 回帖	6099 积分	1305 小时在线时间

中校

注册时间: 2011-4-12

金币: 4969 个

威望: 21 个

荣誉: 3 个

发消息

累计签到：32 天
连续签到：0 天
[LV.50]初入江湖

发表于 2013-6-7 16:55 |显示全部楼层

本帖最后由 tiida2011 于 2013-6-17 00:09 编辑

刚刚做完一小单。这个给大家分享一下代码吧。

这是我用Wiwiz自定义认证页面做的一个认证页面。
倒计时10秒后，认证按钮激活，以实现强制浏览广告的目的。
页面代码用的是Wiwiz的自适应默认认证页面模板修改来的。
效果如下：

宽屏时浏览效果（适合PC、平板电脑）

窄屏时的浏览效果（适合手机）

页面代码如下，有需要的请作为模板自行修改：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Language" content="zh">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<style type="text/css">
<!--
h1 { color: #000000; }
td { color: #000000; font-size:12px }
{ color: #000000; }
a {color: #000000;}
.gradient {
/* background: #999; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#3C70FF'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#3C72FF)); /* for webkit browsers */
background: -moz-linear-gradient(top, #ffffff, #3C72FF); /* for firefox 3.6+ */
}
.round-corner {
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
}
/* PC */
#content {
width: 80%;
padding: 2% 2%;
}
#header {
float:left;
width:100%;
}
#leftbar {
float:left;
width:40%;
}
#rightbar {
float:right;
width:60%;
}
#footer {
float:left;
width:100%;
}
#myImg {
width: 100%;
max-width: 100%;
}
/* Mobile */
@media screen and (max-width: 480px) {
#content {
width: 100%;
padding: 5px 0px;
}
#leftbar {
float:left;
width:100%;
}
#rightbar {
float:left;
width:100%;
}
#myImg {
width: 100%;
max-width: 100%;
}
}
-->
</style>
<title> A Wiwiz Hotspot </title>
<script src="/as/AuthPageScript.js"></script>
<!--[if lt IE 9]>
<script src="../../js/css3-mediaqueries.js"></script>
<![endif]-->
<script>
/* 回调函数。“认证”按钮按下后，如报错将自动调用此函数。可根据code值自行改写该函数。 */
function WiwizAuthPageError(code) {
if (code == 1) {
alert("您无法使用此网络，除非您认同此协议条款。");
} else if(code == 2) {
alert("请输入用户名。");
} else if(code == 3) {
alert("用户名或密码错误。");
} else if(code == 4) {
alert("电子招待券无效。");
} else if(code == 6) {
alert("超过最大在线用户数。");
} else if(code == 7) {
alert("请输入手机号码。");
} else if(code == 8) {
alert("热点已停用。");
} else if(code == 32) {
alert("账户存在异常，暂时锁定中。");
} else if(code == 35) {
alert("手机验证码错误或已超时。");
} else {
alert("未知错误。错误码："+ code);
}
}
/* 倒计时 */
i=10; //10秒
function countdown()
{
var p = document.getElementById("login");
i--;
p.value = "同意(" + i + ")";
if(i == 0)
p.disabled = false; //倒计时结束后，认证按钮状态变为可用
else
setTimeout("countdown()",1000)
}
</script>
</head>
<body bgcolor="#888888" background="" style="margin:0px">
<form name="myform" id="myform" action="" method="post">
<center>
<div id="content">
<div id="header" class="gradient round-corner">
<div style="padding: 14px; line-height:32px">
<font style="font-size:32px; font-weight:bold">标题1</font>
<b>标题2</b>
</div>
</div>
<div style="float:left; width:100%; height:20px;">
</div>
<div style="background-color:#cccccc; float:left; width:100%;" class="round-corner">
<div id="rightbar">
<div style="margin:5px; padding:0px; width:auto; background-color: #ffffff" class="round-corner">
<font size="2"><span style="font-weight: bold; text-decoration: underline;"></font>
<img src="/as/s/uploaduserfile/?dl=0&fn=13f1d92759e.jpg" id="myImg"></img>
</div>
</div>
<div id="leftbar">
<div style="margin:5px; width:auto; background-color: #ffffff" class="round-corner">
<div style="height:32px;" class="gradient round-corner">
<div style="padding:8px"> <b>阅读条款后点击“同意”即可上网</b> </div>
</div>
<textarea style="width:99%; height:100px" readonly>
条款内容
条款内容
条款内容
条款内容
条款内容
条款内容
条款内容
条款内容
条款内容
</textarea>
<table border="0" bgcolor="#ffffff" cellspacing="0" cellpadding="4">
<tr><td align="center">
<input type="button" style="width:140px; height:32px; background-color:#3C72FF; color:#ffff00; font-weight:bold" name="login" id="login" value="同意" disabled onclick="WiwizStartAuth();">
</td></tr>
</table>
</div>
</div>
</div>
<div id="footer">
<center>
<hr>
</center>
<a href="http://i-it.taobao.com" target="_blank">Powered by i-it.taobao.com</a>
</div>
</div>
</center>
</form>
<script>countdown();</script>
</body>
</html>