Stri's Blog

备案终于成功了

备案终于成功了.编号在网站下面.呼呼~~
从10月14号到现在真是一个漫长的等待呀.
网站又添加一个几个导航,一个是围脖,一个是我的QQ空间(都是些生活上的日记,琐碎),还有一个简陋的搜索功能,呼呼~先做这么多,这段时间工作也很忙.看书的速度也很慢.
月初在旧书市场花了20块买了本<ppk on javascript>

还在拜读中.计划是月底前很看两遍.不过今天才发现.一遍也可能看不完.不是看不懂而是没时间,所以要挤了.
网站又启动了.飞起来吧.

Comments(0)

关联数组

关联数组是允许你通过字符串作为值的名字来找到某一个确定的值的数组.这些字符串叫做关键字.
点符号与方括号
在数组中

var str=[1,2,3];
str[1]

在对象中

var fun={
x:function(){
},
y:function(){
}}

fun.x();可以执行,fun['x']()也可以执行
具体可以看下面的实例

在CSS中的可以应用,例如下面
style.+得是它的一个属性.如果写成
style.stylename就错误了.应该它不是style的属性.

<select name="textAlign" id="select">
<option value="left">left</option>
<option value="right">right</option>
<option value="center">center</option>
</select>
<div id="box">thinkpad</div>
<script type="text/javascript">
function getValue(){
var styleName=this.name,
styleValue=this.value;
document.getElementById("box").style[styleName]=styleValue;
document.getElementById("box").innerHTML=styleValue;

}
document.getElementById("select").onchange=getValue;
</script>

还有其它应用,
如果在表单验证中.把常用的验证几项写成一个函数,在input上中个非w3c属性,通过dom查找这个非属性,来决定用那一个验证函数

<!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=utf-8" />
<title>无标题文档</title>
<style type="text/css">
* { padding:0; margin:0; }

li, ol, dl { list-style:none; }

ul { margin:0 auto; width:300px; }
</style>
</head>
<body>
<ul>
  <form id="form1" name="form1" method="post" action="">
    <li>
      <input type="text" name="textfield" valid="required number" id="textfield" />
    </li>
    <li>
      <input type="text" name="textfield" valid="required number" id="textfield" />
    </li>
  
    <li>
      <input type="button" name="button" id="button" value="提交" />
    </li>
  </form>
</ul>
<script type="text/javascript">
var vall = {
    required: function() {
        if (arguments[0].value == "") alert("不能为空");
    },
    number: function() {
        alert("222");
    }
}
function check_form() {
    var obj = document.form1;
    for (var i = 0; i < obj.length; i++) {
        var reqs = obj[i].getAttribute("valid").split(" ");
        for (var j = 0; j < reqs.length; j++) {
            var ch = vall[reqs[j]](obj[i]);
        }
    }
}
document.getElementById("button").onclick = check_form;
</script>
</body>
</html>

这样的做法显然不能通过w3c验证.不过在实用中却很中用.

Comments(0)

一个效果中遇到的问题

代码如下:
//无法完美显示,主要问题在鼠标放上而又移开后不能紧接着滚动

copy

code:

function $(id) {
    return document.getElementById(id);
}
var aa = 0;

var hot_list = {

    x: function(t, t1) {
        var me = this;
        var obj = $(t).getElementsByTagName("ul"),
        len = obj.length;
        var obj1 = obj[1].getElementsByTagName("li"),
        len1 = obj1.length;

        for (var i = 0; i < len1; i++) {

            obj1[i].i = i;
            obj1[i].onmouseover = function() {
                clearInterval(timer);
                hot_list.z(t, this.i);
            }
            obj1[i].onmouseout = function() {
                timer = setInterval(function() {
                    hot_list.p("box");
                },
                1000);
            }

        }

    },
    z: function(t, node) {
        var obj = $(t).getElementsByTagName("ul"),
        len = obj.length;

        var obj1 = obj[0].getElementsByTagName("li"),
        len1 = obj1.length,
        obj2 = obj[1].getElementsByTagName("li");

        for (var j = 0; j < len1; j++) {

            if (obj1[j].className != "none") {
                obj1[j].className = "none";

            }
            if (j == node) {
                obj1[node].className = "act";
            }

            if (obj2[j].className != "none") {
                obj2[j].className = "none";

            }
            if (j == node) {
                obj2[node].className = "act";
            }
        }
    },

    p: function(t, aaa) {
        var me = this;
        var obj = $(t).getElementsByTagName("ul"),
        len = obj.length;
        var obj1 = obj[1].getElementsByTagName("li"),
        len1 = obj1.length;

        if (aa < len1) {

            hot_list.z(t, aa++);

        }
        else {
            aa = 0;
            hot_list.z(t, aa++);
        }
    }
};

hot_list.x("box");
var timer = setInterval(function() {
    hot_list.p("box");
},
1000);

