大伟的博客 » javascript http://www.oneflash.net www.oneflash.net Tue, 06 Dec 2011 05:23:15 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 谷歌浏览器的javascript引擎 http://www.oneflash.net/2008/09/google-chrome-js/ http://www.oneflash.net/2008/09/google-chrome-js/#comments Thu, 04 Sep 2008 00:00:00 +0000 David http://oneflash.net/1970/01/%e8%b0%b7%e6%ad%8c%e6%b5%8f%e8%a7%88%e5%99%a8%e7%9a%84javascript%e5%bc%95%e6%93%8e/  看新闻说Chrome的Javascript引擎很强大，执行速度很快。就随便写了一个1,000,000次的累加放到IE和Chrome下测试，效果果然很明显！如下图：

ie vs chrome

脚本代码很简单，就是一段循环累加的：

JavaScript代码
  1. <script type="text/javascript">   
  2. var sum=0;   
  3. var o=new Date;   
  4. for(var i=0;i<1000001;i++){sum+=i;}   
  5. var e=new Date;   
  6. document.write("从1到1000000的累加结果：" + sum + "<br />");   
  7. document.write("耗时" + (e.getTime()-o.getTime()) + "毫秒");   
  8. </script>  

 

]]> http://www.oneflash.net/2008/09/google-chrome-js/feed/ 0 hover伪类的使用 http://www.oneflash.net/2008/05/hover-ie6/ http://www.oneflash.net/2008/05/hover-ie6/#comments Fri, 23 May 2008 00:00:00 +0000 David http://oneflash.net/1970/01/hover%e4%bc%aa%e7%b1%bb%e7%9a%84%e4%bd%bf%e7%94%a8/ 前段时间在论坛上有人问到一个淘宝网上的hover伪类实现的效果如果兼容ie6。
帖子：http://bbs.blueidea.com/thread-2854899-1-1.html
淘宝效果预览：http://list.mall.taobao.com/1343/g-s—–40-0–1343.htm

其实，问题很简单，就是hover伪类在IE6中得不到很好的支持，因为IE6只支持css1，而在css1中hover伪类只能针对a标签来起作用，看了一下淘宝的代码，他们的解决方法是：
首先，按照ie7/FF都支持的css2的写法来写。其次针对IE6不支持css2再做特殊处理。也就是通过javascript来弥补ie6下的不足。

这段javascript的原理是这样的：

根据某些特征找到需要添加hover效果的标签
对此标签添加onmouseover和onmouseout事件
在onmouseover事件中给对象赋予新的css class属性，同样，在onmouseout时移除该css class即可模拟成hover伪类的效果了。

这里有一个简单的示例，供大家参考！

]]> http://www.oneflash.net/2008/05/hover-ie6/feed/ 0 随机显示图片脚本 http://www.oneflash.net/2007/08/show-pic-random/ http://www.oneflash.net/2007/08/show-pic-random/#comments Thu, 09 Aug 2007 08:40:00 +0000 David http://oneflash.net/1970/01/%e9%9a%8f%e6%9c%ba%e6%98%be%e7%a4%ba%e5%9b%be%e7%89%87%e8%84%9a%e6%9c%ac/
预览地址：随机显示图片Demo

]]> http://www.oneflash.net/2007/08/show-pic-random/feed/ 0 用javascript来实现select标签的美化 http://www.oneflash.net/2007/04/js-select/ http://www.oneflash.net/2007/04/js-select/#comments Sat, 28 Apr 2007 16:47:00 +0000 David http://oneflash.net/1970/01/%e7%94%a8javascript%e6%9d%a5%e5%ae%9e%e7%8e%b0selct%e6%a0%87%e7%ad%be%e7%9a%84%e7%be%8e%e5%8c%96/ 论坛经常有人会问到用CSS如何美化Select标签，其实但凡你看到很酷的都是用javascript来实现的。昨天试着做了一下，基本实现的初级功能。拿出来和大家一起分享一下。先可以看一下预览效果：js实现select标签美化demo。

【功能需求】
1、调用要方便，做好之后应该像这样：

function loadSelect(selectobj){
//传入一个select对象就能将他的样式美化
}

2、不改变原有表单项，表单的页面代码不去破坏：

【实现思路】

