// JavaScript Document

//如何在一个网站或者一个页面,去书写你的JS代码:

//1.js的分层(功能) : jquery(tools)  组件(ui)  应用(app), mvc(backboneJs)
//2.js的规划(管理) : 避免全局变量和方法(命名空间,闭包,面向对象) , 模块化(seaJs,requireJs)

window.onload = function(){
    mv.app.toTip();
    mv.app.toBanner();
    mv.app.toSel();
    mv.app.toRun();
};

var mv = {};  //命名空间

mv.tools = {};

mv.tools.getByClass = function(oParent,sClass){
    var aEle = oParent.getElementsByTagName('*');
    var arr = [];

    for(var i=0;i<aEle.length;i++){
        if(aEle[i].className == sClass){
            arr.push(aEle[i]);
        }
    }

    return arr;
};

mv.tools.getStyle = function(obj,attr){
    if(obj.currentStyle){
        return obj.currentStyle[attr];
    }
    else{
        return getComputedStyle(obj,false)[attr];
    }
};

mv.ui = {};

mv.ui.textChange = function(obj,str){

    obj.onfocus = function(){
        if(this.value == str){
            this.value = '';
        }
    };

    obj.onblur = function(){
        if(this.value == ''){
            this.value = str;
        }
    };

};

mv.ui.fadeIn = function(obj){

    var iCur = mv.tools.getStyle(obj,'opacity');
    if(iCur==1){ return false; }

    var value = 0;
    clearInterval(obj.timer);
    obj.timer = setInterval(function(){
        var iSpeed = 5;
        if(value == 100){
            clearInterval(obj.timer);
        }
        else{
            value += iSpeed;
            obj.style.opacity = value/100;
            obj.style.filter = 'alpha(opacity='+value+')';
        }
    },30);

};

mv.ui.fadeOut = function(obj){

    var iCur = mv.tools.getStyle(obj,'opacity');
    if(iCur==0){ return false; }

    var value = 100;
    clearInterval(obj.timer);
    obj.timer = setInterval(function(){
        var iSpeed = -5;
        if(value == 0){
            clearInterval(obj.timer);
        }
        else{
            value += iSpeed;
            obj.style.opacity = value/100;
            obj.style.filter = 'alpha(opacity='+value+')';
        }
    },30);

};

mv.ui.moveLeft = function(obj,old,now){

    clearInterval(obj.timer);
    obj.timer = setInterval(function(){

        var iSpeed = (now - old)/10;
        iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);

        if(now == old){
            clearInterval(obj.timer);
        }
        else{
            old += iSpeed;
            obj.style.left = old + 'px';
        }

    },30);

};

mv.app = {};

mv.app.toTip = function(){
    var oText1 = document.getElementById('text1');
    var oText2 = document.getElementById('text2');

    mv.ui.textChange(oText1,'Search website');
    mv.ui.textChange(oText2,'Search website');

};

mv.app.toBanner = function(){
    var oDd = document.getElementById('ad');
    var aLi = oDd.getElementsByTagName('li');

    var oPrevBg = mv.tools.getByClass(oDd,'prev_bg')[0];
    var oNextBg = mv.tools.getByClass(oDd,'next_bg')[0];

    var oPrev = mv.tools.getByClass(oDd,'prev')[0];
    var oNext = mv.tools.getByClass(oDd,'next')[0];

    var iNow = 0;

    var timer = setInterval(auto,3000);

    function auto(){

        if(iNow == aLi.length-1){
            iNow = 0;
        }
        else{
            iNow++;
        }

        for(var i=0;i<aLi.length;i++){
            mv.ui.fadeOut(aLi[i]);
        }

        mv.ui.fadeIn(aLi[iNow]);

    }

    function autoPrev(){

        if(iNow == 0){
            iNow = aLi.length-1;
        }
        else{
            iNow--;
        }

        for(var i=0;i<aLi.length;i++){
            mv.ui.fadeOut(aLi[i]);
        }

        mv.ui.fadeIn(aLi[iNow]);

    }

    oPrevBg.onmouseover = oPrev.onmouseover = function(){
        oPrev.style.display = 'block';
        clearInterval(timer);
    };

    oNextBg.onmouseover = oNext.onmouseover = function(){
        oNext.style.display = 'block';
        clearInterval(timer);
    };

    oPrevBg.onmouseout = oPrev.onmouseout = function(){
        oPrev.style.display = 'none';
        timer = setInterval(auto,3000);
    };

    oNextBg.onmouseout = oNext.onmouseout = function(){
        oNext.style.display = 'none';
        timer = setInterval(auto,3000);
    };

    oPrev.onclick = function(){
        autoPrev();
    };

    oNext.onclick = function(){
        auto();
    };

};

