开发网站相关知识html和javascript
1.html 布局
https://github.com/bramstein/jlayout/
http://welcome.totheinter.net/columnizer-jquery-plugin/
http://www.jwf.us/projects/jQSlickWrap/
http://masonry.desandro.com/
http://layout.jquery-dev.com/index.cfm
2.侧边栏控件：
https://www.berriart.com/sidr/
3.js方便的操作session和cookie（操作简单方便）
https://plugins.jquery.com/html5storage/
https://github.com/artberri/jquery-html5storage/
4.js实用函数
定义 JavaScript 数组的正确方法： var txt = new Array("George","John","Thomas"); 在浏览器的状态栏放入一条消息: window.status = "put your message here"; 获得客户端浏览器的名称: navigator.appName
5.判断浏览器是电脑端还是移动端
function isPc() { var u = navigator.userAgent; if (u.indexOf('iPad') > -1) { return true; } else if (u.indexOf('Android') > -1 || u.indexOf('iPhone') > -1 || u.indexOf('Windows Phone') > -1 || u.indexOf('Mobile') > -1) { return false; } else { return true; } } if (isPc()) { window.location.href = 'https://www.antfortune.com'; } //参考此网站的脚本 https://d.antfortune.com/
6.建立前段项目的目录结构
根目录
|- assets: 存放所有js和css等
| |- images: 存放所有 CSS 样式需要的背景图片
| |- fonts: 存放所有 CSS 样式需要的字体
| |- css: 存放所有CSS
| | |- common: 存放公共的 CSS 代码
| |- js: 存放所有 JS
| | |- common: 存放公共的 JS 代码
|- include: 存放所有公共的 HTML 头尾片段
|- images: 存放前景图片和flash
|- libs: 存放前端所需的第三方类库
|- _my: 存放开发者自己需要的文件，这个文件夹应该被 GIT 和 SVN 忽略掉。
|- controllers: 存放MVC控制器
|- model: 存放MVC实体Model
|- views: 存放MVC视图
|- common: 项目共用类
7.编码规范
http://www.jianshu.com/p/8d291d823cc0
8.YouTube的红色激光进度条
https://github.com/rstacruz/nprogress (推荐)
/**使用方法/
1.引用 js文件 <script type="text/javascript" src='http://ricostacruz.com/nprogress/nprogress.js'></script>
2.显示进度条 添加 NProgress.start();
<body onload="NProgress.start();"> </body>
3.停止进度条
document.ready=function(){ NProgress.done(); };
附加：样式调整 为 red 并关闭右上角的圆圈
NProgress.configure({ template: "<div class='bar' style='background:red' role='bar'><div class='peg' style='box-shadow: 0 0 10px red, 0 0 5px red;'></div></div><div class='spinner' role='spinner'><div class='spinner-icon'></div></div>" ,showSpinner: false });
参考：http://www.cnblogs.com/Wayou/p/youtube_red_laser_bar.html
http://github.hubspot.com/pace/docs/welcome/ （使用比较简单）
1.引用js <script type="text/javascript" src="http://github.hubspot.com/pace/pace.js"></script>
2.添加CSS
.pace { -webkit-pointer-events: none; pointer-events: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; z-index: 2000; position: fixed; margin: auto; top: 12px; left: 0; right: 0; bottom: 0; width: 200px; height: 50px; overflow: hidden; } .pace .pace-progress { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); display: block; position: absolute; right: 100%; margin-right: -7px; width: 93%; top: 7px; height: 14px; font-size: 12px; background: #ff0080; color: #ff0080; line-height: 60px; font-weight: bold; font-family: Helvetica, Arial, "Lucida Grande", sans-serif; -webkit-box-shadow: 120px 0 #fff, 240px 0 #fff; -ms-box-shadow: 120px 0 #fff, 240px 0 #fff; box-shadow: 120px 0 #fff, 240px 0 #fff; } .pace .pace-progress:after { content: attr(data-progress-text); display: inline-block; position: fixed; width: 45px; text-align: right; right: 0; padding-right: 16px; top: 4px; } .pace .pace-progress[data-progress-text="0%"]:after { right: -200px } .pace .pace-progress[data-progress-text="1%"]:after { right: -198.14px } .pace .pace-progress[data-progress-text="2%"]:after { right: -196.28px } .pace .pace-progress[data-progress-text="3%"]:after { right: -194.42px } .pace .pace-progress[data-progress-text="4%"]:after { right: -192.56px } .pace .pace-progress[data-progress-text="5%"]:after { right: -190.7px } .pace .pace-progress[data-progress-text="6%"]:after { right: -188.84px } .pace .pace-progress[data-progress-text="7%"]:after { right: -186.98px } .pace .pace-progress[data-progress-text="8%"]:after { right: -185.12px } .pace .pace-progress[data-progress-text="9%"]:after { right: -183.26px } .pace .pace-progress[data-progress-text="10%"]:after { right: -181.4px } .pace .pace-progress[data-progress-text="11%"]:after { right: -179.54px } .pace .pace-progress[data-progress-text="12%"]:after { right: -177.68px } .pace .pace-progress[data-progress-text="13%"]:after { right: -175.82px } .pace .pace-progress[data-progress-text="14%"]:after { right: -173.96px } .pace .pace-progress[data-progress-text="15%"]:after { right: -172.1px } .pace .pace-progress[data-progress-text="16%"]:after { right: -170.24px } .pace .pace-progress[data-progress-text="17%"]:after { right: -168.38px } .pace .pace-progress[data-progress-text="18%"]:after { right: -166.52px } .pace .pace-progress[data-progress-text="19%"]:after { right: -164.66px } .pace .pace-progress[data-progress-text="20%"]:after { right: -162.8px } .pace .pace-progress[data-progress-text="21%"]:after { right: -160.94px } .pace .pace-progress[data-progress-text="22%"]:after { right: -159.08px } .pace .pace-progress[data-progress-text="23%"]:after { right: -157.22px } .pace .pace-progress[data-progress-text="24%"]:after { right: -155.36px } .pace .pace-progress[data-progress-text="25%"]:after { right: -153.5px } .pace .pace-progress[data-progress-text="26%"]:after { right: -151.64px } .pace .pace-progress[data-progress-text="27%"]:after { right: -149.78px } .pace .pace-progress[data-progress-text="28%"]:after { right: -147.92px } .pace .pace-progress[data-progress-text="29%"]:after { right: -146.06px } .pace .pace-progress[data-progress-text="30%"]:after { right: -144.2px } .pace .pace-progress[data-progress-text="31%"]:after { right: -142.34px } .pace .pace-progress[data-progress-text="32%"]:after { right: -140.48px } .pace .pace-progress[data-progress-text="33%"]:after { right: -138.62px } .pace .pace-progress[data-progress-text="34%"]:after { right: -136.76px } .pace .pace-progress[data-progress-text="35%"]:after { right: -134.9px } .pace .pace-progress[data-progress-text="36%"]:after { right: -133.04px } .pace .pace-progress[data-progress-text="37%"]:after { right: -131.18px } .pace .pace-progress[data-progress-text="38%"]:after { right: -129.32px } .pace .pace-progress[data-progress-text="39%"]:after { right: -127.46px } .pace .pace-progress[data-progress-text="40%"]:after { right: -125.6px } .pace .pace-progress[data-progress-text="41%"]:after { right: -123.74px } .pace .pace-progress[data-progress-text="42%"]:after { right: -121.88px } .pace .pace-progress[data-progress-text="43%"]:after { right: -120.02px } .pace .pace-progress[data-progress-text="44%"]:after { right: -118.16px } .pace .pace-progress[data-progress-text="45%"]:after { right: -116.3px } .pace .pace-progress[data-progress-text="46%"]:after { right: -114.44px } .pace .pace-progress[data-progress-text="47%"]:after { right: -112.58px } .pace .pace-progress[data-progress-text="48%"]:after { right: -110.72px } .pace .pace-progress[data-progress-text="49%"]:after { right: -108.86px } .pace .pace-progress[data-progress-text="50%"]:after { right: -107px } .pace .pace-progress[data-progress-text="51%"]:after { right: -105.14px } .pace .pace-progress[data-progress-text="52%"]:after { right: -103.28px } .pace .pace-progress[data-progress-text="53%"]:after { right: -101.42px } .pace .pace-progress[data-progress-text="54%"]:after { right: -99.56px } .pace .pace-progress[data-progress-text="55%"]:after { right: -97.7px } .pace .pace-progress[data-progress-text="56%"]:after { right: -95.84px } .pace .pace-progress[data-progress-text="57%"]:after { right: -93.98px } .pace .pace-progress[data-progress-text="58%"]:after { right: -92.12px } .pace .pace-progress[data-progress-text="59%"]:after { right: -90.26px } .pace .pace-progress[data-progress-text="60%"]:after { right: -88.4px } .pace .pace-progress[data-progress-text="61%"]:after { right: -86.53999999999999px } .pace .pace-progress[data-progress-text="62%"]:after { right: -84.68px } .pace .pace-progress[data-progress-text="63%"]:after { right: -82.82px } .pace .pace-progress[data-progress-text="64%"]:after { right: -80.96000000000001px } .pace .pace-progress[data-progress-text="65%"]:after { right: -79.1px } .pace .pace-progress[data-progress-text="66%"]:after { right: -77.24px } .pace .pace-progress[data-progress-text="67%"]:after { right: -75.38px } .pace .pace-progress[data-progress-text="68%"]:after { right: -73.52px } .pace .pace-progress[data-progress-text="69%"]:after { right: -71.66px } .pace .pace-progress[data-progress-text="70%"]:after { right: -69.8px } .pace .pace-progress[data-progress-text="71%"]:after { right: -67.94px } .pace .pace-progress[data-progress-text="72%"]:after { right: -66.08px } .pace .pace-progress[data-progress-text="73%"]:after { right: -64.22px } .pace .pace-progress[data-progress-text="74%"]:after { right: -62.36px } .pace .pace-progress[data-progress-text="75%"]:after { right: -60.5px } .pace .pace-progress[data-progress-text="76%"]:after { right: -58.64px } .pace .pace-progress[data-progress-text="77%"]:after { right: -56.78px } .pace .pace-progress[data-progress-text="78%"]:after { right: -54.92px } .pace .pace-progress[data-progress-text="79%"]:after { right: -53.06px } .pace .pace-progress[data-progress-text="80%"]:after { right: -51.2px } .pace .pace-progress[data-progress-text="81%"]:after { right: -49.34px } .pace .pace-progress[data-progress-text="82%"]:after { right: -47.480000000000004px } .pace .pace-progress[data-progress-text="83%"]:after { right: -45.62px } .pace .pace-progress[data-progress-text="84%"]:after { right: -43.76px } .pace .pace-progress[data-progress-text="85%"]:after { right: -41.9px } .pace .pace-progress[data-progress-text="86%"]:after { right: -40.04px } .pace .pace-progress[data-progress-text="87%"]:after { right: -38.18px } .pace .pace-progress[data-progress-text="88%"]:after { right: -36.32px } .pace .pace-progress[data-progress-text="89%"]:after { right: -34.46px } .pace .pace-progress[data-progress-text="90%"]:after { right: -32.6px } .pace .pace-progress[data-progress-text="91%"]:after { right: -30.740000000000002px } .pace .pace-progress[data-progress-text="92%"]:after { right: -28.880000000000003px } .pace .pace-progress[data-progress-text="93%"]:after { right: -27.02px } .pace .pace-progress[data-progress-text="94%"]:after { right: -25.16px } .pace .pace-progress[data-progress-text="95%"]:after { right: -23.3px } .pace .pace-progress[data-progress-text="96%"]:after { right: -21.439999999999998px } .pace .pace-progress[data-progress-text="97%"]:after { right: -19.58px } .pace .pace-progress[data-progress-text="98%"]:after { right: -17.72px } .pace .pace-progress[data-progress-text="99%"]:after { right: -15.86px } .pace .pace-progress[data-progress-text="100%"]:after { right: -14px } .pace .pace-activity { position: absolute; width: 100%; height: 28px; z-index: 2001; box-shadow: inset 0 0 0 2px #ff0080, inset 0 0 0 7px #FFF; border-radius: 10px; } .pace.pace-inactive { display: none; }
3.完成
http://www.onextrapixel.com/2013/09/02/loadingbar-js-adding-a-youtube-like-loading-bar-to-your-website/
九.等待图标
http://spin.js.org/
十.JS文件压缩
http://yui.github.io/yuicompressor/
十一、网站界面
网站框架：
http://www.mycodes.net/154/
跑马灯 图片轮播
http://amazeui.org/getting-started?_ver=2.x
综合知识；
http://blog.csdn.net/yuexianchang/article/details/51188309
Jquery跨域访问:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
<script type="text/javascript" src=jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
$.ajax({
type: "get",
async: false,
url: "http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998",
dataType: "jsonp",
jsonp: "callback",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback)
jsonpCallback:"flightHandler",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，也可以写"?"，jQuery会自动为你处理数据
success: function(json){
alert('您查询到航班信息：票价： ' + json.price + ' 元，余票： ' + json.tickets + ' 张。');
},
error: function(){
alert('fail');
}
});
});
</script>
</head>
<body>
</body>
</html>
也可以通过服务端设置
<httpProtocol> <customHeaders> <add name="Access-Control-Allow-Headers" value="accept, content-type" /> <add name="Access-Control-Allow-Origin" value="*" /> <add name="Access-Control-Allow-Methods" value="POST, GET, OPTIONS" /> </customHeaders> </httpProtocol>
http://www.cnblogs.com/dowinning/archive/2012/04/19/json-jsonp-jquery.html
文件下载：例如下载文件rar 直接在浏览器中输入地址可直接下载
如果.png等文件怎么办？
1.chrome 浏览器 修改mini 映射（可以对文件夹修改）为 application/octet-stream
2.ie浏览器（不遵循mini映射）修要添加http响应标头 名称Content-Disposition值attachment
十二、操作cookie的js帮助文件
来自网站：https://inv-veri.chinatax.gov.cn/
var ip = ""; //开发及测试模式时，此值不为空，上线时，设置为空，通过js中的数组获取 172.30.4.8 function getBrowser() { //注意关键字大小写 var ua_str = navigator.userAgent.toLowerCase(); if(ua_str.indexOf("edge") != -1 || ua_str.indexOf("rv:11") != -1) { return "edge"; } else if (ua_str.indexOf("msie 8.0") != -1 || ua_str.indexOf("msie 7.0") != -1) { return "ie8"; } else if (ua_str.indexOf("msie 9.0") != -1) { return "ie8"; } else if (ua_str.indexOf("msie 10.0") != -1) { return "ie8"; } else if (ua_str.indexOf("chrome/") != -1) { if (ua_str.indexOf("chrome/55.0") != -1) { return "okchrome"; } else { var c = ua_str.substring(ua_str.indexOf("chrome/")); var d = c.substring(0, c.indexOf("\.")); d = d.replace("/", " "); return "others_" + d; } } else if (ua_str.indexOf("firefox/") != -1) { if (ua_str.indexOf("firefox/50.0") != -1) { return "okfirefox"; } else { var c = ua_str.substring(ua_str.indexOf("firefox/")); var d = c.substring(0, c.indexOf("\.")); d = d.replace("/", " "); console.log(d); return "others_" + d; } } else { return "others"; } } function getCookie(name){ var nameEQ=name+"="; var str=document.cookie.split(';'); for(var i=0;i<str.length;i++){ var c=str[i]; while(c.charAt(0)==' '){ c=c.substring(1,c.length); } if(c.indexOf(nameEQ)==0){ return unescape(c.substring(nameEQ.length,c.length)); } } return ""; } function clearCookie(name) { setCookie(name, "", -1); } function setCookie(name, value, seconds) { seconds = seconds || 0; var expires = ""; var date = new Date(); if (seconds != 0 ) { date.setTime(date.getTime()+(seconds*1000)); expires = "; expires="+date.toGMTString(); } document.cookie = name+"="+escape(value)+expires+"; path=/"; //document.cookie = name+"exp=" + escape(date.toLocaleString())+expires+"; path=/"; //存储cookie过期时间，要获取testvalue这个cookie的过期时间，通过获取testexp这个cookie来实现 }
十三.一些使用函数
链接：http://pan.baidu.com/s/1mi9aXVM 密码：4kt6
网站：http://1.1.1.2/ac_portal/default/pc.html?template=default&tabs=pwd&vlanid=0&url=http://go.microsoft.com%2ffwlink%2f%3fLinkID%3d219472%26clcid%3d0x409（内网）
/*------------------------------------------------------- 这个文件主要处理各种按钮的事件和校验，请求逻辑,还有几个辅助函数 定制一般不需要改这个文件 ---------------------------------------------------------*/ //全局变量(g_前缀,这些做定制时都不能变) var g_pstrength,//修改密码时用的密码强度，由initPstrength初始化 g_querylogutUrl = "/out.htm", g_querytTime = 3,//3秒心跳 g_remberTime = 2592000,//30*24*3600 s g_smsackUrl = "/sms_ack/", g_url = "../login.php"; //cookie var cookie = { set : function(name,value,time){ var cur=new Date(); /*cookie的生命时长设置为60秒*/ if(time === undefined){ time = 60; } cur.setTime(cur.getTime() + time*1000); document.cookie = name + "=" + escape(value)+";expires=" + cur.toGMTString(); }, get : function(name){ if (document.cookie.length>0){ var arrStr = document.cookie.split(";"); for(var i = 0; i< arrStr.length; i++){ var temp = arrStr[i].split("="); if($.trim(temp[0]) === name) { return unescape(temp[1]); } } } return ""; } }; //ie6,7不支持indexof,加上这个功能 Array.prototype.indexOf = function(obj, start) { for (var i = (start || 0), j = this.length; i < j; i++) { if (this[i] === obj) { return i; } } return -1; } //html编码 function htmlEncode(value){ return !value?value:String(value).replace(/&/g,"&").replace(/>/g,">").replace(/</g,"<").replace(/"/g,"""); } // 简写方法 function $id(id){ return document.getElementById(id); } //转换json function json_decode(str){ var json = null; try{ json = eval("(" + str + ')'); }catch(e){} return json; } //获取url参数 function getUrlParam(val){ var reg = new RegExp("(^|\\?|&)"+ val +"=([^&#]*)(\\s|&|$|#)", "i"); if (reg.test(location.href)) return unescape(RegExp.$2); return ""; } //---------------校验代码------------->> //初始化修改密码强度变量(不用改动) function initPstrength(){ $.ajax({ url: "/passwordstrength", type : "GET", success: function(resp){ var json= json_decode(resp); if(json){ g_pstrength = json; }else{ alert(_("修改密码强度信息格式不正确")); } }, error : function(o){ alert(_("无法获取修改密码强度信息，网络异常")); } }) } //修改密码的提示方法 function setChangePwdTips(msg){ js_alert("mode_changePwd", msg); } //修改密码的提示方法 function setSmsTips(msg){ js_alert("mode_sms", msg); } //修改密码的提示方法 function setPasswordTips(msg){ js_alert("mode_password", msg); } //密码登录的校验 function pwdValidtor(){ var user = $id("password_name"), checked = $id("password_disclaimer")?$id("password_disclaimer").checked:false, pwd = $id("password_pwd"); if((user.value.length <= 0) || (pwd.value.length <= 0)){ valid = false; setPasswordTips(_("用户账户和密码不能为空！")); return false; }else if(user.value.length > 95){ setPasswordTips(_("用户账户长度不能超过95个字节！")); return false; }else if(window.g_hasDisclaimer && !checked){ setPasswordTips(_("请先阅读免责声明，并勾选!")); return false; } setPasswordTips(""); return true; } //获取验证码时的校验,主要检查手机号格式 function getSmsCodeValidtor(){ var user = $id("sms_name"), Regx = /^[0-9]*$/; if(user.value.length <= 0){ setSmsTips(_("手机号码不能为空！")); return false; }else if(user.value.length > 20){ setSmsTips(_("手机号码最大长度为20！")); return false; }else if(!Regx.test(user.value)){ setSmsTips(_("手机号码不能含有非数字字符！")); return false; } return true; } //短信认证时的校验 function smsValidtor(){ if(!getSmsCodeValidtor())return false; var pwd = $id("sms_pwd").value; var checked = $id("sms_disclaimer")?$id("sms_disclaimer").checked:false; if(pwd === ""){ setSmsTips(_("验证码不能为空！")); return false; } if(window.g_hasDisclaimer && !checked){ setSmsTips(_("请先阅读免责声明，并勾选!")); return false; } setSmsTips(""); return true; } //修改新密码的时候，对密码强度的修改 function validatePasswordStrength() { if (g_pstrength && g_pstrength.enable) { var user = $id("changePwd_name").value.toLowerCase(); var pwd = $id("changePwd_oldPwd").value; var pwd1 = $id("changePwd_newPwd").value; if (g_pstrength.noequalname) { if (user && pwd1 == user) { setChangePwdTips(_("密码不能等于用户名")); return false; } } if (g_pstrength.noequalold) { if (pwd && pwd1 == pwd) { setChangePwdTips(_("新密码不能与旧密码相同")); return false; } } if (g_pstrength.limit.enable && g_pstrength.limit.minlen > 1) { if (pwd1.length < g_pstrength.limit.minlen) { setChangePwdTips(_("密码最小长度为") + g_pstrength.limit.minlen + _("个字符")); return false; } } if (g_pstrength.must.enable) { if (g_pstrength.must.num && pwd1.search(/\d/) == -1) { setChangePwdTips(_("密码必须包含数字")); return false; } if (g_pstrength.must.alph && pwd1.search(/[A-Za-z]/) == -1) { setChangePwdTips(_("密码必须包含字母")); return false; } if (g_pstrength.must.special && pwd1.search(/[!@#\$%\^&\*\(\)]/) == -1) { setChangePwdTips(_("密码必须包含特殊字符（shift+数字）")); return false; } } return true; } else { return true; } } //修改密码时的校验 function changePwdValidtor(){ var user = $id("changePwd_name"), password = $id("changePwd_oldPwd"), pwd1 = $id("changePwd_newPwd"), pwd2 = $id("changePwd_newPwd2"); if(user.value.length <= 0){ setChangePwdTips(_("用户名不能为空！")); return false; }else if(user.value.length > 95) { setChangePwdTips(_("用户名长度不能超过95个字节！")); return false; } else if(pwd1.value.length >= 40 || pwd1.value.length ===0){ setChangePwdTips(_("密码不能为空且长度必须小于40个字符！")); return false; } else if(pwd1.value !== pwd2.value){ setChangePwdTips(_("确认密码不一致！")); return false; } //密码强度校验 if (validatePasswordStrength() === false){ return false; } setChangePwdTips(""); return true; } //<<---------------校验代码------------- //---------------按钮事件和请求的绑定(定制一般不用改动)------------->> //密码登录，密码登录按钮事件 function onPwdLogin(){ if(!pwdValidtor())return; var params = { opr:'pwdLogin',//smsLogin表示短信认证登录,pwdLogin表示密码认证登录 userName : $id("password_name").value, pwd : $id("password_pwd").value, rememberPwd : $id("rememberPwd").checked ? '1':'0' }; loginRequest(params,"mode_password",$id("password_submitBtn")); } //修改密码，确定按钮事件 function onChangePwd(){ if(!changePwdValidtor())return; var params = { opr:'changePwd', userName:$id("changePwd_name").value, oldPwd:$id("changePwd_oldPwd").value, newPwd:$id("changePwd_newPwd").value }; changePwdRequest(params,"mode_changePwd",$id("changePwd_submitBtn")) } //获取验证码，点击获取验证码按钮事件 function onGetSmsCode(){ if(!getSmsCodeValidtor())return; var checked = $id("sms_disclaimer")?$id("sms_disclaimer").checked:false; if(window.g_hasDisclaimer && !checked){ setSmsTips(_("请先阅读免责声明，并勾选!")); return false; } cookie.set("phoneNumber",$id("sms_name").value,g_remberTime); var params = { opr:'getSmsCode', userName : $id("sms_name").value }; getSmsCodeRequest(params,"mode_sms",$id("sms_getCodeBtn")); } //短信登录，点击短信登录按钮事件 function onSmsLogin(){ if(!smsValidtor())return; var params = { opr:'smsLogin', userName : $id("sms_name").value, pwd : $id("sms_pwd").value, rememberPwd : $id("rememberSms").checked ? '1':'0' }; loginRequest(params,"mode_sms",$id("sms_submitBtn")); } //免责声明的登录 function onDisclaimerLogin(){ //成功后干啥 function fn(o){ btn.disabled = false; var formid = "mode_disclaimer"; btn.value = btn.orgValue; if(!o.success){ js_alert(formid, o.msg); return; } var action = o.action,interval,i = 3; switch (action) { case "location": btn.disabled = true; js_alert(formid, _("认证成功，")+"<b>"+(i)+"</b>"+_("秒后将跳转页面。")); interval = setInterval(function (){ if (i > 0) { js_alert(formid, _("认证成功，")+"<b>"+(i--)+"</b>"+_("秒后将跳转页面。")); } else { clearInterval(interval); js_alert(formid, ""); var reg = RegExp( "^http://www\.airport\.us/" + "\|^http://www\.thinkdifferent\.us/" + "\|^http://captive\.apple\.com/" + "\|^http://www\.appleiphonecell\.com/" + "\|^http://www\.ibook\.info/" + "\|^http://www\.itools\.info/" + "\|^http://www\.gstatic\.com/generate_204" + "\|^http://clients[0-9]\.google\.com/generate_204", "i"); if (reg.test(o.location)) { var url = window.location.href; if(url.indexOf("&type=logout&username=") < 0) { url = url + "&type=logout&username=" + o.userName; } window.location = url; } else { window.location = o.location; } } },1*1000); break; } //登录成功后启用或关闭心跳状态 enablePop(o.pop); } var checked = $id("dis_disclaimer")?$id("dis_disclaimer").checked:false, btn = $id("dis_submitBtn"); if(window.g_hasDisclaimer && !checked){ js_alert("mode_disclaimer",_((_("请先阅读免责声明，并勾选!")))); return false; } btn.orgValue = btn.value; btn.value = _("请稍后..."); btn.disabled = true; $ajax({ opr : 'noAuthlogin' },"mode_disclaimer",fn,btn); } //免认证登录 function onFreeauthLogin(){ //成功后干啥 function fn(o){ btn.disabled = false; var formid = "mode_freeauth"; btn.value = btn.orgValue; if(!o.success){ js_alert(formid, o.msg); return; } var action = o.action,interval,i = 3; switch (action) { case "location": btn.disabled = true; js_alert(formid, _("认证成功，")+"<b>"+(i)+"</b>"+_("秒后将跳转页面。")); interval = setInterval(function (){ if (i > 0) { js_alert(formid, _("认证成功，")+"<b>"+(i--)+"</b>"+_("秒后将跳转页面。")); } else { clearInterval(interval); js_alert(formid, ""); var reg = RegExp( "^http://www\.airport\.us/" + "\|^http://www\.thinkdifferent\.us/" + "\|^http://captive\.apple\.com/" + "\|^http://www\.appleiphonecell\.com/" + "\|^http://www\.ibook\.info/" + "\|^http://www\.itools\.info/" + "\|^http://www\.gstatic\.com/generate_204" + "\|^http://clients[0-9]\.google\.com/generate_204", "i"); if (reg.test(o.location)) { var url = window.location.href; if(url.indexOf("&type=logout&username=") < 0) { url = url + "&type=logout&username=" + o.userName; } window.location = url; } else { window.location = o.location; } } },1*1000); break; case "logout": activatePage('logout',o.userName); break; } //登录成功后启用或关闭心跳状态 enablePop(o.pop); } var checked = $id("freeauth_disclaimer")?$id("freeauth_disclaimer").checked:false, btn = $id("freeauth_submitBtn"); if(window.g_hasDisclaimer && !checked){ js_alert("mode_freeauth",_((_("请先阅读免责声明，并勾选!")))); return false; } btn.orgValue = btn.value; btn.value = _("请稍后..."); btn.disabled = true; $ajax({ opr : 'freeauth' },"mode_freeauth",fn,btn); } function onLogout(){ logoutRequest({opr:'logout'},'mode_logout',$id('logout_submitBtn')) } //通用ajax请求，会转成json参数给到successFn function $ajax(params,formid,successFn,btn) { function error(msg){ if(btn){ btn.disabled = false; btn.value = btn.orgValue; } js_alert(formid, msg); } $.ajax({ url: g_url, data: params, type : "POST", success: function(resp){ var json= json_decode(resp); if(json){ successFn(json); }else{ error(_("响应数据格式不正确")); } }, error : function(o){ error(_("网络异常")); } }) } //通用登录请求 function loginRequest(params,formid,btn){ //成功后干啥 function fn(o){ btn.disabled = false; btn.value = btn.orgValue; if(!o.success){ js_alert(formid, o.msg); return; } //做下特殊处理，登录成功后应该恢复获取短信验证码的按钮 var getCodeBtn = $id("sms_getCodeBtn"); cookie.set("remainTime",""); clearInterval(getCodeBtn.interval); getCodeBtn.value = _("重新获取"); getCodeBtn.disabled = false; var action = o.action,interval,i = 3; switch (action) { case "changePwd": activatePage('changePwd',o.userName); break; case "location": btn.disabled = true; js_alert(formid, _("认证成功，")+"<b>"+(i)+"</b>"+_("秒后将跳转页面。")); interval = setInterval(function (){ if (i > 0) { js_alert(formid, _("认证成功，")+"<b>"+(i--)+"</b>"+_("秒后将跳转页面。")); } else { clearInterval(interval); js_alert(formid, ""); var reg = RegExp( "^http://www\.airport\.us/" + "\|^http://www\.thinkdifferent\.us/" + "\|^http://captive\.apple\.com/" + "\|^http://www\.appleiphonecell\.com/" + "\|^http://www\.ibook\.info/" + "\|^http://www\.itools\.info/" + "\|^http://www\.gstatic\.com/generate_204" + "\|^http://clients[0-9]\.google\.com/generate_204", "i"); if (reg.test(o.location)) { var url = window.location.href; if(url.indexOf("&type=logout&username=") < 0) { url = url + "&type=logout&username=" + o.userName; } window.location = url; } else { window.location = o.location; } } },1*1000); break; case "logout": activatePage('logout',o.userName); break; } //登录成功后启用或关闭心跳状态 enablePop(o.pop); } btn.orgValue = btn.value; btn.value = _("请稍后..."); btn.disabled = true; $ajax(params,formid,fn,btn); } //获取短信认证码后的状态 function afterGetSmsCodeSate(o,params,formid,btn,cdtime) { if(!o.success){ js_alert(formid, o.msg); btn.value = _("重新获取"); btn.disabled = false; return; } js_alert(formid, _("短信验证码发送成功")); //cookie.set("phoneNumber",params.userName); clearInterval(btn.interval); cookie.set("remainTime",cdtime); cookie.set("remainTimespan",(new Date()).getTime()); var i = cdtime;//60s后重新获取 btn.interval = setInterval(function (){ if (i > 0) { i--; btn.value = _("重新获取")+"("+i+")"; btn.disabled = true; cookie.set("remainTimespan",(new Date()).getTime()); cookie.set("remainTime",i); } else { clearInterval(btn.interval); cookie.set("remainTime",""); btn.value = _("重新获取"); btn.disabled = false; } },1*1000); } //获取短信验证码的请求 function getSmsCodeRequest(params,formid,btn){ //成功后干啥 function fn(o){ afterGetSmsCodeSate(o,params,formid,btn,60); } btn.orgValue = btn.value; btn.value = _("请稍后..."); btn.disabled = true; $ajax(params,formid,fn,btn); } //修改密码的请求 function changePwdRequest(params,formid,btn){ //成功后干啥 function fn(o){ btn.value = btn.orgValue; if(!o.success){ js_alert(formid, o.msg); btn.disabled = false; return; } var i = 3; js_alert(formid, _("修改密码成功，")+"<b>"+(i)+"</b>"+_("秒后将返回登录页面。")); var interval = setInterval(function (){ if (i > 0) { js_alert(formid, _("修改密码成功，")+"<b>"+(i--)+"</b>"+_("秒后将返回登录页面。")); } else { clearInterval(interval); btn.disabled = false; js_alert(formid, ""); activatePage('login','fromChangePwd'); } },1*1000); } btn.orgValue = btn.value; btn.value = _("请稍后..."); btn.disabled = true; $ajax(params,formid,fn,btn); } //注销请求 function logoutRequest(params,formid,btn) { //成功后干啥 function fn(o){ btn.value = btn.orgValue; if(!o.success){ js_alert(formid, o.msg); btn.disabled = false; return; } var i = 3; js_alert(formid, _("注销成功，")+"<b>"+(i)+"</b>"+_("秒后将返回登录页面。")); var interval = setInterval(function (){ if (i > 0) { js_alert(formid, _("注销成功，")+"<b>"+(i--)+"</b>"+_("秒后将返回登录页面。")); } else { clearInterval(interval); btn.disabled = false; js_alert(formid, ""); activatePage('login'); } },1*1000); enablePop(false); } btn.orgValue = btn.value; btn.value = _("请稍后..."); btn.disabled = true; $ajax(params,formid,fn,btn); } //<<---------------按钮事件和请求的绑定------------- //logout页面当pop=1的时候需要发心跳，同时在离开页面时需要提示 var enablePop = (function(){ var pop = false,interval; function stratQuery(){ clearInterval(interval); interval = setInterval(request,g_querytTime*1000); } //心跳请求 function request(){ $.ajax({ url: g_querylogutUrl, type : "GET", success: function(resp){ if(window.console && window.console.log){ console.log("tick"); } } }); } window.onbeforeunload = function(e){ e = e || window.event; if(pop){ var msg = _("温馨提示：离开本页面将注销此次登录。"); e.returnValue = msg; return msg; } }; return function(enable){ pop = enable; if(pop){ stratQuery(); }else{ clearInterval(interval); } } })(); //实现html中英文替换 function doLocalHtml(){ $('*').each(function(){ if($(this).attr("_html")){ $(this).html(_($(this).attr("_html"))); } if($(this).attr("_value")){ $(this).attr("value",_($(this).attr("_value"))); } if($(this).attr("_title")){ $(this).attr("title",_($(this).attr("_title"))); } }); } //实现js中英文替换 function _(str){ //如果是中文则不处理。 if(parseInt(getUrlParam("lang")) !== 1){ return str; } var argus = Array.prototype.slice.call(arguments, 1); str = g_Language.hasOwnProperty(str) ? g_Language[str] : str; return str.replace(/\{(\d+)\}/g, function (m, i) { i = parseInt(i, 10); if (i >= 0 && i < argus.length) { return argus[i]; } else { return m; } }); } //定时请求后台,二维码认证 function ajaxQCode(){ $.ajax({ type:'GET', url : '/ac_portal/qcode_test.html?'+new Date().getTime(), success : function(json){ if(json == 1){ js_alert("mode_qrcode", _("认证成功")); clearInterval(window.g_setInter); } }, error : function(json){ //js_alert("mode_qrcode", _("认证失败")); } }); } //判断是否是IPv4，v6，返回处理后的location.host function locationHost(){ var hostname = location.hostname, host = location.host, port = location.port; // 如果是IPv6，并且没有中括号，则加上 if(hostname.indexOf(":")>=0){ // 如果有中括号 if(/^\[.*\]$/.test(hostname)){ //hostname = hostname.slice(1, hostname.length-1); }else{ hostname = "[" + hostname + "]"; } // IE在IPv6下host有误，IP不带中括号 host = hostname + (port ? (":" + port) : ""); } return host; } //生成跳转登陆页面的url,端口为80 function createLoginUrl(){ var hostname = location.hostname, host, port = location.port; // 如果是IPv6，并且没有中括号，则加上 if(hostname.indexOf(":")>=0){ // 如果有中括号 if(/^\[.*\]$/.test(hostname)){ //hostname = hostname.slice(1, hostname.length-1); }else{ hostname = "[" + hostname + "]"; } } host = hostname; return "http://"+host; } //生成二维码url function create_qrcode_url(){ var urlIp = getUrlParam("ip"), urlR = getUrlParam("r"), urlT = getUrlParam("t"), urlVlanid = getUrlParam("vlanid"), urlc = getUrlParam("c"), url; url = createLoginUrl()+"/ac_portal/qcode.html?ip="+urlIp+"&r="+urlR+"&t="+urlT+"&c="+urlc+"&vlanid="+urlVlanid; return url; } //生成2维码 function create_qrcode (text, typeNumber, errorCorrectLevel, table) { var qr = qrcode(typeNumber || 10, errorCorrectLevel || 'M'); qr.addData(text); qr.make(); var ua = window.navigator.userAgent; //ie6,ie7使用tab if(ua.indexOf("MSIE 7")>-1 || ua.indexOf("MSIE 6")>-1){ return qr.createTableTag(); } return qr.createImgTag(); }; // 获取当前设备相关信息 function getDeviceInfo() { var UA = (navigator.userAgent).toLowerCase(); return { ratio: window.devicePixelRatio || 1, isMobile: /(android|mobile|windows (ce|phone)|kindle|blackberry|psp|palm|symbian)/.test(UA), isIpad: /ipad/.test(UA), isIOS: /(iphone|ipad|ipod|mac os)/.test(UA), isAndroid: /android/.test(UA), isMQQBrowser: /mqqbrowser/.test(UA), isWeChat: /micromessenger/.test(UA) } } function initWechatLink(){ var deviceInfo = getDeviceInfo(), isPreview = getUrlParam("ispreview"); if(!deviceInfo.isWeChat && (deviceInfo.isIOS || (deviceInfo.isMQQBrowser && deviceInfo.isAndroid) || isPreview)) { var href = deviceInfo.isIOS ? "weixin://" : "http://weixin.qq.com/r/" ; $("#wechat_link").attr("href", href); $("#wechat_link").show(); } else{ $("#wechat_link").hide(); } } $(document).ready(function(){ doLocalHtml(); var pop = getUrlParam("pop"),type = getUrlParam("type"),remainTime,phoneNumber,timespan; if(pop === "1" && type === "logout"){ enablePop(true); } //定时请求后台,二维码认证才会发请求 if(getUrlParam('tabs').indexOf('qrcode')>-1){ window.g_setInter = setInterval(ajaxQCode,5000); } remainTime = parseInt(cookie.get("remainTime")); phoneNumber = cookie.get("phoneNumber"); if(remainTime){ timespan = remainTime - Math.floor(((new Date()).getTime() - parseInt(cookie.get("remainTimespan")))/1000); if(timespan>0){ $id("sms_getCodeBtn").disabled = true; $id("sms_name").value = phoneNumber; afterGetSmsCodeSate({success:true},{userName:phoneNumber},"mode_sms",$id("sms_getCodeBtn"),timespan); } }else if(phoneNumber){ $id("sms_name").value = phoneNumber; } //如果是通过直接请求的logout页面，需要发个请求通知服务端 if(type === "logout"){ $.ajax({ url: g_smsackUrl, type : "GET", success: function(resp){ if(window.console && window.console.log){ console.log("sms_ack"); } } }); } });
十四、js二维码
https://kazuhikoarase.github.io/qrcode-generator/
十五、html技巧
http://blog.csdn.net/yefengmeander/article/details/3861400
十六、下拉加载更多
<!DOCTYPE=html> <html> <head> <script src="https://code.jquery.com/jquery-1.12.4.js" type="text/javascript"></script> </head> <body> <div>下拉加载更多</div> <div class="main" style="height:700px;overflow:auto;"> <div class="child" style='border:1px solid red;margin-top:20px;color:grey;height:800px' ></div> </div> </body> <script type="text/javascript"> $(document).ready(function(){ $(".main").unbind("scroll").bind("scroll", function(e){ var C=20; var sum = this.scrollHeight-C; if (sum <= $(this).scrollTop() + $(this).height()) { $(".main").append($(".child").clone()); } }); }); </script> </html>
十七、前段开发编码规范
http://www.zongjie100.com/arts/192629/
十八、JS继承
http://www.cnblogs.com/humin/p/4556820.html
