開發網站相關知識html和javascript
1.html 佈局javascript
https://github.com/bramstein/jlayout/php
http://welcome.totheinter.net/columnizer-jquery-plugin/css
http://www.jwf.us/projects/jQSlickWrap/html
http://masonry.desandro.com/前端
http://layout.jquery-dev.com/index.cfmhtml5
2.側邊欄控件：java
https://www.berriart.com/sidr/jquery
3.js方便的操做session和cookie（操做簡單方便）android
https://plugins.jquery.com/html5storage/git
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/
11、網站界面
網站框架：
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
12、操做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"); } } }); } });
十4、js二維碼
https://kazuhikoarase.github.io/qrcode-generator/
十5、html技巧
http://blog.csdn.net/yefengmeander/article/details/3861400
十6、下拉加載更多
<!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>
十7、前段開發編碼規範
http://www.zongjie100.com/arts/192629/
十8、JS繼承
http://www.cnblogs.com/humin/p/4556820.html
相關文章
- 1. 【前端知識網站 】 HTML ，CSS 和 Javascript
- 2. html相關知識
- 3. HTML相關知識
- 4. JavaScript相關知識
- 5. PHPWeb開發相關知識
- 6. html表單相關知識
- 7. 網站性能，javascript性能相關知識點
- 8. html開發知識
- 9. Android開發 發佈相關知識
- 10. L--前端開發面試知識點(HTML相關)
- 更多相關文章...
- • ASP.NET Web Pages - 發佈網站 - ASP.NET 教程
- • ASP.NET MVC - 發佈網站 - ASP.NET 教程
- • NewSQL-TiDB相關
- • PHP開發工具
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 字節跳動21屆秋招運營兩輪面試經驗分享
- 2. Java 3 年，25K 多嗎？
- 3. mysql安裝部署
- 4. web前端開發中父鏈和子鏈方式實現通信
- 5. 3.1.6 spark體系之分佈式計算-scala編程-scala中trait特性
- 6. dataframe2
- 7. ThinkFree在線
- 8. 在線畫圖
- 9. devtools熱部署
- 10. 編譯和鏈接
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 【前端知識網站 】 HTML ，CSS 和 Javascript
- 2. html相關知識
- 3. HTML相關知識
- 4. JavaScript相關知識
- 5. PHPWeb開發相關知識
- 6. html表單相關知識
- 7. 網站性能，javascript性能相關知識點
- 8. html開發知識
- 9. Android開發 發佈相關知識
- 10. L--前端開發面試知識點(HTML相關)