【JavaScript】练习四

原创已于 2022-07-16 11:24:54 修改 · 302 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

于 2022-07-15 16:32:33 首次发布

作业专栏收录该内容

14 篇文章

订阅专栏

这篇博客探讨了使用JavaScript实现页面中图片点击后添加灰色实线边框及内边距的三种方法，并介绍了如何通过JavaScript完成英雄联盟相关作业。此外，还讲解了如何利用JavaScript操作表格，实现隔行不同颜色的效果，如灰色背景和粉色、绿色的交替显示。

1、页面中有多张图片，点击图片，自身添加一个像素灰色的实线边框，内边距10像素，圆角矩形(可以采用多种方式实现 1> .css().css() 2> .css({“border”:“1px solid gray”,“padding”:“10px”}); 3> addClass 的方式);

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>为图片添加边框</title>
    <style>
       <style>
			*{
				margin: 0;
				padding: 0;
			}
			#adList{
				position: relative;
				width: 300px;
				
				border: 1px solid green;
			}
			#adList img{
				width: 300px;height:300px ;
				vertical-align: middle;
			}
			
			/*#adList li a:hover{
				background: red;
				color: #fff;
			}*/
			#adList li .a_nomal{
				background: #fff;
				color: #000;
			}
			#adList li .a_hover{
				background: grayed;
				color: #fff;
			}
    </style>
</head>
 
<body>
    <script type="text/javascript" src="../jquery-3.5.1.js"></script>
    <script type="text/javascript">
        //方法1 使用css()方法
          $(function(){
              $("img").eq(0).click(function(){
                  $(this).css("border":"1px solid gray","padding":"10px");
              })
          })
        //方法2 使用addClass（）方法
//      $(function(){
//          $("img").click(function(){
//              $(this).addClass('border');
//          })
//      })

    </script>
    <style type="text/css">
        .border{border:10px solid #ccc;}
    </style>
</head>
<body>
		<div id="adList">
			<img src="img/a1.jpg" >	
		</div>
</body>
</html>

2、完成作业二，英雄联盟

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<script src="../jquery-1.12.4.js"></script>
<script type="text/javascript">
$(function (){
    $("a").click(fun);
    function fun() {
        $("p").not($("#content")).css("background","skyblue").css("color","purple");
        $(".current").css("background","skyblue").css("color","purple");
        $("span").css({"background":"purple","color":"blue"});
        $("span:eq(1)").css("background","skyblue")
    }
})

</script>

<style>

</style>
<body>
<h1>英雄联盟</h1>
<p>
    《英雄联盟》，简称LOL。
</p>
<p id="content">
    由<strong>Riot Games </strong>开发，为3D竞技场战游戏，其
    <span>主创团队由实力强劲的
        <strong>魔兽争霸</strong>
        系列游戏多人<span>即时对战</span>自定义地图开发团队
    </span>...
    <a href="#">更多详情</a>
</p>
<h2>目录
</h2>
<ul class="txt_box">
    <li class="current"><a href="#">开发团队</a></li>
    <li><a href="#">游戏周边</a></li>
    <li><a href="#">游戏介绍</a></li>
    <li><a href="#">配置需求</a></li>
    <li><a href="#">游戏背景</a></li>
</ul>

</body>
</html>

3、table,实现隔行变色 tr:灰色的背景剩下的实现隔行变色一行粉色一行绿色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>高级隔行变色</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .form{
            width: 500px;
            margin: 100px auto 0;
        }
        table{
            border-collapse: collapse;
            border-spacing: 0;
            border: 1px solid "pink";
            width: 500px;
            text-align: center;
        }
        th,td{
            border: 1px solid #404060;
            padding: 10px;
        }
        th {
            background-color: #09c;
            font: bold 16px "微软雅黑";
            color: #fff;
        }
    </style>
    <script src="jj/jquery-3.5.1.js"></script>
</head>
<body>
<div class="form">
    <table>
        <thead>
        <tr>
            <th>学号</th>
            <th>姓名</th>
            <th>成绩</th>
        </tr>
        </thead>
        <tbody class="target">
        <tr>
            <td>001</td>
            <td>小王</td>
            <td>100</td>
        </tr>
        <tr>
            <td>002</td>
            <td>小赵</td>
            <td>100</td>
        </tr>
        <tr>
            <td>003</td>
            <td>小李</td>
            <td>100</td>
        </tr>
        <tr>
            <td>004</td>
            <td>小明</td>
            <td>100</td>
        </tr>
        <tr>
            <td>005</td>
            <td>小刚</td>
            <td>100</td>
        </tr>
        <tr>
            <td>006</td>
            <td>小明</td>
            <td>100</td>
        </tr>
        <tr>
            <td>007</td>
            <td>小明</td>
            <td>100</td>
        </tr>
        </tbody>
    </table>
</div>

 <script>
        $(function () {
            var trodd = $(".form tr:odd");
            var treven = $(".form tr:even");
            trodd.css("background","pink");
            treven.css("background","green");

            //计数器，记录鼠标经过之前的颜色
            var color = "";
            $(".form tr").mouseenter(function () {
                color = $(this).css("background");
                $(this).css("background","#FFFFFF");
            });
            $(".form tr").mouseleave(function () {
                $(this).css("background",color);
            });
        });
    </script>
</body>
</html>