"刘华栋"的个人网站 » JavaScript http://www.liuhuadong.com 我的日子依旧很简单，梦想一直没改变 Thu, 29 Jul 2010 22:36:03 +0000 en hourly 1 http://wordpress.org/?v=3.0 jquery flot 对ie6/7/8支持问题 http://www.liuhuadong.com/archives/911/index.html http://www.liuhuadong.com/archives/911/index.html#comments Mon, 03 May 2010 03:14:07 +0000 admin http://www.liuhuadong.com/?p=911 flot是基于jquery的一个chart插件，功能随没有JQchart功能强大（非专业性的图表项目，强大可以用臃肿代替），也没有google chart api使用方便，但这个小东西使用起来还是很方便，显示效果很好。
flot对firefox和chrome支持很好，稍加修饰即可显示出流畅的图表，但在ie下显示空白，看了一些解决方案，说flot不支持ie，其实是早期不支持ie8，现在已经全面对ie进行了支持。如果在ie下显示空白，可以加入”excanvas.js”文件(发布包里包含此文件)来修复：

<?php
<!--[if IE]><script type="text/javascript" src="../excanvas.min.js"></script><![endif]-->

即使加入以上内容，ie还有可能会出现空白，这个问题困扰我了好几个小时，最后检查结论是：在ie下，json数据格式中，不能有多余的逗号（虽然在chrome下显示正常）：

<?php
$(function () {
        $.plot($("#newimg"),
            [[[0,2],[413,2]],[[0,3],[0,3]]],//这里最后逗号不能少
            {
            yaxis:{
                max:"20",
                ticks:[[2,"xhat"]],
                labelwidth:10//最后加逗号chrome正常，ie各版本全部显示空白
            },
            shadowSize:5,
            lines:{show:true},
            points:{show:true},
            grid:{hoverable:true, clickable:true},
            xaxis:{max:10}
            }
        );
    });

希望这个结论能帮到同样遇到此问题的同学。

]]> http://www.liuhuadong.com/archives/911/index.html/feed 2 测试一下你的最快击键速度[附排行榜] http://www.liuhuadong.com/archives/837/index.html http://www.liuhuadong.com/archives/837/index.html#comments Sun, 04 Apr 2010 07:22:58 +0000 admin http://www.liuhuadong.com/?p=837 输入速度全球排行榜。
作者：刘华栋 2010.4 原创作品，欢迎转载流传
无标题
具体使用方法很简单，打开下边这个页面，直接用键盘开始输入字母a到z，顺序不能弄错，输入完成即会自动显示用时。
虽然这可能是个无聊的作品，但还是花了我不少时间才搞定，中间涉及js、css、php、mysql，我自己的26个字母的输入记录是<5秒，具体多少忘了。我的目标是达到4s以内，不过看来希望不大。
挑战地址：http://www.liuhuadong.com/labs/top.php

tips:
数据库中使用group by的时候，可以同时使用min(字段名)/max(字段名)来获取每个group中的最值，这个sql语法简直太棒了，大大减少坐在电脑前呼出的二氧化碳含量，节能环保。

]]> http://www.liuhuadong.com/archives/837/index.html/feed 1 js中getYear()在不同浏览器中的兼容性及解决方案 http://www.liuhuadong.com/archives/704/index.html http://www.liuhuadong.com/archives/704/index.html#comments Mon, 22 Feb 2010 03:53:03 +0000 admin http://www.liuhuadong.com/?p=704 在调试程序时，客户有要求页首需要增加时间显示。显然就用到了Date()中的getYear()来直接显示年份：

var now  = new Date();
var year = now.getYear();
document.write(year);

IE显示正常，但在firefox和chrome下显示为110年（应该显示为1900+110=2010年），在网上搜索了一下答案，得到结论是IE为了提高兼容性，只要通过Date()取得的年份是两位或三位，那么就认为人的寿命不可能是1900年之多，所以智能的自动增加1900作为显示结果，即用getYear()即可显示为2010。但对于firefox和chrome等遵循标准的浏览器来讲，这样的做法显然有些可笑，于是搜索到这个解决办法：

var now  = new Date();
var year = ( now.getYear() < 1900 ) ? ( 1900 + now.getYear() ) : now.getYear();
document.write(year);

上面的解决办法是对年份进行判断，小于1900则自动加上以显示正确年份，这样就完全兼容了所有浏览器的年份显示。

其实这里要写的不只是上面的解决方案，最佳解决方案是这样的：getYear()是js1.0标准的旧用法，现在提倡用getFullYear()即可得到完整年份：

var now  = new Date();
var year = now.getFullYear();
document.write(year);
]]> http://www.liuhuadong.com/archives/704/index.html/feed 0 ajax计数器的实现 http://www.liuhuadong.com/archives/518/index.html http://www.liuhuadong.com/archives/518/index.html#comments Sun, 12 Jul 2009 01:11:49 +0000 admin http://www.liuhuadong.com/?p=518 本文代码实现页面计数器在无刷新情况下自动更新同步计数器数据。

<script language="javascript">
var xmlHttp;
function create(){
    if(window.ActiveXObject){
        xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    else if(window.XMLHttpRequest){
        xmlHttp=new XMLHttpRequest();
    }
}
function count(){
    create();
    xmlHttp.open("GET","http://www.xxx.com/3.php?aa="+Math.random());
    xmlHttp.onreadyStatechange=handle;
    xmlHttp.send(null);
}
function handle(){
    if(xmlHttp.readyState==4){
        if(xmlHttp.status==200){document.getElementById("jishu").innerHTML=escape(xmlHttp.responseText);}
    }
}
function myShow(){
    window.setInterval(count,5000);
}
</script>
<body onload="count();myShow();">
共有<span id="jishu"></span>人访问
</body>

需要注意的是xmlhttp在刷新的时间会使用缓存，所以需要在请求的地址上加随机数（Math.random）以防止使用缓存数据。另外setInterval与setTimeout的区别是前者为间隔循环执行，后者为定时执行一次。

]]> http://www.liuhuadong.com/archives/518/index.html/feed 0 QQ签名在自己博客上同步 http://www.liuhuadong.com/archives/109/index.html http://www.liuhuadong.com/archives/109/index.html#comments Fri, 08 Feb 2008 12:50:43 +0000 admin http://www.liuhuadong.com/archives/109/index.html 看图： 

