94smart's Blog » Javascript http://blog.94smart.com 移动或移不动的互联网 Sat, 31 Dec 2011 07:47:54 +0000 en hourly 1 http://wordpress.org/?v=3.3 小试Prototype：为静态文章列表加上标志 http://blog.94smart.com/cache/2006/0726_826.html http://blog.94smart.com/cache/2006/0726_826.html#comments Wed, 26 Jul 2006 06:49:59 +0000 94smart http://blog.94smart.com/2006/07/26/826.html 您可能也喜欢：
用XHTML+CSS实现文章列表标题时间对齐
2005年最系列 – 最后一篇Blog
Prototype1.4.0说明文档showLocalLinks例子有问题
比较郁闷的MM_preloadImages问题
Yahoo新首页不见了 无觅 ]]> 昨天，用Prototype.js解决了一个以前一直解决不了的问题，即静态文章列表加上New标志。

工作上一直使用静态的CMS（内容发布系统），好处是发布的内容全部都有静态页面、唯一地址，访问速度也比较稳定，缺点是放弃了动态的效果，比如文章动态链接、列表更新等等，以及今天要说的根据文章发布时间给标题加New标志。

原理是用Javascript分析列表代码里面带有时间的条目，时间是不是在时间限制之后，如果是，就在这个条目的时间代码段前面加上New的标志代码。

首先对文章列表进行改造，发布系统生成<ul>，每篇文章都是一个<li>，每个<li>里面用<a>包含标题，用<samp>来包含发布时间（还可以选择<span>或其他标签，我特意选了不常用的<samp>），最外层用<div>包含（看具体使用来定，也可以使用<table>等），并增加ID属性。以下是列表的代码：

<div id="News">
<ul>
<li><a href="link" target="_blank">Title</a><samp>2006-07-26 10:20</samp></li>
<li><a href="link" target="_blank">Title</a><samp>2006-07-25 10:20</samp></li>
<li><a href="link" target="_blank">Title</a><samp>2006-07-25 10:20</samp></li>
<li><a href="link" target="_blank">Title</a><samp>2006-07-24 10:20</samp></li>
<li><a href="link" target="_blank">Title</a><samp>2006-07-23 10:20</samp></li>
</ul>
</div>

Javascript脚本部分，我设定的时间限制是前天0点，也就是说前天发的内容都会加上New的标志。shownew.js代码如下：

//shownew.js
//email: 94smart(AT)gmail.com
//url: http://blog.94smart.com

var TheDay = new Date(); //初始化时间
TheDay.setDate(TheDay.getDate()-2); //将时间设定为前天，看实际需要而定
TheDay.setHours(0,0,0); //将时间设定为前天0点
var newImage = '<img src="images/icon_new.gif" border="0" alt="New" />'; //New字样图片的代码

function showNew(listId){ //参数listId是要处理列表的ID
var thisList = $(listId).getElementsByTagName('li');
var listArray = $A(thisList);
listArray.each(function(listItem){
theSamp = listItem.getElementsByTagName('samp'); //取li里面的samp标签的内容
theSamp = theSamp[0];
theTime = theSamp.innerHTML; //得到文章的发布时间
theTime = new Date(theTime.replace(/\-/g, "/")); //替换时间格式为yyyy/mm/dd h:m:s，如果正好是Javascript的时间格式就不需要这行
if (theTime>=TheDay) {
new Insertion.Before(theSamp, newImage); //如果发布时间比设定的时限晚就在samp标签前面插入New图片代码
}
});
}

使用的时候在<head>区插入代码：<script src="prototype.js" type="text/javascript"></script>和
<script src="shownew.js" type="text/javascript"></script>，在列表的HTML代码下方加入：<script type="text/javascript">showNew('News');</script>，ok，刷新你的页面，看到New了吗？没有的话看这里。

上面的代码还可以再挖掘一下，这里就不继续了，希望我的代码对其他人有所帮助。

需要说明的是，用的Prototype是Prototype v1.4.0，别的版本没试，应该也可以。Prototype库真的很强大，尤其是对于我这样的懒人，懒得自己写底层的业余JS人员。

Technorati : , ,

您可能也喜欢：

