现有一个考试项目，当在浏览器进行考试时需要判断用户是否存在切屏，如果切屏就对当前考试进行自动强制交卷。浏览器中可通过window对象的onblur、onfocus判断，或者document的hidden属性判断。

获取焦点（onfocus）和失去焦点（onblur）

关于是否失焦点，浏览器对象有onfocus 和 onblur事件可以监听。但是触发这两个事件的前提是页面之前是获取焦点的，就是说要是激活的。也就是说页面刚刚渲染完，用户在没有页面上任何操作时，页面是不会正常监听这两个事件的；或者页面在打开状态下，但是触发了onblur之后并无页面操作的情况下也不会正常监听这两个事件。直到，用户操作页面触发focus，之后离开页面才会触发blur，再次点击到当前页面时才会触发focus，如此反复都会触发相应的事件。

onblur

• 在chrome浏览器下，点击console面板也会触发blur事件，前提是之前是focus的状态。
• 页面最小化；
• 浏览器切换tab页面；
• 页面中的任何弹窗；
• focus状态下切换到其他应用

onfocus

• 用户存在页面操作（包括页面中js脚本运行。如页面加载完无js运行，用户无操作，则不会触发 ）；
• 事件触发前提下，页面最大化；
• 事件触发前提下，页面从其他tab页切换回当前页面；

onblur与onfocus示例

  
//离开          
window.onblur = function () {
         console&&console.log("切屏了onblur");
 };
 //回来
 window.onfocus = function () {
        console&&console.log("切屏了onfocus");
  };

HTML5新增API

HTML5新增的API, visibilitychange, document.hidden, document.visibilityState来实现相关内容。

visibilitychange

• 浏览器支持 visibilitychange 是HTML5的API所以支持持最新浏览器 Chrome, Firefox, IE10+
• 用addEventListener添加事件,当页面发生改变就会触发

老版本浏览器如果失效需要添加前缀

• mozvisibilitychange 火狐
• msvisibilitychange IE
• webkitvisibilitychange 谷歌,Safari

document.hidden

hidden是document的属性，可以判断页面是否显示的是当前的页面。visibilitychange事件就是触发页面可见的事件。当然不同的浏览器内核记得要加前缀。表示页面处于非激活状态，反之处于激活状态。

• 页面最小化
• 页面在后台运行
• 切换tab栏到其他页面

当其hidden为false的时候就是当前网页正在被用户浏览，其值为ture就是当前网页进入后台。

document.visibilityState

• visible 是浏览器当前激活,窗口不是最小化状态
• hidden 不是当前激活,或者窗口最小化了
• prerender 重新生成,对用户不可见

visibilitychange事件示例

        
var hiddenProperty = 'hidden' in document ? 'hidden' :
            'webkitHidden' in document ? 'webkitHidden' :
                'mozHidden' in document ? 'mozHidden':null;
        var visibilityChangeEvent = hiddenProperty.replace(/hidden/i, 'visibilitychange');
        var onVisibilityChange = function () {
            if (!document[hiddenProperty]) {
                console && console.log('页面激活');
            } else {
                console && console.log('页面非激活');
            }
        }
        document.addEventListener(visibilityChangeEvent, onVisibilityChange);

以上两种方式在某些情况下存在一定差异，为了实现一些需求，可能需要组合使用。

转载请注明：清风亦平凡 » Javascript判断当前页面是否处于激活状态

MDN官网介绍

setDate()方法根据本地时间来指定一个日期对象的天数。如果 dayValue 超出了月份的合理范围，setDate 将会相应地更新 Date 对象。例如，如果为 dayValue 指定0，那么日期就会被设置为上个月的最后一天。

获取月份天数

// 获取月份天数
function getMonthDayCount(year, month) {
  return new Date(year, month, 0).getDate();
}
console.log(getMonthDayCount(2017, 10)); // 31

Date 第三个参数的本质跟 setDate 是一样的。因为 date 为 0 时自动退到上个月的最后一天，所以这里月份也不需要减，正好的。

获取所有月份天数

