开发网站相关知识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/

开发网站相关知识html和javascript

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:;

  position: fixed;

  margin: auto;

  top: 12px;

  left:;

  right:;

  bottom:;

  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:;

  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:;

  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/

十一、网站界面

开发网站相关知识html和javascript

网站框架：

http://www.mycodes.net/154/

跑马灯图片轮播

http://amazeui.org/getting-started?_ver=2.x

综合知识；

http://blog.****.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

开发网站相关知识html和javascript

2.ie浏览器（不遵循mini映射）修要添加http响应标头名称Content-Disposition值attachment

开发网站相关知识html和javascript

十二、操作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,"&amp;").replace(/>/g,"&gt;").replace(/</g,"&lt;").replace(/"/g,"&quot;");

}    

// 简写方法

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.****.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

秒客网

开发网站相关知识html和javascript

相关文章