javascript实现飘动的广告

<script type="text/javascript">
<!--
document.write("<a href='http://russian.china.org.cn/exclusive/txt/2011-12/23/content_24232675.htm' target='_blank'><img id='gg2' src='http://images.china.cn/images1/ru/2009first/100806-ru.gif' /></a>")

//公共脚本文件 main.js
function addEvent(obj,evtType,func,cap){
    cap=cap||false;
 if(obj.addEventListener){
     obj.addEventListener(evtType,func,cap);
  return true;
 }else if(obj.attachEvent){
        if(cap){
         obj.setCapture();
         return true;
     }else{
      return obj.attachEvent("on" + evtType,func);
  }
 }else{
  return false;
    }
}
function getPageScroll(){
    var xScroll,yScroll;
 if (self.pageXOffset) {
  xScroll = self.pageXOffset;
 } else if (document.documentElement && document.documentElement.scrollLeft){
  xScroll = document.documentElement.scrollLeft;
 } else if (document.body) {
  xScroll = document.body.scrollLeft;
 }
 if (self.pageYOffset) {
  yScroll = self.pageYOffset;
 } else if (document.documentElement && document.documentElement.scrollTop){
  yScroll = document.documentElement.scrollTop;
 } else if (document.body) {
  yScroll = document.body.scrollTop;
 }
 arrayPageScroll = new Array(xScroll,yScroll);
 return arrayPageScroll;
}
function GetPageSize(){
	var xScroll, yScroll;
	if (window.innerHeight && window.scrollMaxY) { 
		xScroll = document.body.scrollWidth;
		yScroll = window.innerHeight + window.scrollMaxY;
	} else if (document.body.scrollHeight > document.body.offsetHeight){
		xScroll = document.body.scrollWidth;
		yScroll = document.body.scrollHeight;
	} else {
		xScroll = document.body.offsetWidth;
		yScroll = document.body.offsetHeight;
	}
	var windowWidth, windowHeight;
	if (self.innerHeight) {
		windowWidth = self.innerWidth;
		windowHeight = self.innerHeight;
	} else if (document.documentElement && document.documentElement.clientHeight) {
		windowWidth = document.documentElement.clientWidth;
		windowHeight = document.documentElement.clientHeight;
	} else if (document.body) {
		windowWidth = document.body.clientWidth;
		windowHeight = document.body.clientHeight;
	} 
	if(yScroll < windowHeight){
		pageHeight = windowHeight;
	} else { 
		pageHeight = yScroll;
	}
	if(xScroll < windowWidth){ 
		pageWidth = windowWidth;
	} else {
		pageWidth = xScroll;
	}
	arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight) 
	return arrayPageSize;
}