用XHTML+CSS实现文章列表标题时间对齐
2005年最系列 – 最后一篇Blog
Prototype1.4.0说明文档showLocalLinks例子有问题
比较郁闷的MM_preloadImages问题
Yahoo新首页不见了
无觅
]]> http://blog.94smart.com/cache/2006/0726_826.html/feed 0 比较郁闷的MM_preloadImages问题 http://blog.94smart.com/cache/2006/0523_738.html http://blog.94smart.com/cache/2006/0523_738.html#comments Tue, 23 May 2006 03:56:08 +0000 94smart http://blog.94smart.com/2006/05/23/738.html 您可能也喜欢：
Firefox的Google Calendar扩展两个
今日流水账 – Google Talk
搜狗的Gmail不好用，2G那么大居然不能放MP3~
toread，用Email做文摘
有些事还就Google干得出来 无觅 ]]> 最近工作的过程中发现用Javascript做图片预读取总是出问题：

  1. 做个展开菜单，展开项目的底图总是不能直接显示出来。
  2. 做个缩略图切换，左右切换的时候，新换出来的图片总是不显示，非得使用鼠标右键选显示图片才行
  3. ……

代码逻辑应该没问题，所以最后归结到使用的MM_preloadImages()上，不知道为什么好像没起作用，没能在页面显示之前预读取所需图片。

简述一下我的用法，需要预读的图片有10张，我使用的是Dreamweaver 8.0提供的v3.0版本的代码，代码如下：

function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

自动生成的预读调用是在body的onload上，我将它改为.js文件，在head里调用，又编写了一个预读函数用window.onload调用，代码如下：

function doPreload(){
for (var index=0; index<10; index++){
url1 = path_prefix+'TN_'+index+path_ext;
MM_preloadImages(url1);}
}

window.onload = doPreload;

运行时并没有得到预期效果，Firefox正常，IE出错，于是我改回body调用，还是失败。我以为是函数和循环的问题，就改成MM_preloadImages(‘img1.gif’, ‘img2.gif’, …)的调用，结果还是不行。

参考了一下Google Group里的文章，说有可能是缓存图片容量太大，可是回头想想一共10张图片，每张3、4K，全读出来也就30、40K，现在的带宽肯定不成问题。

所以我现在很郁闷，不知道其他人是不是也遇到这种问题，欢迎大家来与我交流，同时希望Javascript高手可以不吝赐教，指点我一下。

UPDATE：多谢Reg提醒，让我找到了问题的方向，看样子不是MM_preloadImages预读的问题，而是调用时候的问题，上面的懒得改了，就在下面继续更新。

UPDATE2：看到一篇讲CSS在IE里面的重复渲染问题，说DIV的显隐会影响CSS重新渲染，我不知道做的那个菜单是不是这种情况。

Technorati : ,

您可能也喜欢：

Firefox的Google Calendar扩展两个
今日流水账 – Google Talk
搜狗的Gmail不好用，2G那么大居然不能放MP3~
toread，用Email做文摘
有些事还就Google干得出来
无觅
]]> http://blog.94smart.com/cache/2006/0523_738.html/feed 3 Prototype1.4.0说明文档showLocalLinks例子有问题 http://blog.94smart.com/cache/2006/0417_693.html http://blog.94smart.com/cache/2006/0417_693.html#comments Sun, 16 Apr 2006 16:57:13 +0000 94smart http://blog.94smart.com/2006/04/17/693.html 您可能也喜欢： 小试Prototype：为静态文章列表加上标志 Javascript解决多选框Select排序问题 比较郁闷的MM_preloadImages问题 WordPress 2.1升级完成 求：纯Javascript跨域远程调用网页内容 无觅 ]]> 链接在这里：http://www.sergiopereira.com/articles/prototype.js.html#EnumeratingArrays

这个showLocalLinks例子有问题，在哪个浏览器里都显示不出结果。

<script>
function showLocalLinks(paragraph){
paragraph = $(paragraph);
var links = $A(paragraph.getElementsByTagName('a'));
//find links that do not start with 'http'
var localLinks = links.findAll( function(link){
var start = link.href.substring(0,4);
return start !='http';
});
//now the link texts
var texts = localLinks.pluck('innerHTML');
//get them in a single string
var result = texts.inspect();
alert(result);
}

</script>
<p id=”someText”>
This <a href=”http://othersite.com/page.html”>text</a&gt; has
a <a href=”#localAnchor”>lot</a> of
<a href=”#otherAnchor”>links</a>. Some are
<a href=”http://wherever.com/page.html”>external</a>
and some are <a href=”#someAnchor”>local</a>
</p>
<input type=button value=”Find Local Links” onclick=”showLocalLinks’someText’)”>

