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 !– css3-mediaqueries.js for IE less than 9 — !–[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= form name= myform id= myform action= method= post center div id= content div id= header div font b 标题2 /b /div /div div /div div div id= rightbar div font size= 2 span !– 广告代码开始 — img src= /as/s/uploaduserfile/?dl=0 fn=13f1d92759e.jpg id= myImg /img /div !– 广告代码结束 — /div div id= leftbar div div div /div !– 用户条款开始 — textarea 条款内容条款内容条款内容条款内容条款内容条款内容条款内容条款内容条款内容 /textarea !– 用户条款结束 — table border= 0 bgcolor= #ffffff cellspacing= 0 cellpadding= 4 tr td align= center !– 认证按钮 — input type= button /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 复制代码