<!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=utf-8" />
<title>无标题文档</title>
<style type="text/css">
html { height:100%; width:100%; }
* { padding:0; margin:0; }
body { font-family:Verdana, Geneva, sans-serif; font-size:14px; line-height:22px; }
#wrap { width:700px; margin:0 auto; }
ol, li { list-style:none; }
a { text-decoration:none; color:#000; }
.box ul.img_box { width:300px; float:left; }
.box ul.myul { width:300px; float:right; }
.box ul.img_box li { display:none; }
.box ul.img_box li.none { display:none; }
.box ul.img_box li.act { display:block; }
.box ul.myul a:hover { color:#900; }
.box ul.myul li.none a { color:#000; }
.box ul.myul li.act a { color:#fff; background-color:#090; }
</style>
</head>
<body>
<div id="wrap">
 <div class="box" id="box">
  <ul class="img_box">
   <li class="act"><img src="http://images.movie.xunlei.com/gallery/561/4b9288afce13ad795f5b242121779da4.jpg" alt="" /></li>
   <li>1</li>
   <li>2</li>
   <li>3</li>
   <li>4</li>
   <li>5</li>
   <li>6</li>
   <li>7</li>
   <li>8</li>
  </ul>
  <ul class="myul">
   <li class="act"><span>[新闻]</span><a class="hover" href="#" title="欢迎访问我的小站！">欢迎访问我的小站！</a></li>
   <li><span>[娱乐]</span><a href="#" title="专注前端开发，关注用户体验">专注前端开发，关注用户体验</a></li>
   <li><span>[体育]</span><a href="#" title="一步一步学习js，编辑推荐">一步一步学习js，编辑推荐</a></li>
   <li><span>[图书]</span><a href="#" title="你了解IE6吗？">你了解IE6吗？</a></li>
   <li><span>[汽车]</span><a href="#" title="这是一个神奇的世界">这是一个神奇的世界</a></li>
   <li><span>[房产]</span><a href="#" title="新艺术领域的珠联璧合！">新艺术领域的珠联璧合！</a></li>
   <li><span>[校园]</span><a href="#" title="JavaScript高级程序设计">JavaScript高级程序设计</a></li>
   <li><span>[商城]</span><a href="#" title="ActionScript3殿堂之路">ActionScript3殿堂之路</a></li>
   <li><span>[空间]</span><a href="#" title="你学会了吗？">你学会了吗？</a></li>
  </ul>
 </div>
</div>
<script type="text/javascript">
function $(id) {
    return document.getElementById(id);
}
var aa = 0;

var hot_list = {

x: function(t, t1) {
        var me = this;
        var obj = $(t).getElementsByTagName("ul"),
        len = obj.length;
        var obj1 = obj[1].getElementsByTagName("li"),
        len1 = obj1.length;

for (var i = 0; i < len1; i++) {

obj1[i].i=i;
            obj1[i].onmouseover = function(){
				clearInterval(timer);
                hot_list.z(t, this.i);}
			 obj1[i].onmouseout = function(){
				 timer = setInterval(function() {
    hot_list.p("box");
},
1000);}

}
     
    },
    z: function(t, node) {
        var obj = $(t).getElementsByTagName("ul"),
        len = obj.length;

var obj1 = obj[0].getElementsByTagName("li"),
        len1 = obj1.length,obj2=obj[1].getElementsByTagName("li");
     
        for (var j = 0; j < len1; j++) {

if (obj1[j].className != "none") {
                obj1[j].className = "none";
		
            }
            if (j == node) {
                obj1[node].className = "act";
            }
			  
			  if (obj2[j].className != "none") {
                obj2[j].className = "none";
		
            }
            if (j == node) {
                obj2[node].className = "act";
            }
        }
    },

p: function(t, aaa) {
        var me = this;
        var obj = $(t).getElementsByTagName("ul"),
        len = obj.length;
        var obj1 = obj[1].getElementsByTagName("li"),
        len1 = obj1.length;

if (aa < len1) {

hot_list.z(t, aa++);
			
        }
        else {
            aa = 0;
            hot_list.z(t, aa++);
        }
    }
};

hot_list.x("box");
var timer = setInterval(function() {
    hot_list.p("box");
},
1000);</script>
</body>
</html>

什么问题?

Comments(2)

很无聊的效果

copy

code:

function $(id) {
    return document.getElementById(id);
}

var mgyp = {
    x: function(t) {
        var obj = $(t).getElementsByTagName("a"),
        len = obj.length,
        me = this;
        for (var i = 0; i < len; i++) {

            obj[i].onclick = function() {
            var ss=(me.z(this.parentNode).className!="a" ) ? 0: 1 ;
               me.y(t);
			if(ss){me.z(this.parentNode).className=="a";}
                me.z(this.parentNode).className = (ss) ? "b": "a";
            }
        }
    },
    y: function(t) {
        var obj1 = $(t).getElementsByTagName("a")
		     len1=obj1.length;
        for (var i = 0; i < len1; i++) {

            this.z(obj1[i].parentNode).className = "b";
        }
    },
    z: function(node) {
        var s = node.lastChild;
        while (s.nodeType != 1) {
            s = s.previousSibling;
        }
        return s;
    }
};
mgyp.x("mgyp");

<!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=utf-8" />
<title>无标题文档</title>
<style type="text/css">
* { padding:0; margin:0; list-style:none; }
body { font-size:14px; line-height:22px; font-family:Verdana, Geneva, sans-serif; }
#wrap { width:960px; height:auto; margin:0 auto; }
ul li ul { display:none; background-color:#090; color:#FFF; }
ul li ul.a { display:block; }
ul li ul.b { display:none; }
</style>
</head>
<body>
<div id="wrap">
  <ul id="mgyp">
    <li><a href="javascript:void(0)">老大</a>
      <ul>
        <li><a href="javascript:void(0)">老二</a></li>
      </ul>
    </li>
    <li><a href="javascript:void(0)">老大</a>
      <ul>
        <li><a href="javascript:void(0)">老二</a></li>
      </ul>
    </li>
    <li><a href="javascript:void(0)">老大</a>
      <ul>
        <li><a href="javascript:void(0)">老二</a></li>
      </ul>
    </li>
    <li><a href="javascript:void(0)">老大</a>
      <ul>
        <li><a href="javascript:void(0)">老二</a></li>
      </ul>
    </li>
    <li><a href="javascript:void(0)">老大</a>
      <ul>
        <li><a href="javascript:void(0)">老二</a></li>
      </ul>
    </li>
  </ul>
</div>
<script type="text/javascript">
function $(id) {
    return document.getElementById(id);
}

var mgyp = {
    x: function(t) {
        var obj = $(t).getElementsByTagName("a"),
        len = obj.length,
        me = this;
        for (var i = 0; i < len; i++) {

obj[i].onclick = function() {
            var ss=(me.z(this.parentNode).className!="a" ) ? 0: 1 ;
               me.y(t);
			if(ss){me.z(this.parentNode).className=="a";}
                me.z(this.parentNode).className = (ss) ? "b": "a";
            }
        }
    },
    y: function(t) {
        var obj1 = $(t).getElementsByTagName("a")
		     len1=obj1.length;
        for (var i = 0; i < len1; i++) {

this.z(obj1[i].parentNode).className = "b";
        }
    },
    z: function(node) {
        var s = node.lastChild;
        while (s.nodeType != 1) {
            s = s.previousSibling;
        }
        return s;
    }
};
mgyp.x("mgyp");</script>
</body>
</html>

Comments(0)

两个无聊的效果，在chrome中解释不一样

FF和IE的效果基本上一样。而在chrome里却不一样了。郁闷呀！！
第一个：
我在用日期对象写东西时发现的。

var stri=123456789;
var d=new Date();
var x={
x:function(){
alert((d.getTime()+stri-d.getTime()).toLocaleString());
}
};
x.x();

在IE和FF中可以将数字转换为：123,456,789.00（基本上实现了这个http://bbs.9demo.com/viewthread.php?tid=27&page=1#pid193第三题的转换），但chrome里却没有逗号。
第二个：

<!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=utf-8" />
<title>loading</title>
<style type="text/css">
* { padding:0; margin:0; list-style:none; }
#wrap { width:960px; height:auto; margin:0 auto; }
.loading ul.tr, .loading ul.tl, .loading ul.load_body { background:url(http://www.14pc.com/demo/images/loading_b.gif) no-repeat; }
.loading ul.tr { background-position:0 0; width:10px; height:14px; float:left; display:inline; }
.loading ul.tl { background-position:0 -18px; width:8px; height:14px; float:left; display:inline; }
.loading ul.load_body { background-repeat:repeat-x; background-position:0 -36px; height:14px; float:left; display:inline; }
#loading { height:14px; padding:2px; width:418px; border:0px solid #900; float:left; }
#pce { width:100px; float:left; }
</style>
</head>
<body>
<div id="wrap">
  <div id="loading">
    <div class="loading">
      <ul class="tr">
      </ul>
      <ul class="load_body" id="lo">
      </ul>
      <ul class="tl">
      </ul>
    </div>
  </div>
  <div id="pce"></div>
</div>
<script type="text/javascript">
function $(id) {
    return document.getElementById(id);
}
var loading_w=400,loading_v=1;
var x = {
    x: function(t) {
        var n_w = parseInt($(t).style.width) || 0;
        if (n_w < loading_w) {
            $(t).style.width = n_w + Math.ceil((loading_w - n_w) / 450) + "px";
            $("pce").innerHTML = Math.round(parseInt($(t).style.width) / loading_w * 100) + "%";
        }
        else {
            clearInterval(this.y);
        }
    },
    y: function(t) {
        window.setInterval(function(){x.x(t);}, loading_v);
    }
};
x.y("lo");
</script>
</body>
</html>

差别：在chrome中比较快。

Comments(0)

最新日志

备案终于成功了

关联数组

一个效果中遇到的问题

很无聊的效果

两个无聊的效果，在chrome中解释不一样

分类

最新文章

最新回复

良师益友

日志归档