这个例子的意思应该是取出段落里面的本地链接，原理是链接开头不是http的就算，但是段落里面使用的#链接形式，无论在IE还是firefox里，都会被解释为带有http的形式，所以这个例子的结果永远都是空。

解决方法是把其中#开头的链接改为”javascript:;”，就可以看到效果了。

后话，也有可能是因为我用Apache调试的原因，#xxx全被解释为”http://localhost/#xxx”了。

Technorati : ,

您可能也喜欢：
小试Prototype：为静态文章列表加上标志
Javascript解决多选框Select排序问题
比较郁闷的MM_preloadImages问题
WordPress 2.1升级完成
求：纯Javascript跨域远程调用网页内容
无觅
]]> http://blog.94smart.com/cache/2006/0417_693.html/feed 1 本地的Wiki记事本：TiddlyWiki http://blog.94smart.com/cache/2006/0317_656.html http://blog.94smart.com/cache/2006/0317_656.html#comments Fri, 17 Mar 2006 06:32:09 +0000 94smart http://blog.94smart.com/2006/03/17/656.html 您可能也喜欢：
有些事还就Google干得出来
Yahoo新首页不见了
2006年度汉字：曝
快讯：Yahoo的新首页再现
最近收到Gmail的Spam贼多 无觅 ]]> TiddlyWiki是一个好玩的Wiki记事本，支持Tag，支持丰富的Wiki语法，还支持搜索，用来做记事本不错。

它很简单，界面简单、操作简单，文件简单到所有内容只有一个html文件，所以最适合随身携带，想起了以前U盘携带的Wordpress，再带上TiddlyWiki就齐了，hoho~

TiddlyWiki是一个纯Javascript操作的Wiki，所有动作都是AJAX的，感觉好酷，要研究AJAX的又多了一个对象。

我只放在自己的电脑上玩了玩，还没研究怎么放在服务器上玩。

需要的朋友可以去TiddlyWiki下载。

Technorati : , , ,

您可能也喜欢：

有些事还就Google干得出来
Yahoo新首页不见了
2006年度汉字：曝
快讯：Yahoo的新首页再现
最近收到Gmail的Spam贼多
无觅
]]> http://blog.94smart.com/cache/2006/0317_656.html/feed 2 Google自定义新闻出了，有些东西需要扔掉吗？ http://blog.94smart.com/cache/2005/0311_105.html http://blog.94smart.com/cache/2005/0311_105.html#comments Fri, 11 Mar 2005 14:55:04 +0000 94smart 您可能也喜欢：
Google最近的Logo连环画
对桌面搜索、硬盘搜索的想法
今日流水账 – Google Talk
比较郁闷的MM_preloadImages问题
搜狗的Gmail不好用，2G那么大居然不能放MP3~ 无觅 ]]> 以前我的习惯，基本是打开lilina.94smart.com和news.94smart.com，接着上Gmail收Google News Alerts，再看看其他人的Blog，基本上一天的信息源已经很多了。

今天凌晨，Google推出了它的第一个个性化服务–自定义新闻，可能因为流量太大，起初都打不开，下午的时候这个页面终于打开了，自定义关键字的新闻还算符合我的标准。

我想今后的习惯是，打开预设的Google新闻首页，因为添加了足够多的关键字，我基本上已经不需要区别的地方看新闻了。

但是这样也有弊端，我不能把我的Google新闻首页发给别人看，如果是用lilina架的新闻站，我完全可以把地址发给我的朋友，让他们了解我都在注意什么。

不过不管怎么样，我已经决定试着改变我的习惯了，因为Google News对我来说太方便了~

您可能也喜欢：

Google最近的Logo连环画
对桌面搜索、硬盘搜索的想法
今日流水账 – Google Talk
比较郁闷的MM_preloadImages问题
搜狗的Gmail不好用，2G那么大居然不能放MP3~
无觅
]]> http://blog.94smart.com/cache/2005/0311_105.html/feed 0 Sogou不知道什么时候出了个“说吧” http://blog.94smart.com/cache/2005/0309_99.html http://blog.94smart.com/cache/2005/0309_99.html#comments Wed, 09 Mar 2005 11:25:42 +0000 94smart 您可能也喜欢： 貌似Sogou输入法还不错，但我还是用不惯 又看到有人说界面布局就是信息架构设计，这会以讹传讹吧。不过反过来讲，如果所有人都这么理解，权威人士还是放弃这个主张吧。 昨日收集 - 说说123体 昨天逛中关村的时候本来想收一台WP7的手机，结果不了了之，一个店老板甚至跟我说卖出去的机器没几天就有想退货的，我还是等等Nokia的WP7吧~ 今天不知道要说什么，该来的终于还是来了，一个伟大的可以改变世界的人走了，iPhone是你的，帮主乔布斯，让他安息吧。 无觅 ]]> 今天在Sogou找东西，不知道什么时候出了个“说吧”，一个模仿百度的产品，应该还在测试。