第一步：将表单中的select隐藏起来。
为什么？很简单，因为这家伙太顽固了，用css根本搞不出来你想要的。所以把它杀掉。

第二步：用脚本找到select标签在网页上的绝对位置。
我们在那个位置上用DIV标签做个假的、好看点的来当他的替身。

第三步：用脚本把select标签中的值读出来。
虽然藏起来了，但它里边的options我们还有用呢，统统取过来。

第四步：当用户点击select标签的替身，也就是div的时候。我们再用一个div浮在上一个div的下边，这个就是options的替身了。

大致上就是这样了，接下来我们一步一步去实现它！

【准备工作】
1、想好你要把select美化成什么样子，并准备好相应的图片。我准备了两张小图，就是下拉箭头1和下拉箭头2，1是默认样式，2是鼠标移过来的样式。
2、写好一个普通的表单递交页面，比如下边这个。注意我给select定义了基本的CSS样式、在头部添加了调用js文件的代码、在body中添加了调用函数的脚本。

【编写javascript】

新建一个js文件并保存为select.js，剩下的工作我们全部在这个js中去完成。

函数名：loadSelect(obj);
参数：select对象

相关函数：

function Offset(e)
//取标签的绝对位置
{
var t = e.offsetTop;
var l = e.offsetLeft;
var w = e.offsetWidth;
var h = e.offsetHeight-2;

while(e=e.offsetParent)
{
t+=e.offsetTop;
l+=e.offsetLeft;
}
return {
top : t,
left : l,
width : w,
height : h
}
}

第一步：把select的绝对位置记录下来。一会替身上来就知道应该站那里了。
最后这个比较复杂一点，再解释一下，我们在做这一步之前，select的样子已经出来了，下一步就是再加一个div去模仿select被点击之后出现的下拉选项了。我们可以讲select标签的options通过javascript提取出来，把它写成这样：
基本上就这样了。还有些缺陷，有时间大家可以一起补充！

预览地址：javascript模拟select下拉
脚本下载：select.js

[本文由于在pjblog2wp过程中丢失了一些信息，请大家注意看demo页面的代码。]

]]> http://www.oneflash.net/2007/04/js-select/feed/ 0 实现div可编辑的常见方法 http://www.oneflash.net/2007/01/div-edit-enable/ http://www.oneflash.net/2007/01/div-edit-enable/#comments Wed, 10 Jan 2007 16:02:00 +0000 David http://oneflash.net/1970/01/%e5%ae%9e%e7%8e%b0div%e5%8f%af%e7%bc%96%e8%be%91%e7%9a%84%e5%b8%b8%e8%a7%81%e6%96%b9%e6%b3%95/ 功能：实现网页内容的即时编辑，增加页面的可用性、交互性。
方法1：直接通过textarea标签实现，请运行这个Demo。

思路：将textarea通过CSS样式设计成让用户感觉不像是textarea的样子，通过onblur、oumouseout等属性进行ajax保存用户数据。

方法二：通过document.createElement的方法向页面增加input来实现。请运行这个Demo。

思路：
1、当用户鼠标经过可编辑区域时，用背景色等方式提醒用户该区域可编辑。
2、当用户鼠标点击该区域时，也就是onclick事件时，先将原来的内容清掉，将临时创建出来一个输入框和一个输入按扭。
3、用户修改完后，点击“保存”按扭时通过ajax向数据库中写入新的数据。

