JS判断两个时间大小的示例代码,JavaScript原型链示例分享

复制代码 代码如下:

很多时候,美工会觉得默认的select下拉框很难看(特别是右侧的下拉箭头按钮),他们通常喜欢用一个自定义的图标来代替这个按钮。这样就只能用
js + div
来模拟了,倒腾了一番,用jQuery模拟了下,当然网上这种文章也不少,只是懒得去看找

如下所示:

<mce:script type=”text/javascript”><!–
/*
   每个对象实例都有个属性成员用于指向到它的instanceof
对象(暂称为父对象)的原型(prototype)
   我们把这种层层指向父原型的关系称为[原型链 prototype chian]
  
原型也具有父原型,因为它往往也是一个对象实例,除非我们人为地去改变它
   在JavaScript中,”一切都是对象,函数是第一型。”
   Function和Object都是函数的实例。
  
Function的父原型指向到Function的原型,Function.prototype的父原型是Object的原型
  
Object的父原型也指向到Function的原型,Object.prototype是所有父原型的顶层
   在spiderMonkey引擎中,父原型可以通过 __proto__ 进行访问
*/
Function.prototype.hi = function(){alert(‘hi Function’);}
Object.prototype.hi = function(){alert(‘hi Object’);}
var a = function(){
    this.txt = “a”;
}
a.prototype = {
    say:function(){alert(‘a’);}
}
alert(a instanceof Function);//a是Function的实例;
alert(a.__proto__ ===
Function.prototype);//a的父原型指向到Function的原型;
alert(Function instanceof Object);//Function是Object的实例;
alert(Function.__proto__ ===
Function.prototype);//Function的父原型指向到Function的原型;
alert(Function.prototype.__proto__ ===
Object.prototype);//Function的原型的父原型指向到Object的原型
alert(Object.__proto__ ===
Function.prototype);//Object的父原型指向到Function的原型;
alert(Object.prototype.__proto__);//Object的原型是所有父原型的顶端,它不再具有父原型;

复制代码 代码如下:

复制代码 代码如下:

alert(a.prototype instanceof Object);//a的原型也是一个对象
alert(a.prototype.__proto__ ===
Object.prototype);//a的原型的父原型指向Object的原型

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“;
<html xmlns=”;
<head>
    <meta http-equiv=”Content-Type” content=”text/html;
charset=gb2312″ />
    <title>自己实现的下拉框</title>
    <style type=”text/css” media=”all”>
       
*{font-size:12px;line-height:18px;list-style:none;padding:0;margin:0;text-decoration:none;color:#000;border:0}
        .page{text-align:center;margin:50px;}
        input{border-bottom:solid 1px #ccc;height:18px}             
       
.expand{display:none;position:absolute;width:200px;height:100px;overflow-y:auto;border:solid
1px #ccc};
  .expand li{margin:1px 0;background:#fff}
        .expand a{text-decoration:none;display:block;padding:0
5px;background:#efefef;margin:1px 0}
        .expand a:hover{background:#ff9}
    </style>
    <script type=”text/javascript”
src=”;
    <script type=”text/javascript”>

 function validTime(startTime,endTime){
       var arr1 = startTime.split(“-“);
       var arr2 = endTime.split(“-“);
       var date1=new
Date(parseInt(arr1[0]),parseInt(arr1[1])-1,parseInt(arr1[2]),0,0,0);
       var date2=new
Date(parseInt(arr2[0]),parseInt(arr2[1])-1,parseInt(arr2[2]),0,0,0);
       if(date1.getTime()>date2.getTime())
{                               
               alert(‘结束日期不能小于开始日期’,this);
               return false;
         }else{
             return true;
         }
         return false;
}

var A = function(){};
A.prototype = new a();
A.prototype.say = function(){
    alert(‘A’);
}
alert(A instanceof Function);//A是Function的实例
alert(A.__proto__ ===
Function.prototype);//A的父原型指向到Function的原型
alert(A.prototype instanceof a);//A的原型是a的实例
alert(A.prototype.__proto__ ===
a.prototype);//A的原型的父原型指向到a的原型

        function showExpand(targetId, expandId, expand_class) {
            //先关掉其它弹出的层
            if (expand_class != undefined) {
                $(“.” + expand_class).hide();
            }

您可能感兴趣的文章:

  • js判断日期时间有效性的方法
  • js
    判断所选时间(或者当前时间)是否在某一时间段的实现代码
  • extjs
    时间范围选择自动判断的实现代码
  • js判断选择时间不能小于当前时间的示例代码
  • js判断选择的时间是否大于今天的代码
  • 判断Session的过期时间
    采用JavaScript实时显示剩余多少秒
  • JS判断时间段的实现代码

var iA = new A();//iA是A的实例,iA.__proto__ === A.prototype
var iB = new a();//iB是a的实例,iB.__proto__ === a.prototype
iA.hi();
/*
iA本身没有hi方法(构造中没有,自己也没有定义过),
于是找iA.__proto__即A.prototype,也没有找到,
于是再找A.prototype.__proto__即a.prototype,仍然没有发现,
继续查找a.prototype.__proto__即Object.prototype,哇,发现了hi,于是调用它,停止查找
输出:hi Object
*/
iB.hi();
/*
iB本身没有hi方法(构造中没有,自己也没有定义过),
于是找iB.__proto__即a.prototype,仍然没有发现,
继续查找a.prototype.__proto__即Object.prototype,哇,发现了hi,于是调用它,停止查找
输出:hi Object
*/
a.hi();
/*
a本身没有hi方法(构造中没有,自己也没有定义过),
于是找a.__proto__既Function.prototype,哇,发现了hi,于是调用它,停止查找
输出:hi Function
*/
iA.say();
/*
iA本身没有say方法(构造中没有,自己也没有定义过),
于是找iA.__proto__即A.prototype,哇,发现了say,于是调用它,停止查找
所以,这里调用的是A.prototype.say
输出:A
*/
iB.say();
/*
iB本身没有say方法(构造中没有,自己也没有定义过),
于是找iB.__proto__即a.prototype,哇,发现了say,于是调用它,停止查找
所以,这里调用的是a.prototype.say
输出:a
*/
iA.bad();
/*
iA本身没有bad方法(构造中没有,自己也没有定义过),
于是找iA.__proto__即A.prototype,也没有找到,
于是再找A.prototype.__proto__即a.prototype,仍然没有发现,
继续查找a.prototype.__proto__即Object.prototype,终于是找不到了,停止查找
返回错误,iA.bad不是一个function
*/
// –></mce:script>

            //判断是否为IE
            var isIE = (! +[1, ]);

</script>

            var expand = $(“#” + expandId);
            var target = $(“#” + targetId);

感谢simon提出的修正意见!所有实例在查找属性方法时不会去查找自己的prototype(实例的prototype不在原型链内,只能作为一个属性)!

            var dx = 0;
            if (isIE) {
                dx = -2;
            }
            else {
                dx = 0;
            }
            expand.get(0).style.left =
target.get(0).getBoundingClientRect().left + dx + “px”;
            if (isIE) {
                dx = 17;
            }
            else {
                dx = 19;
            }
            expand.get(0).style.top =
parseInt(target.get(0).getBoundingClientRect().top) + dx + “px”;
            expand.show();

发表评论

电子邮件地址不会被公开。 必填项已用*标注

标签:
网站地图xml地图