您可能也喜欢：
貌似Sogou输入法还不错，但我还是用不惯
又看到有人说界面布局就是信息架构设计，这会以讹传讹吧。不过反过来讲，如果所有人都这么理解，权威人士还是放弃这个主张吧。
今天不知道要说什么，该来的终于还是来了，一个伟大的可以改变世界的人走了，iPhone是你的，帮主乔布斯，让他安息吧。
只说的新书：手把手教你BLOG行销
昨日收集 - 说说123体
无觅
]]> http://blog.94smart.com/cache/2005/0309_99.html/feed 0 对桌面搜索、硬盘搜索的想法 http://blog.94smart.com/cache/2005/0218_73.html http://blog.94smart.com/cache/2005/0218_73.html#comments Fri, 18 Feb 2005 17:06:05 +0000 94smart 您可能也喜欢：
昨日收集 – Blog、手机游戏、搜索
搜索结果和Web差体验
Google图片搜索结果已经增加更新时间提示，默认不是按照时间排序的，只是把近几天新增的图片标记出来，很实用哟~
昨日收集 – 社会化搜索：一个关键的等式
拿什么来拯救你，我的电脑~ 无觅 ]]> 大家都知道Google和MSN的Desktop Search都已经处在Beta阶段了，最近又传出百度近日将推硬盘搜索 抗衡Google桌面搜索，说明今年各搜索巨头已经开始争抢硬盘搜索市场了。

Google的桌面搜索用过后觉得还不错，用起来像Google的网页搜索一样方便、快捷。这里还要说明的是，程序会在后台不停的为本机的文件加索引，来提高搜索的正确率，不过硬盘会不停的响，机器速度也会受一定影响。

不过同时我发现了一个细节，搜索页面的地址栏里面有个参数“s=123456789”，这说明Google给每个安装桌面搜索的机器分配了一个独一无二的ID，我的猜想是Google的桌面搜索程序同时收集本机上的文档数据，然后以这个ID发送到Google的搜索服务器上，为Google以后的P2P搜索或者文件搜索提供数据，也许哪天Google就出了一个“电狗”。:-)

另外，Google桌面搜索的隐私条款里面写了“Your computer’s content is not made accessible to Google or anyone else without your explicit permission.”，但是总觉得不够安全，也许是我多心了，但是如果哪天你在Google上搜到了自己机器上的文档（或其他文件），请不要太意外，是Google跟你开的小玩笑~

今天的胡写八写到此为止，下次见~

您可能也喜欢：

昨日收集 – Blog、手机游戏、搜索
搜索结果和Web差体验
Google图片搜索结果已经增加更新时间提示，默认不是按照时间排序的，只是把近几天新增的图片标记出来，很实用哟~
昨日收集 – 社会化搜索：一个关键的等式
拿什么来拯救你，我的电脑~
无觅
]]> http://blog.94smart.com/cache/2005/0218_73.html/feed 0 搜狗的Gmail不好用，2G那么大居然不能放MP3~ http://blog.94smart.com/cache/2004/1215_10.html http://blog.94smart.com/cache/2004/1215_10.html#comments Wed, 15 Dec 2004 09:31:34 +0000 94smart 您可能也喜欢：
2007中文网志年会北京印象之二：MicroBlogging大展拳脚
2007中文网志年会北京印象之闭眼的Blogger
刚知道del.icio.us改版
网游就像养鱼
Blogger的盛会：2007北京中文网志年会 无觅 ]]>

Google的Gmail那么早就做了还在测试，Sogou的刚开发出来就面世，问题一定少不了，个人认为Sohu的Gmail有点为时过早，过两天决定试试Sina和网易的Gmail。

您可能也喜欢：

2007中文网志年会北京印象之二：MicroBlogging大展拳脚
2007中文网志年会北京印象之闭眼的Blogger
刚知道del.icio.us改版
网游就像养鱼
Blogger的盛会：2007北京中文网志年会
无觅
]]> http://blog.94smart.com/cache/2004/1215_10.html/feed 0