🌓

如何检测页面是否有重复的id属性值

2015-12-18

根据W3C标准规定，在同一个文档内id属性值是唯一的，也就是说不能够有重复的id属性值，如果当页面比较庞大的话，如何去检测是否有重复的id属性值那将是一个复杂的工作，下面将提供一段代码实例可以解决此问题。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.npm8.com/" />
<title>grycheng前端博客</title>
<script type="text/javascript">
window.onload=function(){
var tags=document.getElementsByTagName("*"),
count=tags.length, time, ret = {}, id;
time=new Date();
for(var i = 0; i < count; i++)
{
id=tags[i].id;
if(id)
{
if(ret[id])
{
alert(id + "/n用时：" + (new Date() - time));
return;
}
else
{
ret[id]=true;
}
}
}
alert("未找到相同ID");
}
</script>
</head>
<body>
</body>
</html>

阅读全文

jquery实现的cookie操作插件

2015-12-18

cookie虽说具有一定的确定，但是在某些问题的处理上还是非常好用的，这里就不列举了，这里提供一个jquery实现的操作cookie的插件，功能比较全面，希望给大家带来一定的帮助，代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
jQuery.cookie=function(name, value, options){
  if(typeof value != 'undefined'){ 
    options=options||{};
    if(value === null){
      value='';
      options.expires=-1;
    }
    var expires='';
    if(options.expires&amp;&amp;(typeof options.expires=='number'||options.expires.toUTCString)){
      var date;
      if(typeof options.expires=='number'){
        date=new Date();
        date.setTime(date.getTime()+(options.expires * 24 * 60 * 60 * 1000));
      } 
      else{
         date = options.expires;
      }
      expires= '; expires=' + date.toUTCString(); 
    }
    var path = options.path ? '; path=' + (options.path) : '';
    var domain = options.domain ? '; domain=' + (options.domain) : '';
    var secure = options.secure ? '; secure' : '';
    document.cookie = [name, '=', encodeURIComponent(value), expires, path, domain, secure].join('');
  } 
  else{
    var cookieValue = null;
    if(document.cookie &amp;&amp; document.cookie != ''){
      var cookies = document.cookie.split(';');
      for (var i = 0; i < cookies.length; i++){
        var cookie = jQuery.trim(cookies[i]);
        if (cookie.substring(0, name.length + 1) == (name + '=')){
          cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
          break;
        }
      }
    }
    return cookieValue;
  }
}

阅读全文

eval()函数用法详解

2015-12-18

eval()函数用法详解:

此函数可能使用的频率并不是太高，但是在某些情况下具有很大的作用，下面就介绍一下eval()函数的用法。
语法结构:

1
eval(str)

阅读全文

javascript实现保留两位小数一位自动补零代码

2015-12-18

javascript实现保留两位小数一位自动补零代码实例:
本章节介绍一下如何实现对数字保留两位小数效果，如果数字的原本小数位数不到两位，那么缺少的就自动补零，这个也是为了统一的效果，先看代码实例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function returnFloat(value){
  var value=Math.round(parseFloat(value)*100)/100;
  var xsd=value.toString().split(".");
  if(xsd.length==1){
    value=value.toString()+".00";
    return value;
  }
  if(xsd.length>1){
    if(xsd[1].length<2){
      value=value.toString()+"0";
    }
    return value;
  }
}
var num=3.1;
console.log(returnFloat(num));

阅读全文

ajax分页插件

2015-12-15

paging

使用方法案例:

1
2
3
4
$('#pageTool').Paging({pagesize:10,count:100});
//或者
var p = new Paging();
p.init({target:'#pageTool',pagesize:10,count:100});

阅读全文

dialog对话框弹层插件

2015-12-15

用法:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<link rel="stylesheet" type="text/css" href="../dist/dialog.css">
<input type="button" id="btn_dialog" value="打开浮层"/>
<div id="dialog-content" style="display:none;">这是内容</div>
<script src="../src/jquery-1.9.1.min.js"></script>
<script src="../src/dialog.js"></script>
<script>
 var dialog = new Dialog();
 dialog.init({target:"#dialog-content",trigger:"#btn_dialog",mask:true,width:500,height:300,title:'标题'});
</script>```

## 或者用jquery方式调用:

```html
<link rel="stylesheet" type="text/css" href="../dist/dialog.css">
<input type="button" id="btn_dialogjquery" value="jq打开浮层"/>
<div id="dialog-contentjq" style="display:none;">这是内容22</div>
<script src="../src/dialog-jquery.js"></script>
<script>
$('#btn_dialogjquery').Dialog({target:"#dialog-contentjq",mask:true,width:500,height:300,title:'标题'})
</script>

阅读全文

移动端城市联选插件

2015-12-15

用法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE>
<html>
<head>
<title>选择地区</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link rel="stylesheet" type="text/css" href="../dist/mobile-select-area.css">
<link rel="stylesheet" type="text/css" href="../dist/dialog.min.css">
<script type="text/javascript" src="../dist/zepto.js"></script>
<script type="text/javascript" src="../dist/dialog.js"></script>
<script type="text/javascript" src="../dist/dialog-jquery.min.js"></script>
<script type="text/javascript" src="../dist/mobile-select-area.js"></script>
</head>
<body>
<input type="text" id="txt_area" value="浙江省 杭州市 滨江区"/>
<input type="hidden" id="hd_area" value="1,1,1"/>
<script>
var selectArea = new MobileSelectArea();
selectArea.init({trigger:$('#txt_area'),value:$('#hd_area').val(),data:'data.json'});
</script>
</body>
</html>