mv.app.toSel = function(){
    var oSel = document.getElementById('sel1');
    var aDd = oSel.getElementsByTagName('dd');
    var aUl = oSel.getElementsByTagName('ul');
    var aH2 = oSel.getElementsByTagName('h2');

    for(var i=0;i<aDd.length;i++){
        aDd[i].index = i;
        aDd[i].onclick = function(ev){
            var ev = ev || window.event;
            var This = this;

            for(var i=0;i<aUl.length;i++){
                aUl[i].style.display = 'none';
            }

            aUl[this.index].style.display = 'block';

            document.onclick = function(){
                aUl[This.index].style.display = 'none';
            };

            ev.cancelBubble = true;

        };

    }

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

        aUl[i].index = i;

        (function(ul){

            var aLi = ul.getElementsByTagName('li');

            for(var i=0;i<aLi.length;i++){
                aLi[i].onmouseover = function(){
                    this.className = 'active';
                };
                aLi[i].onmouseout = function(){
                    this.className = '';
                };
                aLi[i].onclick = function(ev){
                    var ev = ev || window.event;
                    aH2[this.parentNode.index].innerHTML = this.innerHTML;
                    ev.cancelBubble = true;
                    this.parentNode.style.display = 'none';
                };
            }

        })(aUl[i]);
    }

};

mv.app.toRun = function(){
    var oRun = document.getElementById('run1');
    var oUl = oRun.getElementsByTagName('ul')[0];
    var aLi = oUl.getElementsByTagName('li');

    var oPrev = mv.tools.getByClass(oRun,'prev')[0];
    var oNext = mv.tools.getByClass(oRun,'next')[0];

    var iNow = 0;

    oUl.innerHTML += oUl.innerHTML;

    oUl.style.width = aLi.length * aLi[0].offsetWidth + 'px';

    oPrev.onclick = function(){

        if(iNow == 0){
            iNow = aLi.length/2;
            oUl.style.left = -oUl.offsetWidth/2 + 'px';
        }

        mv.ui.moveLeft(oUl,-iNow*aLi[0].offsetWidth,-(iNow-1)*aLi[0].offsetWidth);

        iNow--;

    };

    oNext.onclick = function(){

        if(iNow == aLi.length/2){
            iNow = 0;
            oUl.style.left = 0;
        }

        mv.ui.moveLeft(oUl,-iNow*aLi[0].offsetWidth,-(iNow+1)*aLi[0].offsetWidth);

        iNow++;

    };

};

