2021.8.11今日小结

今天使用JavaScript做了轮播图,二级菜单,定时器图片切换动画。

今天也算是把几个基本的效果了解了,JavaScript的基本的语法,函数,对象也有了一定的了解了。后续还需要去练习来加深印象。

下面是轮播图的java代码,其中引入了自定义的函数。

<script type="text/javascript">
    window.onload = function(){
        
        let imgList = document.getElementById("imgList");
        let imgArr = document.getElementsByTagName("img");
        // 设置ul的整体宽度
        imgList.style.width = 820*imgArr.length+"px";
        // 设置导航按钮居中
        let navDiv = document.getElementById("navDiv");
        let outer = document.getElementById("outer");
        navDiv.style.left = (outer.offsetWidth - navDiv.offsetWidth)/2 + "px";

        // 默认显示图片的索引
        let index =0;
        // 获取所有a
        let allA = document.getElementsByTagName("a");
        // 设置默认选中效果
        allA[index].style.backgroundColor = "black";

        // 点击超链接切换图片
        for(let i=0;i<allA.length;i++){
            // 为每个超链接都添加一个num属性
            allA[i].num = i;

            allA[i].onclick = function(){
                //关闭自动切换的定时器
                clearInterval(timer);
                // 获取点击超链接的索引,并设置为index
                index = this.num;
                // 切换图片
                //imgList.style.left = -820*index+"px";
                
                setA();
                // 调用自定义的函数切换动画
                move(imgList, "left" , -820*index , 20 , function(){
                    // 重新开启自动切换图片
                    autoChange();
                });
            };
        }

        // 自动切换图片
        autoChange();

        // 创建一个方法来设置选中的a
        function setA(){
            // 判定当前索引是否是最后一张图片
            if(index >= imgArr.length -1){
                index =0;

                // 通过css将最后一张图片换成第一张
                imgList.style.left = 0;
            }
            
            for(let i=0;i<allA.length;i++){
                allA[i].style.backgroundColor = "";
            }

            allA[index].style.backgroundColor = "black";
        };
        
        // 定义一个自动切换的标识
        var timer;
        // 创建一个函数来开启自动切换图片
        function autoChange(){

            
            // 开启一个定时器
            timer = setInterval(function(){
                // 索引自增
                index++;
                // 判定index的值
                index %= imgArr.length;
                
                move(imgList, "left" , -820*index , 20 , function(){
                    setA();
                });
            },3000);
        };
    };
</script>

下面是自定义的函数

/*
 * 可以用来获取任意的样式
 */
function getStyle(obj, name) {

    return window.getComputedStyle && getComputedStyle(obj, null)[name] || obj.currentStyle[name];
}

/*
 * 提取出一个函数,可以处理一些简单的动画效果
 * 参数:
 *         obj: 要执行动画的元素
 *         attr: 执行动画是要修改的属性
 *         target: 执行动画的目标位置
 *         speed: 执行动画的速度
 *         callback: 回调函数,这个函数将会在动画执行完毕之后被调用
 */
function move(obj, attr, target, speed, callback) {
    //开启定时器前,关闭上一个
    /*
     * 这里我们的timer是一个全局变量,所有的动画执行时,都会共享同一个timer
     *     这样将会导致我们执行box2的动画时,会使box1的动画也立即终止
     *     所以我们定时器的标识不能作为全局变量保存,而应该保存到要执行动画的对象上
     */
    clearInterval(obj.timer);

    //获取当前值,动画执行的起始位置
    var current = parseInt(getStyle(obj, attr));
    //起始位置   大于  目标位置 speed为负
    //起始位置  小于 目标位置 speed为正
    if(current > target) {
        //此时speed应该是负数
        speed = -speed;
    }

    //开启一个定时器,用来移动box1
    obj.timer = setInterval(function() {
        //获取box1的left属性值
        var oldValue = parseInt(getStyle(obj, attr));
        //修改值
        var newValue = oldValue + speed;
        //如果newValue大于800
        //如果向右移动,则newValue > target  speed为正
        //如果向左移动,则newValue < target  speed为负
        if(speed > 0 && newValue > target || speed < 0 && newValue < target) {
            newValue = target
        }
        //将其赋值给box1
        obj.style[attr] = newValue + "px";
        //当运行800px时,停止执行动画
        if(newValue == target) {
            clearInterval(obj.timer);
            //动画执行完毕,调用回调函数
            callback && callback();

        }

    }, 10);
}

 