阅读全文

基于jQuery-autocomplete文本框自动联想补全

2015-12-01

基于jQuery文本框自动联想补全特效。这是一款简单使用的jQuery自动完成插件，可定义索引关键词，可设置输入框的宽高，支持搜索回调函数。效果图如下：

grycheng.com

阅读全文

line-height:150%和line-height:1.5的区别

2015-12-01

“%”：是继承父级元素的距离；
“无单位”：是子元素计算各自的行距离；

举个栗子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
font-size:14px;
line-height:150%;
background: black;
}
p{
font-size:26px;
background: gray;
color: white;
}
</style>
</head>
<body>
<p>你好！</p>
</body>
</html>

阅读全文

简单而清晰的判断PC端和移动端的函数

2015-12-01
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function browserRedirect() {
    var sUserAgent = navigator.userAgent.toLowerCase();
    var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
    var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
    var bIsMidp = sUserAgent.match(/midp/i) == "midp";
    var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
    var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
    var bIsAndroid = sUserAgent.match(/android/i) == "android";
    var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
    var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
    if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {
        alert('手机端访问');
    } else {
        alert('电脑端访问');
    }
}

browserRedirect();

阅读全文

自执行匿名函数剖析

2015-11-30

在很多js代码中我们常常会看见这样一种写法：

1
2
3
(function( window, undefined ) {
// code
})(window);

阅读全文

微信浏览器实现音乐自动播放

2015-11-27

HTML5音频播放在移动端有局限性，在移动版 Safari 中加载的页面上，不能自动播放音频文件。音频文件只能从用户触发的触摸（单击）事件加载。如果在 HTML 标记中使用了 autoplay 属性，那么移动版 Safari 将会忽略这个属性，并且不会在加载页面时播放此文件，避免移动端流量在不知不觉中浪费，很人性化的设计。但对HTML5应用开发者来说，这不是个好消息。

阅读全文

百度地图API自定义地图

2015-11-26

http://api.map.baidu.com/lbsapi/creatmap/index.html

http://developer.baidu.com/map/index.php?title=webapi

阅读全文

JS获取服务器当前时间制作倒计时

2015-11-25

很多小伙伴做倒计时，会使用2个方式：

1、使用本地时间来进行倒计时，这个是最大的误区，如果用户改变了本地时间，那你这个倒计时的功能就是白搭了；

2、要求服务器返回一个服务器时间给到前端，然后前端根据服务器的时间进行倒计时，这个方式是最常用的方式，也是最普遍的方式，但这样就必须要前后端配合起来来开发了；

阅读全文

关于实时监听输入框的值变化

2015-11-25

实时监听文本框值变化是非常常见的功能，通常最简单的办法就是用keyup,keydown来实现，但是这种方法有两个问题，一个是当直接复制粘贴的时候没法监听到事件，另外一个问题是在移动端，使用删除键删除输入时候也无法监听到！

解决办法：

1、使用onchange事件

onchange事件是文本框内容改变并失去焦点的时候才触发。

阅读全文

jQuery1.9+中删除了live以后的替代方法

2015-10-28

　　根据jQuery的官方描述，live方法在1.7中已经不建议使用，在1.9中删除了这个方法。并建议在以后的代码中使用on方法来替代。
　　on方法可以接受三个参数：事件名、触发选择器、事件函数。
　　需要特别注意的是：on方法中间的这个触发选择器就是你将要添加的HTML元素的类名、id或者元素名，使用它就可以实现live的效果。

阅读全文

js实现跨域的方法总结

2015-10-27

由于同源策略的限制，XMLHttpRequest只允许请求当前源（包含域名、协议、端口）的资源。

json与jsonp的区别：

JSON是一种数据交换格式，而JSONP是一种依靠开发人员创造出的一种非官方跨域数据交互协议。

script标签经常被用来加载不同域下的资源，可以绕过同源策略。（有src属性的都可以获取异域文件）。

阅读全文

模块、图片、背景图片、视频等响应式（宽高等比缩放）布局

2015-10-26

网页布局里很多地方需要宽高等比缩放功能，例如手机网页的全屏轮播。轮播的宽度随着手机不同分辨率而变化，高度自适应，这样才不会让轮播里面的图片压缩变形，顶多就是放太大而变模糊。

之前同事的办法，是用一个透明的图片占位符，此图片的大小是需要的比例。例如2：1就把占位符做成2px1px，例如5：3就把占位符做成5px3px。然后放入img标签里，设置宽度100%，这样高度就自动撑开，进而撑开外层父div。img平级放个子div，相对父div绝对定位，宽高100%，这样子div的大小就和img一样大，实现等比缩放了。见→DEMO1←方法1（建议缩小窗口查看效果）。

阅读全文

移动端下拉刷新、加载更多插件dropload.js(基于jQuery/Zepto)

2015-10-26

废话不多说，先让大家看一下案例效果：

DEMO1，加载底部

阅读全文

js判断页面是否加载完成

2015-10-26

javascript代码如下：

1
2
3
4
5
6
7
document.onreadystatechange = subSomething;    　　　 //当页面加载状态改变的时候执行这个方法

function subSomething()
{
    if(document.readyState == “complete”)            //判断页面加载状态
        myform.submit();
}

阅读全文