【JavaWeb学习】JavaScript（练习）

Garcia • Kirlant

已于 2022-05-29 16:33:32 修改

阅读量147

点赞数 1

分类专栏： web前端学习文章标签： javascript 学习前端

于 2022-05-25 15:29:16 首次发布

本文链接：https://blog.csdn.net/WingNebula/article/details/124967095

版权

web前端学习专栏收录该内容

25 篇文章 1 订阅

订阅专栏

1. 轮播图

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <!-- 令视口为完美视口 -->
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>大秦帝国</title>
        <link rel="shortcut icon" href="./imgs/kirlant.ico">
        <link rel="stylesheet" href="./baseCSS/reset.css">
        <link rel="stylesheet" href="./css/all.css">
        <link rel="stylesheet" href="./learn.css">
    </head>
    <body id="body">
        <!-- 外部div -->
        <div id="outer">
            <!-- 图片 -->
            <ul id="imgList">
                <li><img src="./imgs/bf_3.jpg"></li>
                <li><img src="./imgs/ssm_3.jpg"></li>
                <li><img src="./imgs/xh_3.jpg"></li>
                <li><img src="./imgs/bf_3.jpg"></li>
            </ul>
            <!-- 导航条 -->
            <div id="navDiv">
                <a href="javascript:;"></a>
                <a href="javascript:;"></a>
                <a href="javascript:;"></a>
            </div>
        </div>
        <script type="text/javascript" src="./learn.js"></script>
    </body>
</html>

@imgEdge: 253px;
@blankEdge: 10px;
body {
    // 图片大小 253 × 253
    #outer{
        width: @imgEdge + @blankEdge*2;
        height: @imgEdge;
        margin: 50px auto;
        padding: @blankEdge 0;
        background-color: aliceblue;
        position: relative;
        overflow: hidden;
        #imgList{
            list-style: none;
            position: absolute;
            left: 0;
            li{
                float: left;
                margin: 0 @blankEdge;
            }
        }
        #navDiv{
            position: absolute;
            bottom: 15px;
            transition-duration: 1s;
            a{
                float: left;
                width: @blankEdge;
                height: @blankEdge;
                background-color: rgb(151, 187, 241);
                margin: 0 2px;
                // 透明
                opacity: 0.7;
            }
            a:hover{
                background-color: rgb(33, 57, 95);
            }
        }
    }
}

var divOuter = document.getElementById("outer");
var ulList = document.getElementById("imgList");
var imgs = document.getElementsByTagName("img");
var navBar = document.getElementById("navDiv");
var navBlock = document.getElementsByTagName("a");
var imgListWidth = 273 * imgs.length; // 每向左移动273px，显示下一张图片
ulList.style.width = imgListWidth + "px";
navBar.style.left = (273 - 14*navBlock.length)/2 + "px";
var index = 0; // 默认显示图片的索引
navBlock[index].style.backgroundColor = "#21395f";
// 点击超链接切换图片
var timerAuto;
for(var i=0; i<navBlock.length; ++i){
    // 为每个超链接添加索引
    navBlock[i].idx = i;
    navBlock[i].onclick = function(){
        clearInterval(timerAuto);
        index = this.idx;
        move(ulList, 20, -273*index, "left", 20, function(){
            setNavBlockColor();
            autoChange();
        });
    }
}
// 开启自动切换
autoChange();

function getStyle(obj, name){
	if(window.getComputedStyle){
		return getComputedStyle(obj, null)[name];
	}else{
		return obj.currentStyle[name];
	}
};
function move(obj, speed, target, dir, t, callback=function(){}){
    clearInterval(obj.timer);
    // 开启一个定时器来控制div移动方向
    obj.timer = setInterval(function(){
        var oldPos = parseInt(getStyle(obj, dir));
        var useSpeed;
        if(target < oldPos){
            useSpeed = -speed;
        }else{
            useSpeed = speed;
        }
        var newPos = oldPos + useSpeed;
        if((useSpeed>0 && newPos >= target)||(useSpeed<0 && newPos <= target)){
            newPos = target;
        }
        obj.style[dir] = newPos + "px";
        if(newPos == target){
            clearInterval(obj.timer);
            callback();
        }
    },t);
};
// 修改导航块的颜色
function setNavBlockColor(){
    // 如果已经显示到了最后一张图片，那么迅速切换回第一张
    if(index == navBlock.length){
        index = 0;
        ulList.style.left = 0;
    }
    for(var i=0; i<navBlock.length; ++i){
    // 去掉内联样式，而是使用css设置的颜色样式
        navBlock[i].style.backgroundColor = "";
    }
    navBlock[index].style.backgroundColor = "#21395f";
};
// 自动切换
function autoChange(){
    // 开启一个定时器用来自动切换图片
    timerAuto = setInterval(function(){ 
        ++index; // 图片索引自增
        index %= imgs.length;
        move(ulList, 20, -273*index, "left", 20, function(){setNavBlockColor();});
    }, 3000);
};

2. 二级菜单

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <!-- 令视口为完美视口 -->
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>大秦帝国</title>
        <link rel="shortcut icon" href="./imgs/kirlant.ico">
        <link rel="stylesheet" href="./baseCSS/reset.css">
        <link rel="stylesheet" href="./css/all.css">
        <link rel="stylesheet" href="./learn.css">
    </head>
    <body>
        <div class="sdmenu" id="my_menu">
            <div class="collapsed">
                <span class="menuSpan">在线工具</span>
                <a href="#">图像优化</a>
                <a href="#">收藏夹图标生成器</a>
                <a href="#">邮件</a>
                <a href="#">htaccess密码</a>
                <a href="#">梯度图像</a>
                <a href="#">按钮生成器</a>
            </div>
            <div class="collapsed">
                <span class="menuSpan">支持我们</span>
                <a href="#">推荐我们</a>
                <a href="#">连接我们</a>
                <a href="#">网络资源</a>
            </div>
            <div class="collapsed">
                <span class="menuSpan">合作伙伴</span>
                <a href="#">JavaScript工具包</a>
                <a href="#">CSS驱动</a>
                <a href="#">CodingForms</a>
                <a href="#">CSS例子</a>
            </div>
        </div>
        <script type="text/javascript" src="./yytTools.js"></script>
        <script type="text/javascript" src="./learn.js"></script>
    </body>