//广告脚本文件 AdMove.js
var AdMoveConfig=new Object();
AdMoveConfig.IsInitialized=false;
AdMoveConfig.ScrollX=0;
AdMoveConfig.ScrollY=0;
AdMoveConfig.MoveWidth=0;
AdMoveConfig.MoveHeight=0;
AdMoveConfig.Resize=function(){
    var winsize=GetPageSize();
    AdMoveConfig.MoveWidth=winsize[2];
    AdMoveConfig.MoveHeight=winsize[3];
    AdMoveConfig.Scroll();
}
AdMoveConfig.Scroll=function(){
    var winscroll=getPageScroll();
    AdMoveConfig.ScrollX=winscroll[0];
    AdMoveConfig.ScrollY=winscroll[1];
}
addEvent(window,"resize",AdMoveConfig.Resize);
addEvent(window,"scroll",AdMoveConfig.Scroll);
function AdMove(id){
    if(!AdMoveConfig.IsInitialized){
        AdMoveConfig.Resize();
        AdMoveConfig.IsInitialized=true;
    }
    var obj=document.getElementById(id);
    obj.style.position="absolute";
    var W=AdMoveConfig.MoveWidth-obj.offsetWidth;
    var H=AdMoveConfig.MoveHeight-obj.offsetHeight;
    var x = W*Math.random(),y = H*Math.random();
    var rad=(Math.random()+1)*Math.PI/6;
    var kx=Math.sin(rad),ky=Math.cos(rad);
    var dirx = (Math.random()<0.5?1:-1), diry = (Math.random()<0.5?1:-1);
    var step = 1;
    var interval;
    this.SetLocation=function(vx,vy){x=vx;y=vy;}
    this.SetDirection=function(vx,vy){dirx=vx;diry=vy;}
    obj.CustomMethod=function(){
        obj.style.left = (x + AdMoveConfig.ScrollX) + "px";
        obj.style.top = (y + AdMoveConfig.ScrollY) + "px";
        rad=(Math.random()+1)*Math.PI/6;
        W=AdMoveConfig.MoveWidth-obj.offsetWidth;
        H=AdMoveConfig.MoveHeight-obj.offsetHeight;
        x = x + step*kx*dirx;
        if (x < 0){dirx = 1;x = 0;kx=Math.sin(rad);ky=Math.cos(rad);} 
        if (x > W){dirx = -1;x = W;kx=Math.sin(rad);ky=Math.cos(rad);}
        y = y + step*ky*diry;
        if (y < 0){diry = 1;y = 0;kx=Math.sin(rad);ky=Math.cos(rad);} 
        if (y > H){diry = -1;y = H;kx=Math.sin(rad);ky=Math.cos(rad);}
    }
    this.Run=function(){
        var delay = 10;
        interval=setInterval(obj.CustomMethod,delay);
        obj.onmouseover=function(){clearInterval(interval);}
        obj.onmouseout=function(){interval=setInterval(obj.CustomMethod, delay);}
    }
}
var ad2=new AdMove("gg2");
ad2.Run();
-->
</script>

利用JavaScript创建随机数

JavaScript验证身份证号码

<script type="text/javascript">
<!--
var test=function(idcard){
  var Errors=new Array("验证通过!","身份证号码位数不对!","身份证号码出生日期超出范围或含有非法字符!","身份证号码校验错误!","身份证地区非法!");
  var area={11:"北京",12:"天津",13:"河北",14:"山西",15:"内蒙古",21:"辽宁",22:"吉林",23:"黑龙江",31:"上海",32:"江苏",33:"浙江",34:"安徽",35:"福建",36:"江西",37:"山东",41:"河南",42:"湖北",43:"湖南",44:"广东",45:"广西",46:"海南",50:"重庆",51:"四川",52:"贵州",53:"云南",54:"西藏",61:"陕西",62:"甘肃",63:"青海",64:"宁夏",65:"xinjiang",71:"台湾",81:"香港",82:"澳门",91:"国外"}
  var idcard,Y,JYM;
  var S,M;
  var idcard_array = new Array();
  idcard_array = idcard.split("");
  if(area[parseInt(idcard.substr(0,2))]==null) return Errors[4];
  switch(idcard.length){
	case 15:
	  if((parseInt(idcard.substr(6,2))+1900) % 4 == 0 || ((parseInt(idcard.substr(6,2))+1900) % 100 == 0 && (parseInt(idcard.substr(6,2))+1900) % 4 == 0 )){
		ereg = /^[1-9][0-9]{5}[0-9]{2}((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|3[0-1])|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|[1-2][0-9]))[0-9]{3}$/;//测试出生日期的合法性
	  }else{
		ereg = /^[1-9][0-9]{5}[0-9]{2}((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|3[0-1])|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|1[0-9]|2[0-8]))[0-9]{3}$/;//测试出生日期的合法性
	 }
	  if(ereg.test(idcard)){
		return Errors[0];
	  }else{ 
		return Errors[2];
	  }
	  break;
	case 18:
	  if( parseInt(idcard.substr(6,4)) % 4 == 0 || (  parseInt(idcard.substr(6,4)) % 100 == 0 && parseInt(idcard.substr(6,4))%4 == 0 )){
		ereg = /^[1-9][0-9]{5}19[0-9]{2}((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|3[0-1])|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|[1-2][0-9]))[0-9]{3}[0-9Xx]$/;//闰年出生日期的合法性正则表达式
	  }else{
		ereg = /^[1-9][0-9]{5}19[0-9]{2}((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|3[0-1])|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|1[0-9]|2[0-8]))[0-9]{3}[0-9Xx]$/;//平年出生日期的合法性正则表达式
	  }
	  if(ereg.test(idcard)){
		S = (parseInt(idcard_array[0]) + parseInt(idcard_array[10])) * 7 + (parseInt(idcard_array[1]) + parseInt(idcard_array[11])) * 9 + (parseInt(idcard_array[2]) + parseInt(idcard_array[12])) * 10 + (parseInt(idcard_array[3]) + parseInt(idcard_array[13])) * 5 + (parseInt(idcard_array[4]) + parseInt(idcard_array[14])) * 8 + (parseInt(idcard_array[5]) + parseInt(idcard_array[15])) * 4 + (parseInt(idcard_array[6]) + parseInt(idcard_array[16])) * 2 + parseInt(idcard_array[7]) * 1 + parseInt(idcard_array[8]) * 6 + parseInt(idcard_array[9]) * 3 ;
		Y = S % 11;
		M = "F";
		JYM = "10X98765432";
		M = JYM.substr(Y,1);
		if(M == idcard_array[17]){
		  return Errors[0];
		}else{
		  return Errors[3];
		}
	  }else{
	   return Errors[2];
	  }
	  break;
	default:
	  return Errors[1];
	  break;
  }
}
-->
</script>

