先把代码地址放上来：http://pastebin.com/egT0gADN
然后看下大概的效果，今天下午来公司，最后一次在这个电脑前面弄点东西，想去看电影，扫到了mtime里，看见了他们的图片全部都带了个小阴影，我想了想，先用css方法实现了，之后又写了段不伦不类的js代码又实现一遍。
主要是最近看了一些乱七八糟的东西，就想试验下效果。主要代码看上面的地址吧。
图片阴影的效果如下：
CSS的思路其实就是给图片和a标签做一个left和top的负值即可。
然后我用js重新写了下实现，里面包括一个简单的递归循环函数，一个查找元素函数，一个getclass函数，并且都自带回调方法，算模仿jquery吧，可以看下实现和使用。其他的就木有了，这个方法写的也比较奇怪，其实就是个字面量对象。
很久不更新什么内容了。其实还是因为不太知道该写点什么。
昨天晚上给一个同学讲了好久的javascript的基础知识，其实我基础也不好，没什么资本给别人说教什么。其中就讲到了DOM和BOM这2个东西。
到底它们是什么，我想每个人都会有自己心里自己的答案，我也不说这么基础的问题了。
但是不知道你们有没有想过这样一个问题，DOM对象和BOM对象在不同浏览器下的差异问题到底是为什么呢。如果没有文档总结你要怎么办呢，还有非常全的关于这2个对象的手册在哪里呢？
其实，答案都在浏览器自己内部留着。
代码很简单，可以在jstyrtime里跑一下:
for(var i in window){alert(i+’:'+window[i])};
for(var i in document){alert(i+’:'+document[i])};
查看当前浏览器的window或者document对象或者其他一些浏览器内置对象或者js原生对象等。
运行在不同浏览器下的不同结果，我跑了一下，总结了下面几个表格内容，针对DOM和BOM这2个对象，地址如下：
http://www.designsor.com/demo/dom/bom.html
可以方便大家查阅所有的对象方法名并区分了各种浏览器，仔细看一看，我只想对所有的浏览器说一句：艹你大爷的……。
首先地址如下：
http://www.designsor.com/jstime/
扔个示意图：
当然了，如果你不开firebug，禁用的话，结果会直接打到页面中，而且支持IE，chrome，意思是，有控制台的就用控制台，没控制台的就直接在页面中报出log信息。
显示控制分为3项，log信息，运行速度信息（MS单位），我自定义的警告信息，还有你输入代码的错误catch信息。
看看下面这张图：
这个工具不光可以跑原生js的代码，而且支持你加载不同的框架库，来运行你依赖的代码片段，目前支持4个核心js文件的选择，jquery，mootools，dojo，yui2 core。加载js 的方法是用的jquery里$.getscript()方法的源码。
再看下面的图，如果你的浏览器没有支持console对象，那么输出信息会变成如下：
页面底部直接log出了信息，输出的是我选择jquery中的$。
最后还有一些其他的小用处，比如中文转unicode编码……你可以直接在文本框中输入汉字。如下图：
那么输出的脚本错误信息的结果，我们可以看出小爝的unicode码就是……\u5cof \u721d啦……
其他功能有待大家自由发挥，其他功能有待以后慢慢扩展，这个工具还可以自动转换alert为console.log,量身为我自己设计打造…………-_-||
以后可能会推出新页面运行代码？临时保存代码片段地址？或者代码高亮？或者其他更NB的控制台功能？或者测速更加准确有对比性？还是未知= =||
最后的最后，如果你的浏览器有控制台，那么好，要不你在开始就把他开开，要不你就一直关着他。否则一会console对象存在，一会不存在的，丫不报错才怪呢。。
咳咳，当然大家都知道推特是被墙的。
那么，翻墙好了，咳咳。
还记得以前饭否么，恩，饭否可以有一个小的flash插件挂在自己的BLOG上，有段js调用，就可以实时更新自己的状态。那时候还觉得，我擦，真神奇，现在想想，其实也就是个内部的api。
今天逛别人blog，看到了一个小应用，就是类似以前饭否的那个东西，只不过数据是twitter的。我一看，哎呀，自己也做个吧。方便一些观众更加了解我，也方便自己更进一步的装X。
看下首页右下角，如图：
额，首先把实现思路和大家说下，由于最近做小偷程序做的太多了……（低头），我第一个实现方法就还是那些老套路。。
恩，那么继续，api是我自己的，由于我的WordPress服务器在美国，所以基本不存在翻墙的问题，访问下面的地址你就懂了。
http://www.designsor.com/demo/tw/curl.php?url=http://twitter.com/xiao_jue/
恩，简单的一个curl翻墙，php代码如下：
<?php
$url=$_GET['url'];
$ch = curl_init($url);
curl_exec($ch);
//echo $ch; 可以删掉了，具体为什么见4楼……
curl_close($ch);
?>
主要就是借助我国外的主机，抓取了一下被墙的页面……
之后嘛，嘿嘿，要制作这个twitter小玩意就好办多了。
js部分代码：
/*@author xiaojue*/
/*twitter prowed by jqueryAjax*/
$.ajax({
url:’http://www.designsor.com/demo/tw/curl.php?url=http://twitter.com/xiao_jue/’,
type:’get’,
success:function(html){
var reg=/.*?<\/span>/ig; //2条抓数据的正则
var reg2=///把时间加入到说过的话的下面，并且添加hover效果事件。
$(’#tw span’).each(function(i){
$(this).after(time[i]);
$(’a',this).click(function(){return false;})
}).hover(function(){
$(this).css({’color’:'#336699′})
},function(){
$(this).css({’color’:'#666′})
});//设置抓取来的时间部分的样式
$(’#tw span:odd’).each(function(i){
$(this).css({’border-bottom’:'#ccc dashed 1px’,'padding’:'5px 0px’,'font-size’:'9px’,'color’:'#666′});
});
},
error:function(){
$(’#tw’).text(’加载twitter数据失败’);
}
});
js部分应该很容易懂，其实就是分析了下twitter的页面html结构，然后写了2条正则，处理了下自己的blog页面的html，添加了几条样式。就齐活了。
主要提供一个抓取外加翻墙的思路，如果你也想做一个类似的东东而没有看懂上面的某个部分，欢迎留言交流或者gtalk我！
先上图吧~
扩展地址：
https://chrome.google.com/extensions/detail/bpnpaekhdjhmgodlllkkkohgbgadgjdl
如果你总是迷路，或者总是外出，我觉得你挺应该装一个的。。。 （其实主要还是我自己使用方便，上面的功能基本都是给自己定制的……）
支持：
1，你的IP地址定位。（腾讯api）
2，当日，次日天气预报（google weather api）
3，你的城市所在地定位（maxmind api）
4，你当前地理位置的定位—目前来说有点不太准……(google map api)
5，查询你想到的任何地方的地图查询（google map api）
6，查询你国内目前的火车票票价与车次。（trainInfo api）
7，查询手机归属地等手机卡信息。（shouji.com的api）
————————————————–可能以后扩展的功能—————————-
可能以后会做支持查询飞机票的……虽然组里有人说比较难实现了，没有API，只有爬虫抓了。
以后非常可能而且可能明天就会做的其他地区城市的天气预报查询。
暂时想到这么多，其实还想再连接一个淘宝的JavaScript api做本地网店实体店一览之类的功能。。。
具体想到这么多。BUG还比较多，源代码也比较乱，编程风格也比较肥猪流，以后慢慢修改……
很久很久，没有发和前端无关的东西了，好吧，其实这玩意也是photoshop画的。那么也算沾边？累死我了，10张描边~唔。。。。不是我画的，但是感觉还好，多可爱啊，想起小时候。丑丑的，但是很真实。
看成果吧~帮朋友做的，印T恤去啦。
哈哈哈哈，看来我还是鼠绘不老啊~
主要js的代码在下面：
预览地址在这里：
http://www.designsor.com/demo/Magnifier/Magnifier.html
写成了个类，很简陋，只是个思路问题。具体到做放大镜，JS的组件现成的应该有很多，考察到的知识点其实也比较全面了。2种实现思路，一种HTML CSS JS完全分开，就只是实现放大效果，一种是把HTML CSS集合到JS之中做成JS组件。当然都各有利弊。我做的是后者，用JS生成了部分HTML结构和CSS代码。
实现思路：首先需要一张大图了，做放大的效果图了。然后就是按照比例生成缩小后的图，让用户觉得缩小了的图是实际尺寸，而实际尺寸是放大尺寸。OK。然后2个层，一个缩层，一个放大层。根据比例生成后，监听mousemove鼠标相对的offsetX和offsetY,然后改变放大层中的图片的left值和top值，感觉是放大了还根据鼠标移动了。具体看上面的预览地址就明白了。实现起来不难，浏览器兼容问题有些就是IE和非IE的鼠标坐标问题，但是还是可以解决的…
嗯，扩展思考，如果要做成放大镜根据鼠标移动 的怎么办？
哈，很简单了，让那个放大层根据鼠标移动就好了，当然这里就还需要监听鼠标所在层的状态了，其实也就是mouseover和mouseout了。思路都是一样的……^_^
肯定还有很多别的好办法实现……大家多交流啊。
PS：最后我犯了个逻辑错误，在添加DOM的时候如果先设置了SRC什么的，后绑定事件，非常有可能因为图片已经加载了，而导致最后事件没有绑定或者触发，比如onload事件……特别记录一下！！经验啊……
代码不多，贴出来地址：
2个根据Array原型扩展的方法： unique剔除重复数组，返回不重复的数组。repeat找到重复数组元素，返回数组中重复的元素。
具体的思路剔除重复数组是利用js对象的属性不可重复来进行剔除的。获取重复数组是用不重复的数组和源数组进行比对，删除雷同的返回重复的，最后再次进行重复剔除即可。
具体的代码参见上面的代码链接。
啊，我不是专业程序员，我英文烂到不行。嗯……基础差劲，经验一般~嗯，群里给我结论……
个人我也很同意[使劲点头],但是我绝对自信的是自己的歪门邪道……也就是野路子。嗯，遇到问题会用自己知识范围内的所知全力解决……唔。也就是所谓的实战派，实用派，最意外忍者和野路子了。
好了，扯淡结束，下个话题。关于javascript对象字面量，到底是什么东西？看下下面的例子代码：
var a={
‘m’:'b’,
‘a’:'c’,
‘c’:'1′
};
这里的a,被定义了成了一个对象，他有3个属性m,a,c值则就是b,c,1了。这就是javascript中的对象，键对值的。然后我们如果要访问他们，如果知道属性名则这样访问a['m']//返回b;而我们当然开始不知道对象里有什么。就需要使用for in循环了比如for(var k in a){a[k];//以此返回b,c,1;}k则是遍历的键名了。
唔……昨天有个傻呸在群里说：他想不用循环又想得到一个对象字面量的第一个键名和值……
好吧，我们想了好久，最终我这个野路子想出方法啦……嗯，其实我也是现找的一个javascript对象属性外加一个野想法……
嗯，a这个对象我们不知道内部有什么，我们又不可以用循环，最开始的思路大家都差不多，嗯，匹配？或者……啊，对，总之要把他这个对象转换成可以操作的一个什么东西，toString();？不行，caller？也不行……额，我找了挺久发现了这么一个属性……toSource() ;方法……嗯，返回对象内部的源码，哇嘞NB，因为我的手册里没有这个属性- -||所以之前一直不知道有这么个方法。
既然这样实现起来就容易了：
var a={
‘m’:'b’,
‘a’:'c’,
‘c’:'1′
};
function objfirstparam(obj){
var str=obj.toSource();
var re = /(?!\{)[\w](?=:)/;
return str.match(re).toString();
}
alert(objfirstparam(a));
alert(a[objfirstparam(a)]);
嗯，先读出对象里的源码，我判断了，就是str类型，那么OK了，根据读出来的str写个正则匹配下，不用循环匹配字符串特定的第一个键名还是比较容易的。嗯，要求符合，问题解决……我是野路子……
这只是个思路，基本和实际应用关系不大，可谁知道呢，也许以后没准还能真可以用上，特此记录一下（PS：最近迷上了正则表达式，哇嘞真的是jser的一把瑞士军刀，NB，建议大家多多练习使用，增强火力吧。）
Top
