xml地图|网站地图|网站标签 [设为首页] [加入收藏]

您的位置:亚洲必赢 > 计算机尝试 > 必赢亚洲娱乐平台:用javascript面向对象的方式制

必赢亚洲娱乐平台:用javascript面向对象的方式制

发布时间:2019-09-20 20:13编辑:计算机尝试浏览(192)

    谈到js的面向对象,就只可以提到prototype那个js内置属性了(注意:这里的prototype可不是prototype.js),它的效果便是足以动态的向八个指标(object)加多某种属性。作者现在要做的正是硬着头皮的让代码达到公用,像承接啦之类的。好了,这几个就相当的少说了,对prototype不驾驭的能够搜寻下有关内容。

    出于自己从前是.net技师,所以就算现行在做前端,也习贯于用面向对象的艺术编写js脚本,小编想只要您从前也是要么今后依然名第三代技师的话,应该对此并不素不相识。

    javascript弹出窗口实当代码,javascript弹出窗口

    许多网页都落到实处了弹出窗口,使用方面,特别的人性化,本文就大家介绍javascript达成弹出窗口特效,具体代码如下:

    <!DOCTYPE html>
    <html>
    <head lang="en">
    <meta charset="UTF-8">
    <title>弹出窗口</title>
    <script src="js/jquery-1.11.1.js"></script>
    <style>
    *{
     margin: 0;
     padding: 0;
    }
    div{
     margin: 0 auto;
     /*border: 1px solid red;*/
    }
    .overBg{
     width: 100%;
     height: 100%;
     background: gray;
     opacity: 0.5;
     filter: alpha(opacity=50);
     position: fixed;
     top:0;
     z-index: 300;
    }
    .tc-con{
     width: 200px;
     height: 200px;
     padding: 30px;
     background: blanchedalmond;
     position: fixed;
     top: 0;
     z-index: 1000;
    }
    </style>
    <script>
     $(function(){
      $('.tc').hide();
      $('.btn').click(function(){
       $('.tc').show();
      })
      $('.tc').click(function(){
       $(this).hide();
      })
     })
    </script>
    </head>
    <body>
    <div class="btn">点击出现</div>
    <div class="tc">
     <div class="overBg"></div>
     <div class="tc-con" id="tc-con">22</div>
     <script>
      var a=document.getElementById('tc-con');
      a.style.left=(document.body.clientWidth/2- a.clientWidth/2) 'px';
      a.style.top=(document.documentElement.clientHeight/2- a.clientHeight/2) 'px';
     </script>
    </div>
    <div style="height:2000px">22</div>
    </body>
    </html><!DOCTYPE html>
    <html>
    <head lang="en">
    <meta charset="UTF-8">
    <title>弹出窗口</title>
    <script src="js/jquery-1.11.1.js"></script>
    <style>
    *{
     margin: 0;
     padding: 0;
    }
    div{
     margin: 0 auto;
     /*border: 1px solid red;*/
    }
    .overBg{
     width: 100%;
     height: 100%;
     background: gray;
     opacity: 0.5;
     filter: alpha(opacity=50);
     position: fixed;
     top:0;
     z-index: 300;
    }
    .tc-con{
     width: 200px;
     height: 200px;
     padding: 30px;
     background: blanchedalmond;
     position: fixed;
     top: 0;
     z-index: 1000;
    }
    </style>
    <script>
     $(function(){
      $('.tc').hide();
      $('.btn').click(function(){
       $('.tc').show();
      })
      $('.tc').click(function(){
       $(this).hide();
      })
     })
    </script>
    </head>
    <body>
    <div class="btn">点击出现</div>
    <div class="tc">
     <div class="overBg"></div>
     <div class="tc-con" id="tc-con">22</div>
     <script>
      var a=document.getElementById('tc-con');
      a.style.left=(document.body.clientWidth/2- a.clientWidth/2) 'px';
      a.style.top=(document.documentElement.clientHeight/2- a.clientHeight/2) 'px';
     </script>
    </div>
    <div style="height:2000px">22</div>
    </body>
    </html>
    

    效果图:

    必赢亚洲娱乐平台 1

    如上便是为我们享受的javascript弹出窗口完成代码,希望对大家的读书抱有帮忙。

    比比较多网页都完结了弹出窗口,使用方面,特别的人性化,本文就大家介绍javascript达成弹出窗口...

    后日要做的是点击一个html成分让其弹出贰个和睦的对话框来,首先要旗帜明显两点,一点是自身或许会大批量的利用这种方法,以至不期望出现系统的alert或confirm,第二点正是弹出的剧情尽量的能够各个化,以至足以自定义。分明这两点后,大家就能够写js代码了,都以些很初级的事物,假设您要鄙视的话就尽情的鄙视自个儿吗!^.^

    谈起js的面向对象,就只能提到prototype这些js内置属性了(注意:这里的prototype可不是prototype.js),它的功能正是足以动态的向一个指标(object)增加某种属性。笔者以往要做的正是尽量的让代码到达公用,像承袭啦之类的。好了,这么些就十分少说了,对prototype不打听的能够查找下有关内容。

    首先定义贰个简易的目的:

    明天要做的是点击三个html成分让其弹出叁个团结的对话框来,首先要分明两点,一点是本人或然会大方的应用这种办法,以致不期望出现系统的alert或confirm,第二点正是弹出的开始和结果尽量的可以各个化,以至足以自定义。显明这两点后,我们就可以写js代码了,都是些很初级的东西,即使您要鄙视的话就尽情的蔑视本人吧!^.^

    复制代码 代码如下:

    先是定义三个简短的靶子:
    function objDIV() {
    this.bgdiv ;
    this.infodiv ;
    }
    第一,大家愿意弹出二个遮罩层,小编给它命名openBackDiv();

    function objDIV() {
    this.bgdiv ;
    必赢亚洲娱乐平台:用javascript面向对象的方式制作弹出层,javascript面向对象的方式实现的弹出层效果代码。this.infodiv ;
    }

    function openBackDiv(txbdiv) {
    txbdiv.bgdiv = document.createElement("div");
    txbdiv.bgdiv.setAttribute("id", "overDiv");
    txbdiv.bgdiv.innerHTML = "<iframe frameborder="no" class="overPanel" id="ifrover"></iframe>";

    第一,大家期望弹出一个遮罩层,小编给它命名openBackDiv();

    }
    再正是,把它增添到刚刚定义的对象的prototype里去(openBG()):

    复制代码 代码如下:

    objDIV.prototype.openBG = function() {
    openBackDiv(this);
    document.body.appendChild(this.bgdiv);
    this.bgdiv.style.display = "block";
    this.bgdiv.style.width = document.documentElement.clientWidth "px";
    this.bgdiv.style.height = document.documentElement.scrollHeight "px";
    }

    function openBackDiv(txbdiv) {
    txbdiv.bgdiv = document.createElement("div");
    txbdiv.bgdiv.setAttribute("id", "overDiv");
    txbdiv.bgdiv.innerHTML = "<iframe frameborder="no" class="overPanel" id="ifrover"></iframe>";

    再不怕增加弹出音讯层的艺术,和方面同样做就行了。所以才说这一个是很基础的事物,好像真的没啥好说的,直接上代码吧!

    }

    那是二个正在加载的弹出层,有一点点粗糙. function openLoadDiv(txbdiv) {
    txbdiv.infodiv = document.createElement("div");
    txbdiv.infodiv.setAttribute("id", "div_info");
    txbdiv.infodiv.innerHTML = "<div style=" line-height:1.5;background:url(../images/tips-top-bg.gif) repeat-x; height:54px; text-align:center;"><img border="0" src="../images/xtts.gif" /></div><div style='padding:20px; font-size:14px; color:#b44201;'><div style='width:100px; float:left;margin:60px 0 0 60px; height:80px;'><img src='/images/business/loading.gif' width='100px' height='100' border='0'/></div><div style='float:left; width:250px;margin:90px 0 0 20px;'><p>请稍等,正在管理中...</p></div></div></div>";
    document.body.appendChild(txbdiv.infodiv);
    txbdiv.infodiv.style.width = "550px";
    txbdiv.infodiv.style.height = "270px";
    txbdiv.infodiv.style.fontSize = "14px";
    txbdiv.infodiv.style.position = "absolute";
    txbdiv.infodiv.style.background = "#fff";
    txbdiv.infodiv.style.zIndex = "9999";
    centerobject();//居中的方法
    }

    何况,把它增加到刚刚定义的对象的prototype里去(openBG()):

    objDIV.prototype.openLoading = function() { this.openBG(); openLoadDiv(this); }

    本文由亚洲必赢发布于计算机尝试,转载请注明出处:必赢亚洲娱乐平台:用javascript面向对象的方式制

    关键词: 必赢亚州网址