JavaScript操作Cookies

JavaScript操作Cookies包括添加，修改，删除

表单验证的正则表达式

后载入图片

<script type="text/javascript" src="http://www.china.com.cn/jquery-1.7.min.js"></script>
<script type="text/javascript" src="http://images.china.cn/images1/ch/dtzs/lazyload.js"></script>
<script type="text/javascript">
$(function() {$("#content img").lazyload({placeholder: "http://images.china.cn/images1/ch/dtzs/grey.gif",effect: "fadeIn"});});
</script>
<div id="content">
<img alt="东北风雪感受之梦幻雪乡" src="http://images.china.cn/attachement/jpg/site1000/20111216/001ec949fc8d105500532b.jpg" width="900" height="450" /></a><br />
<img alt="" src="http://images.china.cn/attachement/jpg/site1000/20111216/001ec949fc8d1054ff9e2a.jpg" width="900" height="450" /><br />
<img alt="杭州太子湾—春天里来百花开" src="http://images.china.cn/attachement/jpg/site1000/20111216/001ec949fc8d1054fe7629.jpg" width="900" height="450" /><br />
<img alt="竹筏水中流，漂流九曲溪" src="http://images.china.cn/attachement/jpg/site1000/20111216/001ec949fc8d1054fdf128.jpg" width="900" height="450" /><br />
<img alt="内蒙古大兴安岭牙克石凤凰山原始森林" src="http://images.china.cn/attachement/jpg/site1000/20111216/001ec949fc8d1054fdba27.jpg" width="900" height="450" />
</div>

浅谈前端开发工程师职业与发展

一直想写点关于前端开发职位本身的文字，但写了好几次都没发。最近和朋友聊起这个话题，对工作有些感想，零散的写多少算多少吧。

javascript 删除数组中重复的元素

<script type="text/javascript">
<!--
function unique(data){ 
	data = data || []; 
	var a = {}; 
	len = data.length; 
	for (var i=0; i<len;i++){ 
		var v = data[i]; 
		if (typeof(a[v]) == 'undefined'){ 
			a[v] = 1; 
		} 
	}; 
	data.length=0; 
	for (var i in a){ 
		data[data.length] = i; 
	} 
	return data; 
} 

function test(){ 
	var arr = [9,1,3,8,7,7,6,6,5,7,8,8,7,4,3,1]; 
	var arr1 = unique(arr); 
	alert(arr1.join(","));
} 
test();
-->
</script>

