🌓

jq 地址栏链接与a标签链接匹配

2015-08-26

如题所述，当出现这样的功能，点击某个链接后，给跳转后的该链接地址添加样式，通过添加class为current来增加特殊样式。

如图所示：点击HTML+css3跳转后，给其添加如图样式：

用原生态的JS实现类似JQuery的$(

2015-08-26

之前有个一直做前端开发的朋友，问我一个问题，说去面试一家NB的公司，问一个看似很简单的问，一时却不知道如何实现，虽然对jquery使用的很多，其实如果没看过jQuery的源码，相信一时很多人都会尴尬，这里我简单的做个案例，便于大家参考，当然jQuery会写的比这个复杂很多，判断部分有很多内容，这里我只是把他简单化了，提供给不会的朋友参考思路。

JS cookie 读写操作

2015-08-26

/***
** 功能：  cookie操作对象
***/
var cookies = {
    /***
    ** 功能：  写入cookie操作
    ** 参数：  name cookie名称
    **         value cookie值 
    **         expires 过期时间
    **         path  路径
    **         domain 域
    ***/
    set: function (name, value, expires, path, domain) {
        expires = new Date(new Date().getTime() + (((typeof expires == "undefined") ? 12 * 7200 : expires)) * 1000);
        var tempcookie = name + "=" + escape(value) +
        ((expires) ? "; expires=" + expires.toGMTString() : "") +
        ((path) ? "; path=" + path : "; path=/") +
        ((domain) ? "; domain=" + domain : "");
        (tempcookie.length < 4096) ? document.cookie = tempcookie : alert("The cookie is bigger than cookie lagrest");
    },

    /***
    ** 功能：  获取cookie操作
    ** 参数：  name cookie名称
    ***/
    get: function (name) {
        var xarr = document.cookie.match(new RegExp("(^| )" + name + "=([^;]*)(;|$)"));
        if (xarr != null)
            return unescape(xarr[2]);
        return null;
    },

    /***
    ** 功能：  删除cookie操作
    ** 参数：  name cookie名称
    **         path  路径
    **         domain 域
    ***/
    del: function (name, path, domain) {
        if (this.get(name))
            document.cookie = name + "=" +
            ((path) ? "; path=" + path : "; path=/") +
            ((domain) ? "; domain=" + domain : "") +
            ";expires=Thu, 01-Jan-1970 00:00:01 GMT";
    },
    day: function (xd) {
        return xd * 24 * 3600;
    },
    hour: function (xh) {
        return xh * 3600;
    }
}

动态添加JS文件到页面中

2015-08-26

/***
** 功能：  加载外部JS文件，加载完成后执行回调函数callback
***/
var utools = {
    config: {
        id: "",
        url: "",
        charset: "gb2312",
        callback: function () { }
    },
    merge: function (a, c) {
        for (var b in c) a[b] = c[b];
        return a
    },
    getScript: function (a) {
        var r = Math.floor(Math.random() * 10000);
        this.config = this.merge(this.config, a);
        var callback = this.config.callback;
        var scriptNode = document.createElement("script");
        scriptNode.setAttribute("id", this.config.id);
        scriptNode.setAttribute('charset', this.config.charset);
        scriptNode.setAttribute('type', 'text/javascript');
        scriptNode.setAttribute('src', this.config.url + "?r=" + r);
        var head = document.getElementsByTagName("head")[0];
        head.appendChild(scriptNode);
        scriptNode[document.all ? "onreadystatechange" : "onload"] = function () {
            if (!this.readyState || this.readyState == "loaded" || this.readyState == "complete") {
                if (callback) callback();
                scriptNode.onreadystatechange = scriptNode.onload = null;
                scriptNode.parentNode.removeChild(scriptNode)
            }
        };
    }
}

//调用方式
utools.getScript({url:"js文件路径"});

JS根据key值获取URL中的参数值，以及把URL的参数转换成json对象

2015-08-26

//把url的参数部分转化成json对象

parseQueryString: function (url) {
      var reg_url = /^[^\?]+\?([\w\W]+)$/,
          reg_para = /([^&amp;=]+)=([\w\W]*?)(&amp;|$|#)/g,
          arr_url = reg_url.exec(url),
          ret = {};
      if (arr_url &amp;&amp; arr_url[1]) {
          var str_para = arr_url[1], result;
          while ((result = reg_para.exec(str_para)) != null) {
              ret[result[1]] = result[2];
          }
      }
      return ret;
  }

国内UED收录分享

2015-08-26

腾讯

腾讯CDC http://cdc.tencent.com/ CDC(Customer Research & User Experience Design Center)腾讯用户研究与体验设计中心

使用纯js写的一个分页

2015-08-26

上图晒效果：

网上确实有很多分页的插件以及开源代码，单本是一个后台开发猿，前台css等样式还驾驭不住，所以就开始自己去写了。其实这个分页原理很简单，就是用ajax往后台传值(当前页码)，后台使用limit进行分页。

JS禁止横竖屏切换,强制横竖屏显示

2015-08-26

js判断屏幕横竖屏：

function orient() {
        //alert('gete');
        if (window.orientation == 0 || window.orientation == 180) {
            $("body").attr("class", "portrait");
            orientation = 'portrait';
            return false;
        }
        else if (window.orientation == 90 || window.orientation == -90) {
            $("body").attr("class", "landscape");
            orientation = 'landscape';
            return false;
        }
    }

    $(function(){
        orient();
    });

    $(window).bind( 'orientationchange', function(e){
        orient();
    });

Ckplayer.js视频播放插件之微信播放视频

2015-08-26

作为一名前端开发，在做页面时会碰到视频展示，一般都是用 flash 加载视频源文件，可惜功能太少，而且支持的视频格式有限。下面给大家分享一款不错的视频播放器——ckplayer（超酷网页视频播放器）。

ckplayer（超酷网页视频播放器）支持 http 协议下的 flv，f4v，mp4，支持 rtmp 视频流和 rtmp 视频回放，支持 m3u8 格式，是你做视频直播，视频点播的理想播放器。功能强，小巧，免费。

oninput,onpropertychange,onchange的基本知识以及应用

2015-08-26

onchange触发事件必须满足两个条件：

a）当前对象属性改变，并且是由键盘或鼠标事件激发的（脚本触发无效）

b）当前对象失去焦点(onblur)；

onpropertychange与oninput

移动端中如何检测设备方向的变化？

2015-08-26

除非你的应用程序限定了只在移动设备直立状态或水平状态下使用，一般情况下，你需要调整一些设定。即便你设计的布局流畅时尚，你可能需要改变某些编程代码。通常有以下一些小的策略用于检测移动设备方向的改变。

orientationchange事件

你等待一个移动API，一个简单的窗口orientationchange事件：

移动端JS 触摸事件基础

2015-08-26

一、手机上的触摸事件

基本事件：

touchstart //手指刚接触屏幕时触发

页面分享代码share

2015-08-24

在开发一个页面的时候常常会有这么一个小功能，就是分享该页面中的信息。

常见的分享代码有百度分享， JiaThis分享插件，bshare分享插件等，我主要分享一下自定义分享代码，如下：

function dofristshare(type) {
var title = encodeURIComponent("新年快乐,马年吉祥");
var link = encodeURIComponent('http://www.baidu.com');
var image = encodeURIComponent('http://www.baidu.com/img/bdlogo.gif');

if (type == "sina") {
window.open("http://v.t.sina.com.cn/share/share.php?url=" + link + "&amp;title=" + title + "&amp;content=utf8&amp;pic=" + image);
}

if (type == "tx") {
window.open("http://v.t.qq.com/share/share.php?url=" + link + "&amp;title=" + title + "&amp;pic=" + image);
}

if (type == "qzone") {
window.open("http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=" + link + "&amp;title=" + title + "&amp;pics=" + image);
}

if (type == "rr") {
window.open("http://widget.renren.com/dialog/share?resourceUrl=" + link + "&amp;title=" + title + "&amp;pic=" + image);
}

if (type == "douban") {
window.open("http://www.douban.com/recommend/?url=" + link + "&amp;title=" + title + "&amp;image=" + image);
}

return false;

}

网页中插入FLASH（swf文件），并且让Flash不遮挡HTML元素

2015-08-24

一：网页中插入flash代码如下：

当然里面的很多属性可以去掉，根据具体的需求而定。
我们在网页中经常遇到播放flash，要正常播放flash就要用到OBJECT和EMBED这两个标签。鉴于火狐及IE等不同浏览器厂商的不兼容性。播放flash也不相同。
OBJECT标签：用于windows平台的IE浏览器，利用Activex控件来播放flash。
EMBED标签：用于windows和Macintosh平台下的NetscapeNavigator浏览器，使用Netscape插件技术来播放flash。

CSS3技术:雪碧图自适应缩放

2015-08-20

ps: 以下实现都是基于移动端的处理

原图如下：人物是采用的是雪碧图，通过坐标绝对数据取值

使用rem布局手机页面（自适应各种分辨率手机）

2015-08-20

手机页面设计一般的大小是640，但是，手机屏幕大小确实不确定的，这样，怎么才能做出适应所有手机的手机页面呢？

一般的解决方案有两种，rem布局和百分比布局。这两种方案我有都试过，所以现在更推荐用rem布局来制作手机页面;

rem布局的兼容性：
Mozilla Firefox 3.6+、Apple Safari 5+、Google Chrome、IE9+和Opera11+、ie6-ie8 还是别用rem
不过现在的手机一般浏览器，一般可以直接不用去管IE内核的浏览器了。

Phaser中文说明文档

2015-08-20

Phaser 介绍

Phaser 是一款专门用于桌面及移动 HTML5 2D 游戏开发的开源免费框架，提供 JavaScript和 TypeScript 双重支持，内置游戏对象的物理属性，采用 Pixi.js 引擎以加快 Canvas 和WebGL 渲染，基于浏览器支持可自由切换。

H5游戏开发之phaser学习笔记（一）

2015-08-19

1、Phaser.Game(width, height, renderer, parent, state, transparent, antialias, physicsConfig)
width: 游戏的宽度,也就是用来渲染游戏的canvas的宽度，单位为px

height: 游戏的高度，也就是用来渲染游戏的canvas的高度，单位为px

跨域iframe高度计算

2015-08-19

一、同域获取iframe内容

jQuery全选与反选，且解决点击只执行一次的问题

2015-08-19

<html>
<head>
<script src="jquery-1.11.1.min.js" type="text/javascript"></script>
</head>
<body>
<input type="checkbox" name="chk_list[]" value="1" />1
<input type="checkbox" name="chk_list[]" value="2" />2
<input type="checkbox" name="chk_list[]" value="3" />3
<input type="checkbox" name="chk_list[]" value="4" />4
<input type="checkbox" name="chk_all" id="chk_all" />全选/取消全选

<script type="text/javascript">
$("#chk_all").click(function(){
// 使用attr只能执行一次
$("input[name='chk_list[]']").attr("checked", $(this).attr("checked"));

// 使用prop则完美实现全选和反选
$("input[name='chk_list[]']").prop("checked", $(this).prop("checked"));

// 获取所有选中的项并把选中项的文本组成一个字符串
var str = '';
$($("input[name='chk_list[]']:checked")).each(function(){
str += $(this).next().text() + ',';
});
alert(str);
});
</script>

</body>
</html>