分类 "js/Jquery" 的存档.

js闭包实现–第一秒输出1,第二秒输出2,第三秒输出3……

var i =1;
for(i; i<10; i++){
	(function(num){
	 setTimeout(function(){
		 console.log(num);
		 }, num*1000);
	 })(i);
}

重点在闭包的作用域。

nodejs HTTPS发起POST请求

准备用nodejs搞一个快速注册163邮箱的东西,需要在某一步的时候post数据到https,node的官方文档实在太简陋了,网上找了个差不多的例子,拿来改了改用。

var util = require('util'),
	https = require('https');

var regUrl = "https://ssl.mail.163.com/regall/unireg/call.do;jsessionid=%s?cmd=register.start&adapter=%s&reforward=common/reform&targetCmd=register.ctrlTop";
var cookie = 'a=b;c=d;',
mail = 'regUsername', pass = 'password', vcode='abcde';
var _regUrl = util.format(regUrl, 'id123455', 'param2');
 var post_option = url.parse(_regUrl);
 post_option.method = 'POST';
 post_option.port = 443;
 var post_data = querystring.stringify({
     'name' : mail,
     'uid' : mail+'@163.com',
     'confirmPassword' : pass,
     'password' : pass,
     'vcode' : vcode,
     'flow' : 'main',
     'from' : '163mail_right',
     'mobile' : '',
     });
 post_option.headers = {
     'Content-Type' : 'application/x-www-form-urlencoded',
     'Content-Length' : post_data.length,
     Cookie : cookie                                               };
 var post_req = https.request(post_option, function(res){

     res.on('data', function(buffer){
         console.log(buffer.toString());
         });
 post_req.write(post_data);
 post_req.end();

Javascript 异步加载详解【转载】

本文总结一下浏览器在 javascript 的加载方式。
关键词:异步加载(async loading),延迟加载(lazy loading),延迟执行(lazy execution),async 属性, defer 属性
一、同步加载与异步加载的形式
1. 同步加载
我们平时最常使用的就是这种同步加载形式:
<script src="http://yourdomain.com/script.js"></script>
同步模式,又称阻塞模式,会阻止浏览器的后续处理,停止了后续的解析,因此停止了后续的文件加载(如图像)、渲染、代码执行。
 js 之所以要同步执行,是因为 js 中可能有输出 document 内容、修改dom、重定向等行为,所以默认同步执行才是安全的。
以前的一般建议是把<script>放在页面末尾</body>之前,这样尽可能减少这种阻塞行为,而先让页面展示出来。
简单说:加载的网络 timeline 是瀑布模型,而异步加载的 timeline 是并发模型。

2. 常见异步加载(Script DOM Element)

(function() {
     var s = document.createElement('script');
     s.type = 'text/javascript';
     s.async = true;
     s.src = 'http://yourdomain.com/script.js';
     var x = document.getElementsByTagName('script')[0];
     x.parentNode.insertBefore(s, x);
 })();

异步加载又叫非阻塞,浏览器在下载执行 js 同时,还会继续进行后续页面的处理。

Read more…

【原创】php curl 模拟实现单点登陆(PHP实现JS加密函数)

【原创】转载请注明,来自:DigDeeply的博客: https://fukun.org/

这几天晚上闲着没事干,偶然间发现新浪爱问的积分还可以换实物礼品,积分来源一部分就是提问回答之类的,还有一部分是要每天签到。我是懒人,也懒得每天提问回答啥的,为了那么个小礼品,也不值得。但是签到还是很简单的嘛,每天点一下就OK了。我比一般懒人还懒,每天点一下都懒得点,所以觉定做个模拟登陆,模拟签到的程序,放到SAE上去,每天帮我签个到,拿个积分就好了,哈哈。:)

其实这个模拟登陆,也就是抓站的基础部分吧, 模拟登陆,获取登陆后的状态,然后模拟人的访问流程,获取访问结果,分析保存之……

首先介绍一下抓站的利器吧,httpwatch,也可以用firefox下的firebug或者chrome下自带的开发者工具,其实我原来一直都是用firefox或者chrome的,但是听说httpwatch很好,就拿来试用一下,结果用的还真是很舒服,不错。其次就是Snoopy.class.php,我用PHP,这个PHP类真是好用到极致了,用来抓站so easy。但是这个类用来抓一般的基于http的站是没问题的,如果要是https的就麻烦了,这个类在抓https的站时,采用的不是php本身的curl了,使用的是Linux/Unix下的原生CURL,所以这个类在windows下用着很麻烦,需要自己装一个windows下能用的curl,并且配置好环境。在sae下直接就是不行的了,如果是用Linux/Unix的话,就很方便了~~指定好curl的路径就可以了。我也有一个https的模拟登录签到的脚本,使用的是php的curl,没有使用Snoopy。

由于新浪采用了单点登陆,所以一般的登陆方法是不行的了,不是直接构造用户名密码POST到一个login action页面完事。先使用httpwatch抓取一下登陆的流程吧。

httpwatch抓取的登录新浪爱问的流程

httpwatch抓取的登录新浪爱问的流程

Read more…

百度地图各省份轮廓上色-包括台湾

百度地图各省份轮廓-上不同颜色-包括台湾

百度地图各省份轮廓-上不同颜色-包括台湾


Read more…

JavaScript面向对象15分钟教程 – OO JS in 15mins or Less

本指南可以很快让你学会写优美的面向对象JavaScript代码,我保证!学会写简洁的JavaScript代码对一个开发者的发展很重要,随着像Node.js这类技术的出现,你现在可以在服务器端写JavaScript代码了,你甚至可以用JavaScript来查询像MongoDB这样的持久性数据存储。

现在开始写面向对象的JS(OO JS),如果你有什么问题或我遗漏了什么,在下面评论出告诉我。

Literal Notation
Literal Notation只是在JavaScript中创建对象的一种方法,是的,方法不止这一种。当你打算创建一个对象实例的时候Literal Notation是首选的方法。
var bill = {}; 

上面的代码没太大用处,仅仅只是创建了一个空对象。让我们动态的添加一些属性和方法到这个对象。

bill.name = "Bill E Goat";
bill.sound = function() {
	console.log( 'bahhh!' );
};

这里我们添加了“name”属性并赋值为“Bill E Goat”。我们不一定要在前面创建空对象,还可以只用一步完成上面 所有的事。

var bill = {
  name: "Bill E Goat",
  sound: function() {
    console.log( 'bahhh!' );
  }
};

很简洁漂亮是不是?访问属性和方法也一样很简单。

bill.name; // "Bill E Goat"
bill.sound(); // "bahhh"

Read more…

javascript js 十进制转十六进制 进制变换

今天再做一个中国地图的可视化展现,需要对每个省份的轮廓进行染不同颜色,以此来区分各个省份。
用的是百度地图,所以需要用JS来生成Polygon多边形,然后用颜色填充,现在需要随机生成颜色,所以需要随机生成3个0-16的16进制数,拼接起来,作为一个颜色的RGB值。
不多说,直接上简单明了的JS代码,如何随机生成0-16的数,然后把十进制的值转换为十六进制。

var r = parseInt(Math.random()*16);
var g = parseInt(Math.random()*16);
var b = parseInt(Math.random()*16);
//转换为十六进制,使用 int.toString(16)即可.
//相应的,还可以使用toString(10) , toString(8), toString(2)来转化为十进制,八进制,二进制等。
r = r.toString(16);
g = g.toString(16);
b = b.toString(16);
//拼接成颜色的RGB值
var color = '#'+r+g+b;

Read more…

IE7/IE8下javascript的时间函数Date()不兼容讲解–来自amcharts应用中的问题

最近在使用ammap和amcharts做一些数据可视化展现的工作,amcharts图表功能真的很强大,可自定义的属性很多。这是其官网文档链接。可以简单看看文档,会发现有很多属性,可以对图表中的每块表示数据的区域绑定事件,可以是一个url,也可以是一个js,怎么样,只有这两项,就绝对能满足很多扩展的需要了吧。

这是一个我做的例子,使用了ammap和amcharts,左边中国地图,不同省份的数据不一样,颜色代表不同等级的数据;右边是amcharts做的柱状图和折线图。

ammap和amcharts的案例--好用可扩展的javascript图表插件

ammap和amcharts的案例--好用可扩展的javascript图表插件

问题就在使用图表的过程中了,主要是右下角的那个折线图,在chrome、firefox、opera和IE9下均看过了,没有问题,可是到别人机器上,用的IE8,发现右下角的折线图出问题了。于是开始了JS的调试之旅,使用IE9的开发人员工具,可以很方便的调到IE7和IE8模式,之前一直都是firefox的firebug,现在一直都在用chrome,今天用了用IE9的调试工具,发现也挺好用的,主要是它有一个选项,可以设置为-始终从服务器中刷新,这样,每次IE运行获得的JS和CSS文件等,都不会是缓存中来的,调试起来很方便,不用总去清缓存。见下图:

Read more…

jquery 滑动 回到顶部代码

jQuery实现滑动回到顶部效果:

$('html, body').animate({scrollTop: 0},500);

Read more…

jQuery数组处理完全详解($.each,$.grep,$.map,$.merge,$.inArray,$.unique,$.makeArray)

jQuery的数组处理、便捷、功能齐全。最近的项目中用到的比较多,深感实用,一步到位的封装了很多原生JavaScript数组不能企及的功能。最近时间紧迫,今天抽了些时间回过头来看jQuery中文文档中对数组的介绍,顺便对jQuery数组做个总结,温故而知新。
强烈建议你打开DEMO演示后再看下面的详解:http://mrthink.net/demo/ijq20101125.htm

1. $.each(array, [callback]) 遍历[常用]

解释: 不同于例遍jQuery对象的$().each()方法,此方法可用于例遍任何对象。回调函数拥有两个参数:第一个为对象的成员或数组的索引, 第二个为对应变量或内容. 如果需要退出each循环可使回调函数返回false, 其它返回值将被忽略。

each遍历,相信都不陌生,在平常的事件处理中,是for循环的变体,但比for循环强大。在数组中,它可以轻松的攻取数组索引及对应的值。例:

var _mozi=['墨家','墨子','墨翟','兼爱非攻','尚同尚贤']; //本文所用到的数组, 下同
$.each(_mozi,function(key,val){
    //回调函数有两个参数,第一个是元素索引,第二个为当前值
    alert('_mozi数组中 ,索引 : '+key+' 对应的值为: '+val);
});

相对于原生的for..in,each更强壮一点。for..in也可以遍历数组,并返回对应索引,但值是需要通过arrName[key]来获取。

2. $.grep(array, callback, [invert])过滤数组[常用]

解释: 使用过滤函数过滤数组元素.此函数至少传递两个参数(第三个参数为true或false,对过滤函数返回值取反,个人觉得用处不大): 待过滤数组和过滤函数. 过滤函数必须返回true以保留元素或 false 以删除元素. 另外,过滤函数还可以是可设置为一个字条串。

$.grep(_mozi,function(val,key){
    //过滤函数有两个参数,第一个为当前元素,第二个为元素索引
    if(val=='墨子'){
        alert('数组值为 墨子 的下标是: '+key);
    }
});

var _moziGt1=$.grep(_mozi,function(val,key){
    return key>1;
});
alert('_mozi数组中索引值大于1的元素为: '+_moziGt1);

var _moziLt1=$.grep(_mozi,function(val,key){
    return key>1;
},true);
//此处传入了第三个可靠参数,对过滤函数中的返回值取反
alert('_mozi数组中索引值小于等于1的元素为: '+_moziLt1);

Read more…