关于用户体验的一些总结

用户是没有错的，如果用户在使用某物品的时候遇到麻烦，那是因为设计出了问题。

拿什么提升你的搜索体验

搜索功能无处不在，各网站、浏览器、应用程序及各平台都有它的影子。搜索诞生于互联网信息爆炸的时代，以满足用户快速寻找目标信息的需求，表现形式可以十分简单却对数据库和实现技术有特别高要求。

互联网产品经理可以读的书

目前，互联网产品经理的社区很多，里面有海量的信息，如何修炼成为一名优秀的产品经理的经验也是林林种种，笔者也阅读不少，获益不少。今天，笔者并不是谈如何成为一名优秀的产品经理，成为优秀的产品经理只是第二步，入行才是第一步。笔者作为一个半路出家的人。谈谈入行产品经理所需做的准备。

web页面入门

开发页面在很多人眼里很简单，大部分的人都会说不就是把效果图变成网页嘛，哪里需要那么多的时间，一点技术含量都没有。确实html页面没有js那么多复杂的交互，也不需要和后台数据打交道，但并不能代表就没有技术含量，也不是人人都能做好的。页面结构好坏直接会影响到css代码的质量，也会影响 js和后台的开发，还会影响到以后功能的扩展和代码的优化。

取得IE版本的语法

<script type="text/javascript">
    var arVersion = navigator.appVersion.split("MSIE");
    var version = parseFloat(arVersion[1]);
    alert(version);
</script>

HTML5中文开发文档chm

HTML5　中文帮助文档 chm 带搜索目录功能

HTML5：Details元素

HTML5的Details标签难度：初级支持的浏览器：Chrome 12以上的版本我最喜欢的HTML5新标签是details元素，它刚刚被集成到Chrome最新的12版中。我将会在今天的快速入门中展示…