其实也没什么技术含量，QQ签名自动在taotao上面更新，然后通过js获取taotao上面的数据显示出来就行了。

在页面加载：

<script type="text/javascript" charset="utf-8" src="http://www.liuhuadong.com/qqapi.js"></script>

调用位置加入：

<script type="text/javascript">var taotao_qq=7360369; var taotao_num=1;var taotao_type=0;</script>
]]> http://www.liuhuadong.com/archives/109/index.html/feed 2 叹为观止的css特效 http://www.liuhuadong.com/archives/64/index.html http://www.liuhuadong.com/archives/64/index.html#comments Wed, 20 Jun 2007 10:38:05 +0000 admin http://www.liuhuadong.com/archives/64/index.html 学习过css与js的，开下眼界吧，保存这个html打开看看。

且再看网友评论：

2006-6-10 22:36:17
盖茨他爹：老夫活了大半辈子，头一次见这么NB的JS特效
——————————————————————————————

2006-6-10 22:39:06
小星：很少见，一般会直接用flash实现，学习了阿
——————————————————————————————

2006-6-11 22:40:05
dreame：开眼界
——————————————————————————————

2006-7-15 11:45:17
zxxlg205：我也算是开眼界了
——————————————————————————————

2006-7-28 16:22:40
hangxj：何止是一个N字了得?　那应该就是太N了~`
——————————————————————————————

2006-8-9 13:21:55
可可℃乐：俺…俺…俺都不说拉 简直不敢相信。终于体会到JS的强大拉
——————————————————————————————

2006-8-29 11:48:56
angeldidi：cool!　不过有没有人可以帮忙解释一下这些代码？
——————————————————————————————

2006-11-3 11:05:45
〖←冷似雪：厉害,I服了YOU
——————————————————————————————

2006-11-5 00:33:45
尤来尤去：不是太牛，是真TMD的牛！！！

 

<html>

<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ />

<title>css菜单</title>

<style>

body{

background-color:#B8B8A0;

}

#fbtn{

display:none;

overflow:hidden;

border-style:solid;

border-width:1px;

border-color:#e1e1c9 #e1e1c9 #6e6e56 #6e6e56;

padding:1 1 1 1;

width:115px;

height:30px;

}

#fbtn_txt{

position:relative;

}

#fbtn_txt div{

height:30px;

padding-top:11px;

font-size:12px;

color:#800080;

text-align:center;

cursor:hand;

}

#fbtn_mask{

background-color:#ffffff;

position:relative;

width:100%;

height:100%;

}

</style>

</head>

<body>

<div id=fbtn>

<div id=fbtn_mask></div>

<div id=fbtn_txt>

<div>G1</div>

<div>good morning</div>

</div>

</div>

<div id=fbtn>

<div id=fbtn_mask></div>

<div id=fbtn_txt>

<div>G2</div>

<div>good evening</div>

</div>

</div>

<div id=fbtn>

<div id=fbtn_mask></div>

<div id=fbtn_txt>

<div>M1</div>

<div>my name is fireyy</div>

</div>

</div>

<div id=fbtn>

<div id=fbtn_mask></div>

<div id=fbtn_txt>

<div>M2</div>

<div>mm mm i love u</div>

</div>

</div>

<div id=fbtn>

<div id=fbtn_mask></div>

<div id=fbtn_txt>

<div>G1</div>

<div>good morning</div>

</div>

</div>

<div id=fbtn>

<div id=fbtn_mask></div>

<div id=fbtn_txt>

<div>G2</div>

<div>good evening</div>

</div>

</div>

<div id=fbtn>

<div id=fbtn_mask></div>

<div id=fbtn_txt>

<div>M1</div>

<div>my name is fireyy</div>

</div>

</div>

<div id=fbtn>

<div id=fbtn_mask></div>

<div id=fbtn_txt>

<div>M2</div>

<div>mm mm i love u</div>

</div>

</div>

<script>

var current=null;

var t=null;

for(var i=0;i<fbtn.length;i++){

fbtn_txt[i].style.posTop=-30;

fbtn_mask[i].style.posTop=-30;

fbtn[i].index=i;

fbtn[i].style.display=”block”;

fbtn[i].onmouseover=function(){

if(!current){

current=this;

domove(this.index);

}

else

if(current!=this){

domove(current.index);

domove(this.index);

current=this;

}

}

fbtn[i].onmouseout=function(){

if(event.toElement==this.parentElement&t==this){

domove(this.index);

current=null;

}

}

}

function domove(num){

var o=fbtn_txt[num];

var m=fbtn_mask[num];

if(o.style.posTop<-60){

o.style.display=”none”;

var t=o.children[1].innerHTML;

o.children[1].innerHTML=o.children[0].innerHTML;

o.children[0].innerHTML=t;

o.style.posTop=-30;

o.style.display=”block”;

if(m.style.posTop>30)

m.style.posTop=-30;

else

m.style.posTop=0;

}

else{

m.style.posTop+=3;

o.style.posTop-=3;

setTimeout(‘domove(‘+num+’)',15);

}

}

</script>

</body>

</html>

]]> http://www.liuhuadong.com/archives/64/index.html/feed 2