function getAllMonthDayCount(year) {
  var days = [31, new Date(year, 2, 0).getDate(), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
  return days;
}
console.log(getAllMonthDayCount(2016));// [31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]

这个算是上面的延伸，不多解释。

是否是闰年

 function isLeapYear(year) {
  return (year % 4 == 0) && (year % 100 != 0 || year % 400 == 0);
}

这是网上的代码，相信大多数人都用。但其实你真的理解或者能记住么？反正我不能。。

function isLeapYear(year) {
  return new Date(year, 2, 0).getDate() === 29;
}
console.log([
  isLeapYear(2000),
  isLeapYear(2016),
  isLeapYear(2017),
  isLeapYear(2018)
]); // [ true, true, false, false ]

这样看，是不是就非常简单容易理解了。而且都不需要记，是不是想忘都忘不了？

天数加减操作

之前看到有人用相对秒数在计算几天前或几天后，甚至还在算跨月，跨年的情况。其实直接 setDate 就好了，自动处理 跨月，跨年 的情况。

// 10天后是几月几号
var dt = new Date('2016-12-25');
dt.setDate(dt.getDate() + 10);
console.log(dt.toLocaleDateString()); // 2017/1/4


// 10天前是几月几号
var dt = new Date('2017-01-04');
dt.setDate(dt.getDate() - 10);
console.log(dt.toLocaleDateString()); // 2016/12/25

小结

虽然这些东西很基础，说方法名，可能大家都知道，但很多人却依然不会去使用。就跟用 jq 却依然 for 循环处理结果一样。这里只列举了部分例子，也许会有其他神奇的操作技巧等你去发现。

作者： 楼教主

链接： http://www.52cik.com/2017/10/11/js-date-month.html

转载请注明：清风亦平凡 » js Date 操作之神奇的 date

JQuery代码实现类似效果：

var a_idx = 0;
jQuery(document).ready(function($) {
    $("body").click(function(e){
var a = new Array("Javascript", "DotNet", "C#", "Java", "C", "C++", "HTML", "CSS", "NodeJS", "PHP", "SQL");
        var $i = $("<span/>").text(a[a_idx]);
a_idx = (a_idx + 1) % a.length;
        var x = e.pageX, y = e.pageY;
        $i.css({
            "z-index":99999,
            "top":y-20,
            "left":x,
            "position":"absolute",
            "color":"red"
        });
        $("body").append($i);
        $i.animate(
            {"top":y-180,"opacity":0},
            1500,
            function(){$i.remove();}
        );
    });
});

转载请注明：清风亦平凡 » JQuery特效单击漂浮文字

方法一：正则分析法

function getQueryString(name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
    var r = window.location.search.substr(1).match(reg);
    if (r != null) {
        return unescape(r[2]);
    }
    return null;
}

调用方法：

alert(GetQueryString("参数名1"));
alert(GetQueryString("参数名2"));
alert(GetQueryString("参数名3"));

方法二：split分割法

function GetQueryString(key) {
    var param = window.location.search.replace(/^\?/, "");
    var returnValue = [];
    var TempValue = param.split("&");
    var TempArr = [];
    for (var i = 0; i < TempValue.length; i++) {
        TempArr = TempValue[i].split("=");
        returnValue[TempArr[0].toLowerCase()] = TempArr[1];
    }
    return returnValue[key.toLowerCase()] || null;
}

调用方法：

alert(GetQueryString("参数名1"));

转载请注明：清风亦平凡 » JavaScript获取URL地址参数

转载请注明：清风亦平凡 » Javascript实现数组类

转载请注明：清风亦平凡 » Jquery插件实现outerHTML

最早的时候，所有Javascript代码都写在一个文件里面，只要加载这一个文件就够了。后来，代码越来越多，一个文件不够了，必须分成多个文件，依次加载。下面的网页代码，相信很多人都见过。

<script src="1.js"></script>
<script src="2.js"></script>
<script src="3.js"></script>
<script src="4.js"></script>
<script src="5.js"></script>
<script src="6.js"></script>

这段代码依次加载多个js文件。

这样的写法有很大的缺点。首先，加载的时候，浏览器会停止网页渲染，加载文件越多，网页失去响应的时间就会越长；其次，由于js文件之间存在依赖关系，因此必须严格保证加载顺序（比如上例的1.js要在2.js的前面），依赖性最大的模块一定要放到最后加载，当依赖关系很复杂的时候，代码的编写和维护都会变得困难。

require.js的诞生，就是为了解决这两个问题：

（1）实现js文件的异步加载，避免网页失去响应；

（2）管理模块之间的依赖性，便于代码的编写和维护；

二、require.js的加载

使用require.js的第一步，是先去官方网站下载最新版本。下载后，假定把它放在js子目录下面，就可以加载了。

<script src="js/require.js"></script>t>

有人可能会想到，加载这个文件，也可能造成网页失去响应。解决办法有两个，一个是把它放在网页底部加载，另一个是写成下面这样：

<script src="js/require.js" defer async="true" ></script>

async属性表明这个文件需要异步加载，避免网页失去响应。IE不支持这个属性，只支持defer，所以把defer也写上。加载require.js以后，下一步就要加载我们自己的代码了。假定我们自己的代码文件是main.js，也放在js目录下面。那么，只需要写成下面这样就行了：

<script src="js/require.js" data-main="js/main"></script>

data-main属性的作用是，指定网页程序的主模块。在上例中，就是js目录下面的main.js，这个文件会第一个被require.js加载。由于require.js默认的文件后缀名是js，所以可以把main.js简写成main。

三、主模块的写法

上一节的main.js，我把它称为”主模块”，意思是整个网页的入口代码。它有点像C语言的main()函数，所有代码都从这儿开始运行。下面就来看，怎么写main.js。如果我们的代码不依赖任何其他模块，那么可以直接写javascript代码。

     // main.js
alert("加载成功！");

但这样的话，就没必要使用require.js了。真正常见的情况是，主模块依赖于其他模块，这时就要使用AMD规范定义的的require()函数。

// main.js
require(['moduleA', 'moduleB', 'moduleC'], function (moduleA, moduleB, moduleC){
　　// some code here
});

require()函数接受两个参数。第一个参数是一个数组，表示所依赖的模块，上例就是[‘moduleA’, ‘moduleB’, ‘moduleC’]，即主模块依赖这三个模块；第二个参数是一个回调函数，当前面指定的模块都加载成功后，它将被调用。加载的模块会以参数形式传入该函数，从而在回调函数内部就可以使用这些模块。

require()异步加载moduleA，moduleB和moduleC，浏览器不会失去响应；它指定的回调函数，只有前面的模块都加载成功后，才会运行，解决了依赖性的问题。下面，我们看一个实际的例子。

假定主模块依赖jquery、underscore和backbone这三个模块，main.js就可以这样写：

    require(['jquery', 'underscore', 'backbone'], function ($, _, Backbone){
　　// some code here
});

equire.js会先加载jQuery、underscore和backbone，然后再运行回调函数。主模块的代码就写在回调函数中。

四、模块的加载

上一节最后的示例中，主模块的依赖模块是[‘jquery’, ‘underscore’, ‘backbone’]。默认情况下，require.js假定这三个模块与main.js在同一个目录，文件名分别为jquery.js，underscore.js和backbone.js，然后自动加载。

使用require.config()方法，我们可以对模块的加载行为进行自定义。require.config()就写在主模块（main.js）的头部。参数就是一个对象，这个对象的paths属性指定各个模块的加载路径。

require.config({
　　　paths: {
　　　　　"jquery": "jquery.min",
　　　　　"underscore": "underscore.min",
　　　　　"backbone": "backbone.min"
　　　}
　});

上面的代码给出了三个模块的文件名，路径默认与main.js在同一个目录（js子目录）。如果这些模块在其他目录，比如js/lib目录，则有两种写法。一种是逐一指定路径。

require.config({
　　　paths: {
　　　　　"jquery": "lib/jquery.min",
　　　　　"underscore": "lib/underscore.min",
　　　　　"backbone": "lib/backbone.min"
　　　}
　});

另一种则是直接改变基目录（baseUrl）。

require.config({
　　　baseUrl: "js/lib",
　　　paths: {
　　　　　"jquery": "jquery.min",
　　　　　"underscore": "underscore.min",
　　　　　"backbone": "backbone.min"
　　　}
　});

如果某个模块在另一台主机上，也可以直接指定它的网址，比如：

 require.config({
　　paths: {
　　　　"jquery": "https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min"
　　}
});

require.js要求，每个模块是一个单独的js文件。这样的话，如果加载多个模块，就会发出多次HTTP请求，会影响网页的加载速度。因此，require.js提供了一个优化工具，当模块部署完毕以后，可以用这个工具将多个模块合并在一个文件中，减少HTTP请求数。

五、AMD模块的写法

require.js加载的模块，采用AMD规范。也就是说，模块必须按照AMD的规定来写。具体来说，就是模块必须采用特定的define()函数来定义。如果一个模块不依赖其他模块，那么可以直接定义在define()函数之中。

假定现在有一个math.js文件，它定义了一个math模块。那么，math.js就要这样写：

// math.js
define(function (){
　　　var add = function (x,y){
　　　　　return x+y;
　　　};
　　　return {
　　　　　add: add
　　　};
　});

加载方法如下：

// main.js
require(['math'], function (math){
　　alert(math.add(1,1));
});

如果这个模块还依赖其他模块，那么define()函数的第一个参数，必须是一个数组，指明该模块的依赖性。

define(['myLib'], function(myLib){
　　　function foo(){
　　　　　myLib.doSomething();
　　　}
　　　return {
　　　　　foo : foo
　　　};
});

当require()函数加载上面这个模块的时候，就会先加载myLib.js文件。

六、加载非规范的模块

理论上，require.js加载的模块，必须是按照AMD规范、用define()函数定义的模块。但是实际上，虽然已经有一部分流行的函数库（比如jQuery）符合AMD规范，更多的库并不符合。那么，require.js是否能够加载非规范的模块呢？

回答是可以的。

这样的模块在用require()加载之前，要先用require.config()方法，定义它们的一些特征。

举例来说，underscore和backbone这两个库，都没有采用AMD规范编写。如果要加载它们的话，必须先定义它们的特征。

require.config({
　　　shim: {
 
　　　　　'underscore':{
　　　　　　　exports: '_'
　　　　　},
　　　　　'backbone': {
　　　　　　　deps: ['underscore', 'jquery'],
　　　　　　　exports: 'Backbone'
　　　　　}
　　　}
　});

require.config()接受一个配置对象，这个对象除了有前面说过的paths属性之外，还有一个shim属性，专门用来配置不兼容的模块。具体来说，每个模块要定义（1）exports值（输出的变量名），表明这个模块外部调用时的名称；（2）deps数组，表明该模块的依赖性。

比如，jQuery的插件可以这样定义：

shim: {
　　　'jquery.scroll': {
　　　　　deps: ['jquery'],
　　　　　exports: 'jQuery.fn.scroll'
　　　}
　}

七、require.js插件

require.js还提供一系列插件，实现一些特定的功能。

domready插件，可以让回调函数在页面DOM结构加载完成后再运行

require(['domready!'], function (doc){
　　// called once the DOM is ready
});

text和image插件，则是允许require.js加载文本和图片文件。

define([
　　　'text!review.txt',
　　　'image!cat.jpg'
　　　],
 
　　　function(review,cat){
　　　　　console.log(review);
　　　　　document.body.appendChild(cat);
　　　}
　);

类似的插件还有json和mdown，用于加载json文件和markdown文件。

以上文章转载于（阮一峰）：http://www.ruanyifeng.com/blog/2012/11/require_js.html

转载请注明：清风亦平凡 » require.js的用法

var dataShare = {
    setData: function(name, value) {
        var top = window.top,
        cache = top['_CACHE'] || {};
        top['_CACHE'] = cache;
        return value ? cache[name] = value: cache[name];
    },
    removeData: function(name) {
        var cache = window.top['_CACHE'];
        if (cache && cache[name]) {
            delete cache[name];
        }
    }
};
dataShare.setData("Url", "https://www.mlplus.net");

转载请注明：清风亦平凡 » javascript实现的iframe数据共享接口

function getDPI() {
        var arrDPI = new Array;
        var devicePixelRatio = window.devicePixelRatio || 1;
        var tmpNode = document.createElement("DIV");
        tmpNode.style.cssText = "height: 1in; left: -100%; position: absolute; top: -100%; width: 1in;";
        document.body.appendChild(tmpNode);
        arrDPI[0] = parseInt(tmpNode.offsetWidth)* devicePixelRatio;
        arrDPI[1] = parseInt(tmpNode.offsetHeight)*devicePixelRatio;
        tmpNode.parentNode.removeChild(tmpNode);
         
        return arrDPI;
}
alert(getDPI());

转载请注明：清风亦平凡 » JavaScript获取用户的DPI

function ConvertUpperMoney(whole) {
 //金额转换。输入数字字符串，低至分位，高位不为零
    var GBK_unit1 = "分角";
    var GBK_unit2 = "圆拾佰仟";
    var GBK_unit3 = "万拾佰仟"
    var GBK_unit4 = "亿拾佰仟";
    var GBK_num = "零壹贰叁肆伍陆柒捌玖";
    var section1 = "";
    if (whole.length - 2 >= 0) section1 = whole.substr(whole.length - 2, 2);
    else section1 = whole.substr(0, whole.length);

    var section2 = "";
    if (whole.length - 6 >= 0) section2 = whole.substr(whole.length - 6, 4);
    else if (whole.length - 2 > 0) section2 = whole.substr(0, whole.length - 2);

    var section3 = "";
    if (whole.length - 6 > 0) section3 = whole.substr(0, whole.length - 6);
    var str_GBK = "";

    //分角处理
    if (section1 == "") return str_GBK;
    for (var i = 0; i < section1.length; i++) {
        var n = section1.charAt(section1.length - 1 - i);
        if (n != '0') str_GBK = GBK_num.substr(Number(n), 1) + GBK_unit1.substr(i, 1) + str_GBK;
        else if (i == 1 && str_GBK.substr(0, 1) != "" && section2 != "") //角位加零
        str_GBK = GBK_num.substr(Number(n), 1) + str_GBK;
    }

    //圆拾佰仟处理
    if (str_GBK == "") str_GBK = "整";
    if (section2 == "") return str_GBK;
    for (var i = 0; i < section2.length; i++) {
        var n = section2.charAt(section2.length - 1 - i);
        if (n != '0') str_GBK = GBK_num.substr(Number(n), 1) + GBK_unit2.substr(i, 1) + str_GBK;
        else if (i == 0) //圆位零字处理
        str_GBK = GBK_unit2.substr(i, 1) + str_GBK;
        else if (str_GBK.substr(0, 1) != "零" && str_GBK.substr(0, 1) != "圆") //拾佰仟位零字处理
        str_GBK = GBK_num.substr(Number(n), 1) + str_GBK;
    }

    //万拾佰仟、亿拾佰仟循环处理
    if (section3 == "") return str_GBK;
    for (var i = 0,
    k = 0; i < section3.length; i = i + 4, k = (k + 1) % 2) { var sectionSub = ""; var start = section3.length - (4 + i); if (start >= 0) {
            sectionSub = section3.substr(start, 4);
        } else {
            sectionSub = section3.substr(0, 4 + start);
        }

        if (parseInt(sectionSub) == 0 && k == 0) //万拾佰仟节全为零跳过
        {
            continue;
        }

        for (var j = 0; j < sectionSub.length; j++) {
            var n = sectionSub.charAt(sectionSub.length - 1 - j);
            if (k == 0) //万拾佰仟处理
            {
                if (n != '0') str_GBK = GBK_num.substr(Number(n), 1) + GBK_unit3.substr(j, 1) + str_GBK;
                else if (j == 0) //万位零字处理
                str_GBK = GBK_unit3.substr(j, 1) + str_GBK;
                else if (str_GBK.substr(0, 1) != "零" && str_GBK.substr(0, 1) != "万") //拾佰仟零字处理
                str_GBK = GBK_num.substr(Number(n), 1) + str_GBK;
            } else //亿拾佰仟处理
            {
                if (n != '0') str_GBK = GBK_num.substr(Number(n), 1) + GBK_unit4.substr(j, 1) + str_GBK;
                else if (j == 0) //亿位零字处理
                str_GBK = GBK_unit4.substr(j, 1) + str_GBK;
                else if (str_GBK.substr(0, 1) != "零" && str_GBK.substr(0, 1) != "亿") //拾佰仟零字处理
                str_GBK = GBK_num.substr(Number(n), 1) + str_GBK;
            }
        }
    }
    return str_GBK;
}
var Money = 50000000;
//传入函数的时候要转换为分
console.log(ConvertUpperMoney(String((Money * 100))));

转载请注明：清风亦平凡 » JavaScript实现金额转为大写

转载请注明：清风亦平凡 » Javascript简单实现HTML元素抖动效果

转载请注明：清风亦平凡 » TpLink路由器登录密码加密算法

function extendCopy(p) {　　　　
    var c = {};　　　　
    for (var i in p) {　　　　　　
        c[i] = p[i];　　　　
    }　　　　
    c.uber = p;　　　　
    return c;
}

深拷贝：

function deepCopy(p, c) {　　　　
    var c = c || {};　　　　
    for (var i in p) {　　　　　　
        if (typeof p[i] === 'object') {
            c[i] = (p[i].constructor === Array) ? [] : {};
            deepCopy(p[i], c[i]);　　　　　　
        } else {　　　　　　
            c[i] = p[i];　　　　　　
        }　　　　
    }　　　　
    return c;　　
}

转载请注明：清风亦平凡 » JavaScript对象深浅拷贝

转载请注明：清风亦平凡 » javaScript日期格式化