<html>
<head>
<meta charset="utf-8">
<title>现在只能在Google Chrome 浏览器下使用</title>
<style type="text/css">
<!--
body { font-family: sans-serif; }
details { overflow: hidden; background: #e3e3e3; margin-bottom: 10px; display: block; }
details summary { cursor: pointer; padding: 10px; }
details div { float: left; width: 65%; }
details div h3 { margin-top: 0; }
details img { float: left; width: 200px; padding: 0 30px 10px 10px; }
-->
</style>
</head>

<body>
<details>
  <summary>Dig Into Dojo</summary>
  <img src=”http://images.china.cn/attachement/jpg/site1000/20111208/001ec949fc8d104a444f50.jpg” alt=”Dojo” />
  <div>
    <h3> Dig into Dojo: DOM Basics </h3>
    <p>Maybe you saw that tweet: “jQuery is a gateway drug. It leads to full-on JavaScript usage.” Part of that addiction, I contend, is learning other JavaScript frameworks. And that’s what this four-part series on the incredible Dojo Toolkit is all about: taking you to the next level of your JavaScript addiction. </p>
  </div>
</details>
</body>
</html>

勿重复检测浏览器

拿添加事件示例

<script>
// 方式1
function addEvent(el, type, fn){
    if(el.addEventListener){
        el.addEventListener(type, fn, false);
    }else{
        el.attachEvent('on'+type, fn)
    }
}

// 方式2
var addEvent = document.addEventListener ?
    function(el, type, fn) {el.addEventListener(type, fn, false);} :
    function(el, type, fn) {el.attachEvent('on'+type, fn)};
</script>

JavaScript中链式调用之研习函数链

方法链一般适合对一个对象进行连续操作(集中在一句代码)。一定程度上可以减少代码量，缺点是它占用了函数的返回值。

<script>
function chain(obj){
    return function(){
        var Self = arguments.callee; Self.obj = obj;
        if(arguments.length==0){
            return Self.obj;
        }
        Self.obj[arguments[0]].apply(Self.obj,[].slice.call(arguments,1));
        return Self;
    }
}

function ClassB(){
    this.prop1 = null;
    this.prop2 = null;
    this.prop3 = null;
}
ClassB.prototype = {
    method1 : function(p1){
        this.prop1 = p1;
        alert(p1);
    },
    method2 : function(p2){
        this.prop2 = p2;
        alert(p2);
    },
    method3 : function(p3){
        this.prop3 = p3;
        alert(p3);
    }
}
var obj = new ClassB();
chain(obj)('method1',4)('method2',5)('method3',6); // obj -> prop1=4,prop2=5,prop3=6
</script>

JavaScript中链式调用之研习对象链

方法链一般适合对一个对象进行连续操作(集中在一句代码)。一定程度上可以减少代码量，缺点是它占用了函数的返回值。

<script>
function ClassA(){
    this.prop1 = null;
    this.prop2 = null;
    this.prop3 = null;
}
ClassA.prototype = {
    method1 : function(p1){
        this.prop1 = p1;
	alert(p1)
        return this;
    },
    method2 : function(p2){
        this.prop2 = p2;
	alert(p2)
        return this;
    },
    method3 : function(p3){
        this.prop3 = p3;
	alert(p3)
        return this;
    }
}
var obj = new ClassA();
obj.method1(1).method2(2).method3(3);
</script>

解决childNodes 兼容问题

Firefox的childNodes 把空白字符，换行什么的也算上了。

<div id="div">  
        <div>aa</div>
        <div>bb</div>
        <div>cc</div>
        <div>dd</div>
        <div>ee</div>
	<div>ff</div>
</div>
<script>
        //只ie可以,firefox下错误数据
	alert("ie:"+document.getElementById("div").childNodes.length);
        //firefox,ie都可以
        var nodeCount=0;
        for(var i=0;i<document.getElementById("div").childNodes.length;i++){
            if(document.getElementById("div").childNodes[i].nodeType == 1){
                nodeCount++;
	}
}
alert("ie,firefox:"+nodeCount);
</script>

JS创建类和对象的几种方式

目前使用最广泛的是混合的构造函数/原型方式。些外，动态原型方法也很流行，在功能上与前者等价，可以采用这两种方式中的任何一种。

总记录24条，每页20条，共2页，当前第1页，首页上一页 1 2 下一页尾页转到页

javascript实现飘动的广告

利用JavaScript创建随机数

JavaScript验证身份证号码

JavaScript操作Cookies包括添加，修改，删除

一直想写点关于前端开发职位本身的文字，但写了好几次都没发。最近和朋友聊起这个话题，对工作有些感想，零散的写多少算多少吧。

用户是没有错的，如果用户在使用某物品的时候遇到麻烦，那是因为设计出了问题。

搜索功能无处不在，各网站、浏览器、应用程序及各平台都有它的影子。搜索诞生于互联网信息爆炸的时代，以满足用户快速寻找目标信息的需求，表现形式可以十分简单却对数据库和实现技术有特别高要求。

取得IE版本的语法

HTML5 中文帮助文档 chm 带搜索目录功能

HTML5的Details标签 难度：初级 支持的浏览器：Chrome 12以上的版本 我最喜欢的HTML5新标签是details元素，它刚刚被集成到Chrome最新的12版中。我将会在今天的快速入门中展示…

拿添加事件示例

方法链一般适合对一个对象进行连续操作(集中在一句代码)。一定程度上可以减少代码量，缺点是它占用了函数的返回值。

方法链一般适合对一个对象进行连续操作(集中在一句代码)。一定程度上可以减少代码量，缺点是它占用了函数的返回值。

Firefox的childNodes 把空白字符，换行什么的也算上了。

目前使用最广泛的是混合的构造函数/原型方式。些外，动态原型方法也很流行，在功能上与前者等价，可以采用这两种方式中的任何一种。

HTML5　中文帮助文档 chm 带搜索目录功能

HTML5的Details标签难度：初级支持的浏览器：Chrome 12以上的版本我最喜欢的HTML5新标签是details元素，它刚刚被集成到Chrome最新的12版中。我将会在今天的快速入门中展示…