</html>

// 获取所有能展开的框框的对象
var menuSpan = document.querySelectorAll(".menuSpan");
var nums = menuSpan.length;
// 记录当前打开的菜单, 初始化打开状态
var openSpan = menuSpan[0];
toggleClass(openSpan.parentNode, "collapsed");
toggleClass(openSpan, "menuSpan");

for(var i=0; i<menuSpan.length; ++i){
    menuSpan[i].onclick = function(){
        // 获取当前元素的父元素div
        toggleMenu(this, 10, "height", 20);
        // 打开菜单后应该关闭之前打开的菜单
        if(openSpan != this && !hasClass(openSpan.parentNode, "collapsed")){
            toggleMenu(openSpan, 10, "height", 20);
        }
        openSpan = this;
    }
}
// 切换菜单的折叠和显示状态
function toggleMenu(obj, speed, dir, t){
    var parentDiv = obj.parentNode;
    // 在切换之前获取元素高度
    var begin = parentDiv.offsetHeight;
    // 切换样式类,  关闭parentDiv
    toggleClass(parentDiv, "collapsed");
    toggleClass(obj, "menuSpan");
    var end = parentDiv.offsetHeight;
    // 设置动画效果，高度从begin向end过渡
    parentDiv.style.height = begin+"px";
    move(parentDiv, speed, end, dir, t, function(){
        parentDiv.style.height = "";
    });
}

body {
    font-size: 18px;
    .sdmenu{
        width: 260px;
        display: flex;
        flex-wrap: wrap;
        margin: 10px auto;
        div{
            width: 100%;
            overflow: hidden;
            display: flex;
            flex-wrap: wrap;
            span{
                display: block;
                width: 100%;
                padding: 10px;
                color: rgb(221, 230, 246);
                background-color: rgb(61, 88, 125);
                border: 1px solid rgb(61, 88, 125);
            }
            span::before{
                content: '\f0d7'; // \f0da
                font-family: "Font Awesome 6 Free";
                font-weight: 900;
                margin-right: 10px;
            }
            a{
                width: 100%;
                height: 16px;
                color: rgb(46, 72, 109);
                background-color: rgb(205, 215, 230);
                padding: 10px;
                border: 1px solid rgb(174, 192, 210);

                display: flex;
                justify-content: space-between;
            }
            a::after{
                content: '\f101'; 
                font-family: "Font Awesome 6 Free";
                color: rgb(205, 215, 230);
                font-weight: 900;
            }
            a:hover{
                color: rgb(221, 230, 246);
                background-color: rgb(132, 158, 198);
            }
        }
    }
}
.collapsed{
    height: 40px;
    .menuSpan::before{
        content: '\f0da'; // \f0d7
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        margin-right: 10px;
    }
}

yytTools.js

//  根据浏览器中有无 getComputedStyle()方法来选择获取方式
// 	obj: 要获取样式的元素
//	name: 要获取的样式名
function getStyle(obj, name){
	// getComputedStyle()方法在 IE8 及以下的浏览器中没有 ->
	// getComputedStyle是一个变量，局部和全局都找不到时会报错;
	// window.getComputedStyle是一个属性，局部和全局都找不到时会返回 undefined,转换为布尔值后就是 false。
	if(window.getComputedStyle){
		return getComputedStyle(obj, null)[name];
	}else{
		return obj.currentStyle[name];
	}
};
/*
    创建一个移动 div 的函数
    obj：要移动的对象
    speed：移动速度
    target：移动的目标位置
    dir：移动方向, "left" 或 "top" (height 或者 width 会变得奇怪起来)
    t：移动的间隔时间,mm
    callback：一个函数，动画执行完毕后执行
 */
function move(obj, speed, target, dir, t, callback=function(){}){
    clearInterval(obj.timer);
    // 开启一个定时器来控制div移动方向
    obj.timer = setInterval(function(){
        var oldPos = parseInt(getStyle(obj, dir));
        var useSpeed;
        if(target < oldPos){
            useSpeed = -speed;
        }else{
            useSpeed = speed;
        }
        var newPos = oldPos + useSpeed;
        if((useSpeed > 0 && newPos > target)||(useSpeed < 0 && newPos < target)){
            newPos = target; 
        }
        obj.style[dir] = newPos+"px";
        if(newPos == target){
            clearInterval(obj.timer);
            callback();
        }
    },t);
};
// 定义一个函数，用来向元素中添加指定的class属性值
function addClass(obj, cn){
    obj.className += " "+cn;
}
// 判断一个元素中是否含有指定的class属性值
function hasClass(obj, cn){
    var reg = new RegExp("\\b"+cn+"\\b");
    if(reg.test(obj.className)){
        return true;
    }else{
        return false;
    }
}
// 删除元素中指定的class属性
function removeClass(obj, cn){
    var reg = new RegExp("\\b"+cn+"\\b");
    obj.className = obj.className.replace(reg, "");
}
// 切换一个类
// 如果元素中具有该类，则删除；如果元素中没有该类，则添加
function toggleClass(obj, cn){
    if(hasClass(obj, cn)){
        removeClass(obj, cn);
    }else{
        addClass(obj, cn);
    }
}