二级菜单是利用类的操作来执行的

下面是自定义的函数

/*
 * 定义一个函数,专门用来为一个元素添加class属性值
 * 参数
 *     obj 要添加class属性的元素
 *     cn 要添加的class的值
 *     
 */
function addClass(obj, cn) {

    //判断obj中是否含有cn这个class
    if(!hasClass(obj, cn)) {
        obj.className += " " + cn;
    }

}

/*
 * 判断一个对象中是否含有指定的class属性
 *     参数:
 *         obj:要检查的对象
 *         cn:要检查class值
 * 如果对象中具有该class则返回true,否则返回false
 */
function hasClass(obj, cn) {

    //检查obj中是否与b2这个class
    //var reg = /\bb2\b/;
    var reg = new RegExp("\\b" + cn + "\\b");

    return reg.test(obj.className);

}

/*
 * 删除一个元素中的class
 */
function removeClass(obj, cn) {

    //创建一个正则表达式
    var reg = new RegExp("\\b" + cn + "\\b");

    //将class属性中符合正则表达式的内容,替换为空串
    obj.className = obj.className.replace(reg, "");

}

/*
 * 切换一个元素的class属性值
 *     如果有,则删除
 *     如果没有,则添加
 */
function toggleClass(obj, cn) {
    //判断obj中是否有cn
    if(hasClass(obj, cn)) {
        //如果有,则删除
        removeClass(obj, cn);
    } else {
        //如果没有,则添加
        addClass(obj, cn);
    }
}

下面是二级菜单的javascript代码

<script type="text/javascript">
            window.onload = function(){
                //获取所有的class为menuSpan的元素
                var menuSpan = document.querySelectorAll(".menuSpan");
                
                //定义一个变量,来保存当前打开的菜单
                var openDiv = menuSpan[0].parentNode;
                
                //为span绑定单击响应函数
                for(var i=0 ; i<menuSpan.length ; i++){
                    menuSpan[i].onclick = function(){
                        
                        //this代表我当前点击的span
                        //获取当前span的父元素
                        var parentDiv = this.parentNode;
                        
                        //切换菜单的显示状态
                        toggleMenu(parentDiv);
                        
                        
                        //判断openDiv和parentDiv是否相同
                        if(openDiv != parentDiv  && !hasClass(openDiv , "collapsed")){
                            //切换菜单的显示状态
                            toggleMenu(openDiv);
                        }
                        
                        //修改openDiv为当前打开的菜单
                        openDiv = parentDiv;
                        
                    };
                }
                
                /*
                 * 用来切换菜单折叠和显示状态
                 */
                function toggleMenu(obj){
                    //在切换类之前,获取元素的高度
                    var begin = obj.offsetHeight;
                    
                    //切换parentDiv的显示
                    toggleClass(obj , "collapsed");
                    
                    //在切换类之后获取一个高度
                    var end = obj.offsetHeight;
                    
                    //动画效果就是将高度从begin向end过渡
                    //将元素的高度重置为begin
                    obj.style.height = begin + "px";
                    
                    //执行动画,从bengin向end过渡
                    move(obj,"height",end,10,function(){
                        //动画执行完毕,内联样式已经没有存在的意义了,删除之
                        obj.style.height = "";
                    });
                        
                }
                
                
            };
        </script>

 

posted @ 2021-08-11 19:00  Private!  阅读(31)  评论(0编辑  收藏  举报