如何在一个网站或者一个页面,去书写你的JS代码的更多相关文章

  1. 如何在一个网站或者一个页面规划JS

    规划主要分为两部分:1.JS的分层,2.Js的规划 1.JS的分层(功能) 1-1.底层的库 : jquery  1-2.组件(ui) : 比如拖拽等,模块之间没有必然的联系,可以重复利用  1-3. ...

  2. Js 日期选择,可以的一个页面中重复使用本JS日历,兼容IE及火狐等主流浏览器,而且界面简洁、美观,操作体验也不错。

    <html> <head> <title>Js日期选择器并自动加入到输入框中</title> <meta http-equiv="con ...

  3. 基于jquery的从一个页面跳转到另一个页面的指定位置的实现代码

    比如 想跳到 mao.aspx 的页面 的div id="s" 的位置 那么 只用<a href="mao.aspx#s"> 就可实现跳转到指定位置 ...

  4. 常见的页面效果,相关的js代码

    1.焦点图 $(document).ready(function(){ var i=0; var autoChange= setInterval(function(){ if(i<$(" ...

  5. 页面怎么引用外部css+js代码

    外部css样式:把css样式写到一个文件内,方便使用,减少冗余. 如果使用的是外部css样式,页面怎么引用: 使用 <link rel="stylesheet" type=& ...

  6. 检测一个页面所用的时间的js

    window.onload = function () { var loadTime = window.performance.timing.domContentLoadedEventEnd-wind ...

  7. jquery实现页面控件拖动效果js代码

    ;(function($) { var DragPanelId = "divContext"; var _idiffx = 0; var _idiffy = 0; var _Div ...

  8. html页面控制字体大小的js代码

    dom对象控制显示文章字体大小的js代码 <head> <script type="text/javascript"> function check(siz ...

  9. 记录一个在线压缩和还原压缩js代码的工具

    packer – javascript 压缩工具 http://dean.edwards.name/packer/ Javascript Beautifier ---可以恢复某些压缩工具压缩的js代码 ...

随机推荐

  1. Kicad中批量添加过孔

    布线按V即可插入过孔,但在铺铜,或大电流走线时,有时需要手动添加一些过孔. 但Kicad里面并没有这样的菜单,最后搜索到,要添加过孔时,需要先建立一个单过孔的封装. 然后插入这个封装到PCB.然后修改 ...

  2. 基于UDP协议的控制台聊天

    这几天学了java的网络编程弄出一个基于UDP协议的聊天工具 功能 添加并且备注好友(输入对方的ip) 删除好友 查看好友列表 用java写的控制台程序导出可执行程序后不能双击打开 还需要些一个脚本文 ...

  3. Linux 文件权限总结

    在 Linux 中最基本的任务之一就是设置文件权限.理解它们是如何实现的是你进入 Linux 世界的第一步.如您所料,这一基本操作在类 UNIX 操作系统中大同小异.实际上,Linux 文件权限系统就 ...

  4. Spark history-server 配置 !运维人员的强大工具

    spark  history Server产生背景 以standalone运行模式为例,在运行Spark Application的时候,Spark会提供一个WEBUI列出应用程序的运行时信息:但该WE ...

  5. 399. Evaluate Division

    图像题,没觉得有什么简单的办法,貌似可以用Union Find来解. 感觉有2种思路,一种是先全部构建好每2个点的weight,然后直接遍历queires[][]来抓取答案. 一种是只构建简单的关系图 ...

  6. Java多线程小结

    简述 Java是支持多线程编程的语言,线程相比于进程更加轻量级,线程共享相同的内存空间,但是拥有独立的栈.减少了进程建立.销毁的资源消耗.jdk1.5后对java的多线程编程提供了更完善的支持,使得j ...

  7. Find发帖水王哥

    Find发帖水王 传说贴吧有一大“水王”,他不但喜欢发帖,还会回复其他ID发的每个帖子.坊间风闻该“水王”发帖数目超过了帖子总数的一半.如果你有一个当前论坛上所有帖子(包括回帖)的列表,其中帖子作者的 ...

  8. leetcode第一刷_Triangle

    非常easy的一道DP,看到空间限制是O(N)的,不要习惯性的以为是要保存每一行的最小值,不难想到是要保存一行其中各个数为路径终点时的和的大小.当算到最后一行时,就是从顶部究竟部以这个底部位置为终点的 ...

  9. 【iOS-Android开发对照】 之 APP入口

    [iOS-Android开发对照]之 APP入口 [图片 Android vs iOS] 提纲 对照分析iOS,Android的入口, iOS,Android的界面单元 为什么要有那样的生命周期 继承 ...

  10. MFC 一个类訪问还有一个类成员对象的成员变量值

    作者:卿笃军 原文地址:http://blog.csdn.net/qingdujun/article/details/35263857 MFC中一个类要訪问另外一个类的的对象的成员变量值,这就须要获得 ...