PS：第二个方法的代码还有点问题，有空再来调试一下。

]]> http://www.oneflash.net/2007/01/div-edit-enable/feed/ 0 代替marquee的滚动字幕效果代码 http://www.oneflash.net/2007/01/js-marquee/ http://www.oneflash.net/2007/01/js-marquee/#comments Mon, 08 Jan 2007 09:00:00 +0000 David http://oneflash.net/1970/01/%e4%bb%a3%e6%9b%bfmarquee%e7%9a%84%e6%bb%9a%e5%8a%a8%e5%ad%97%e5%b9%95%e6%95%88%e6%9e%9c%e4%bb%a3%e7%a0%81/ 由于marquee标签现在用得是越来越少了，所以滚动效果的做法大多也都改用javascript来实现了，至于不明白为什么不直接用marquee标签的朋友，不妨先阅读一下这篇文章。
第一种方法：用javascript模拟marquee的做法。
出处：网易游戏 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>热点新闻</title>
<style type="text/css">
<!--
body {
    margin: 0px;
    font-size: 12px;
    color: #938C43;
    line-height: 150%;
    text-align:center;
}
a:link{color: #9D943A;font-size:12px;}
a:hover{color: #FF3300;font-size:12px;}
a:visited{color: #9D943A;font-size:12px;}
a.red:link{color: #ff0000;font-size:12px;}
a.red:hover{color: #ff0000;font-size:12px;}
a.red:visited{color: #ff0000;font-size:12px;}
#marqueeBox{background:#f7f7f7;border:1px solid silver;padding:1px;text-align:center;margin:0 auto;}
-->
</style>
</head>

<body>
<h4>滚动新闻</h4>
<script language="JavaScript" type="text/javascript">
var marqueeContent=new Array();
marqueeContent[0]="<a href=http://xyq.163.com/news/2006/11/2-2-20061102170913.html target=_blank>用“梦幻密保”快速取回帐号密码</a>";
marqueeContent[1]="<a href=http://ekey.163.com/ target=_blank>网易将军令官方网站</a>";
marqueeContent[2]="<a href=http://xyq.163.com/download/wallpaper.htm target=_blank>最新壁纸下载</a>";
marqueeContent[3]="<a href=http://xyq.163.com/download/around.htm target=_blank>最新屏保下载</a>";
var marqueeInterval=new Array();
var marqueeId=0;
var marqueeDelay=2000;
var marqueeHeight=20;
function initMarquee() {
    var str=marqueeContent[0];
    document.write('<div id="marqueeBox" style="overflow:hidden;width:250px;height:'+marqueeHeight+'px" onmouseover="clearInterval(marqueeInterval[0])" onmouseout="marqueeInterval[0]=setInterval(\'startMarquee()\',marqueeDelay)"><div>'+str+'</div></div>');
    marqueeId++;
    marqueeInterval[0]=setInterval("startMarquee()",marqueeDelay);
}
function startMarquee() {
    var str=marqueeContent[marqueeId];
    marqueeId++;
    if(marqueeId>=marqueeContent.length) marqueeId=0;
    if(document.getElementById("marqueeBox").childNodes.length==1) {
    var nextLine=document.createElement('DIV');
    nextLine.innerHTML=str;
    document.getElementById("marqueeBox").appendChild(nextLine);
    }
    else {
        document.getElementById("marqueeBox").childNodes[0].innerHTML=str;
        document.getElementById("marqueeBox").appendChild(document.getElementById("marqueeBox").childNodes[0]);
        document.getElementById("marqueeBox").scrollTop=0;
    }
    clearInterval(marqueeInterval[1]);
    marqueeInterval[1]=setInterval("scrollMarquee()",20);
}
function scrollMarquee() {
    document.getElementById("marqueeBox").scrollTop++;
    if(document.getElementById("marqueeBox").scrollTop%marqueeHeight==(marqueeHeight-1)){
    clearInterval(marqueeInterval[1]);
    }
}
initMarquee();
</script>

</body>
</html>

个人观点：从web可用性角度上讲，我们在采用这段代码的同时要考虑到noscript环境下的可用性，建议将内容还是以下边代码的形式出现在页面中。如：

<div id="newslist">
<ul>
<li><a href=http://xyq.163.com/news/2006/11/2-2-20061102170913.html target=_blank>用“梦幻密保”快速取回帐号密码</a></li>
<li><a href=http://ekey.163.com/ target=_blank>网易将军令官方网站</a></li>
<li><a href=http://xyq.163.com/download/wallpaper.htm target=_blank>最新壁纸下载</a></li>
<li><a href=http://xyq.163.com/download/around.htm target=_blank>最新屏保下载</a></li>
</ul>
</div>

然后用脚本去设置隐藏，将列表项读进javascript中定义的数组中。即可达到在noscript环境下也能正常看到内容列表。

第二种方法：这个更强，能自动根据内容自动进行左右滚动，解决了宽度太小造成的截取问题。
原文作者：风动人

<html>
<head>
<title> SCROLL </title>
<style type="text/css">
#infozone{font-size:12px;color:#aa6;overflow:hidden;width:100px;height:20px;}
#infozone div{height:20px;line-height:20px;white-space:nowrap;overflow:hidden;}
</style>
<script type="text/javascript">
var tc;
window.onload=function(){
    var o=document.getElementById('infozone');hscroll(o);
    window.setInterval(function(){window.clearTimeout(tc);o.firstChild.style.marginLeft='0px';scrollup(o,20,0);},10000);
}
function scrollup(o,d,c){
    if(d==c){
        var t=o.firstChild.cloneNode(true);
        o.removeChild(o.firstChild);o.appendChild(t);
        t.style.marginTop=o.firstChild.style.marginTop='0px';
        hscroll(o);
    }
    else{
        ch=false;var s=3,c=c+s,l=(c>=d?c-d:0);
        o.firstChild.style.marginTop=-c+l+'px';
        window.setTimeout(function(){scrollup(o,d,c-l)},50);
    }
}

function hscroll(o){
    var w1=o.firstChild.offsetWidth,w2=o.offsetWidth;
    if(w1<=w2)return;
    tc=window.setTimeout(function(){hs(o,w1-w2,0,w1-w2)},3500);
}

function hs(o,d,c,p){
    c++;var t=(c>0?-c:c);o.firstChild.style.marginLeft=t+'px';
    if(c==d){if(d==0){tc=window.setTimeout(function(){hs(o,p,0,p)},2500);}else tc=window.setTimeout(function(){hs(o,0,-p,p)},3500);}
    else tc=window.setTimeout(function(){hs(o,d,c,p)},5);
}
</script>
</head>

<body>
<div id="infozone"><div>温岚 - 屋顶(周杰伦 对唱版)</div><div>范玮琪 - 那些花儿</div><div>张韶涵 - 娃娃</div><div>孙楠&韩红 - 美丽的神话</div></div>
</body>
</html>

个人观点：从xhtml的语义化的角度看，页面内容中滥用div标签现象比较严重，可改成ul/li形式。

第三种是最精简的，代码非常少。
原文作者：cityvoice

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <style type="text/css">
    #newslist{
        background:#f7f7f7;border:1px solid silver;padding:1px;height:20px;line-height:20px;width:300px;
    }
    #contain{
        font-size:12px;overflow:hidden;list-style:none;width:300px;height:20px;margin:0px;padding:0;
    }
    #contain li{
        height:20px;line-height:20px;white-space:nowrap;overflow:hidden;
    }
</style>
</HEAD>

<BODY>
    <div id="newslist">
        <ul id="contain">
            <li><a href="http:/www.iwcn.net">温岚 - 屋顶(左右摆动)</a></li>
            <li><a href="http:/www.iwcn.net">范玮琪 - 那些花儿</a></li>
            <li><a href="http:/www.iwcn.net">张韶涵 - 娃娃</a></li>
            <li><a href="http:/www.iwcn.net">孙楠&韩红 - 美丽的神话</a></li>
            <li><a href="http:/www.iwcn.net">张信哲 - 白月光</a></li>
        </ul>
    </div>
<SCRIPT LANGUAGE="JavaScript">
function xx(){
var container=document.getElementById("contain");
container.appendChild(container.firstChild);
}
setInterval("xx()",3000);
</SCRIPT>
</BODY>
</HTML>

个人观点：太短小精干了，如果你喜欢简单的话，这个也可以考虑的。

]]> http://www.oneflash.net/2007/01/js-marquee/feed/ 0 改善用户体验之alert提示效果 http://www.oneflash.net/2006/10/js-alert/ http://www.oneflash.net/2006/10/js-alert/#comments Sat, 28 Oct 2006 00:00:00 +0000 David http://oneflash.net/1970/01/%e6%94%b9%e5%96%84%e7%94%a8%e6%88%b7%e4%bd%93%e9%aa%8c%e4%b9%8balert%e6%8f%90%e7%a4%ba%e6%95%88%e6%9e%9c/ 类似于新浪邮箱的提示效果。比较独立。在wenming版主的帮助下，已解决了高度不能适应的BUG。

使用方法很简单，在需要弹出提示的页面先引用alert.js脚本文件,如:

<script type="text/javascript" src="alert.js"></script>

然后直接在需要提出处使用：

sAlert("需要提示的信息");

即可.不需要额外添加HTML代码。完整Demo请看这里。
点击下载此文件

]]> http://www.oneflash.net/2006/10/js-alert/feed/ 0