一个月学会JavaEE（第二天：深入复习CSS+初识JS）

最新推荐文章于 2024-07-06 16:25:37 发布

m0_65255746

最新推荐文章于 2024-07-06 16:25:37 发布

阅读量58

点赞数 1

文章标签： css javascript

本文链接：https://blog.csdn.net/m0_65255746/article/details/131532234

版权

CSS布局

CSS相对布局和绝对布局都是布局属性。相对布局指元素相对于其他元素或相对于自身的位置进行布局。绝对布局指元素相对于父元素进行定位和布局。

相对布局：

在CSS中，相对定位是通过position: relative;属性实现的。相对定位元素的位置相对于其正常（默认）位置进行定位，可以用top，bottom，left，right属性来移动相对定位元素的位置。

用法示例：

.parent {
  position: relative;
}
.child {
  position: relative;
  left: 20px;
}

上例中，.parent元素被设置了相对定位，.child元素被设置了相对定位，并向左移动了20像素。

绝对布局：

在CSS中，绝对定位是通过position: absolute;属性实现的。绝对定位元素通过设置top，bottom，left，right属性来相对于其最近的已定位（position不等于static）祖先元素进行定位。

用法示例：

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 20px;
  left: 20px;
}

上例中，.parent元素被设置了相对定位，.child元素被设置了绝对定位，并相对于.parent元素的左上角定位，向下和向右各移动了20像素。

在实际应用中，相对和绝对布局经常组合使用，以达到更复杂的布局效果：

<style>
        .fu{
            position: relative;
        }
        .z1,.z2,.z3,.z4,.z5,.z6,.z7,.z8,.z9{
            width: 200px;
            height: 200px;
            position: absolute;
            background-color: red;
        }
        .z1{
            top: 150px;
            left: 140px;
            border-radius:50%
        }
        .z2{
            top: 210px;
            left: 80px;
            transform: rotate(45deg);
        }
        .z3{
            top: 150px;
            left: 20px;
            border-radius:50%
        }
        .z4{
            top: 820px;
            left: 310px;
            border-radius:50%
        }
        .z5{
            top: 710px;
            left: 250px;
            border-radius:50%
        }
        .z6{
            top: 820px;
            left: 190px;
            border-radius:50%
        }
        .z7{
            width:350px;
            height: 350px;
            top: 750px;
            left: 5px;
            border-radius:50%;
            background-color:white;
        }
        .z8{
            width: 350px;
            height: 350px;
            top: 750px;
            left: 345px;
            background-color:white;
            border-radius:50%
        }
        .z9{
            top: 880px;
            left: 250px;
        }
    </style>

<div class="fu">
    <div class="z1"></div>
    <div class="z2"></div>
    <div class="z3"></div>
    <div class="z9"></div>
    <div class="z7"></div>
    <div class="z8"></div>
    <div class="z4"></div>
    <div class="z5"></div>
    <div class="z6"></div>
</div>

效果：

    <style>
        .fu {
            position: relative;
            width: 500px;
            height: 500px;
        }

        .fu > div {
            position: absolute;
        }

        .z1 {
            width: 250px;
            height: 500px;
            background-color: black;
            border: 1px solid black;
            border-radius: 250px 0 0 250px;
        }

        .z2 {
            width: 250px;
            height: 500px;
            left: 250px;
            background-color: white;
            border: 1px solid black;
            border-radius: 0 250px 250px 0;
        }

        .z3 {
            width: 250px;
            height: 250px;
            left: 125px;
            background-color: black;
            border-radius: 50%;
        }

        .z4 {
            width: 250px;
            height: 250px;
            top: 250px;
            left: 125px;
            background-color: white;
            border-radius: 50%;
        }

        .z5 {
            width: 100px;
            height: 100px;
            top: 75px;
            left: 200px;
            background-color: white;
            border-radius: 50%;
        }

        .z6 {
            width: 100px;
            height: 100px;
            top: 325px;
            left: 200px;
            background-color: black;
            border-radius: 50%;
        }
    </style>
    <div class="fu">
        <div class="z1"></div>
        <div class="z2"></div>
        <div class="z3"></div>
        <div class="z4"></div>
        <div class="z5"></div>
        <div class="z6"></div>
    </div>

效果：

CSS动画

在 CSS 中，可以使用动画来为元素添加各种过渡和变化效果。CSS 动画可以通过 @keyframes 规则和 animation 属性来实现。

以下是一个简单的示例，展示了如何创建一个简单的 CSS 动画：

/* 定义关键帧动画 */
@keyframes myAnimation {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* 应用动画到元素上 */
.element {
  animation: myAnimation 1s linear infinite;
}

在上面的示例中，我们首先使用 @keyframes 规则定义了一个名为 myAnimation 的关键帧动画。关键帧动画通过在不同的百分比位置（0% 和 100%）定义元素的样式来描述动画的开始和结束状态。

然后，我们将动画应用到一个名为 .element 的 CSS 类选择器上，使用 animation 属性。其中，myAnimation 是动画名称，1s 是动画持续时间，linear是动画的时间曲线（线性），infinite 表示动画无限循环。

还可以根据需要自定义关键帧动画的属性和过渡效果。例如，可以在不同的百分比位置定义更多的关键帧，并在每个关键帧中指定不同的样式。

此外，animation 属性还提供了其他选项，如指定动画延迟时间、播放次数、反向播放等：

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

下面是对每个属性的详细解释：

name：指定要应用的关键帧动画名称。可以是已经定义的 @keyframes 规则的名称，也可以是 "none" 表示没有动画。多个动画名称可以用逗号分隔，实现同时或顺序播放多个动画。
duration：指定动画的持续时间，可以使用秒（s）或毫秒（ms）作为单位。如果指定多个值，每个值将与指定的关键帧动画名称一一对应。
timing-function：指定动画的时间曲线，即动画在时间上如何变化。常用的值有：ease（默认，缓入缓出），linear（线性），ease-in（缓入），ease-out（缓出），ease-in-out（缓入缓出），可以使用贝塞尔曲线自定义时间曲线。
delay：指定动画启动之前的延迟时间，可以使用秒（s）或毫秒（ms）作为单位。如果指定多个值，每个值将与指定的关键帧动画名称一一对应。
iteration-count：指定动画的播放次数，默认为 1，可以使用整数（如 2）或特殊值 infinite 表示无限循环。
direction：指定动画的播放方向，可以是 normal（正常播放，默认），reverse（反向播放），alternate（正向和反向交替播放），alternate-reverse（反向和正向交替播放）。
fill-mode：指定动画执行之前和之后如何应用样式。常用的值有：none（默认，不应用样式），forwards（动画结束后应用最后一个关键帧的样式），backwards（动画开始前应用第一个关键帧的样式），both（同时应用前两个规则）。
play-state：指定动画的播放状态，可以是 running（默认，播放），paused（暂停）。

通过学习上述方法，我们很容易实现太极旋转！！！

入门JS

JS（JavaScript）是一种用于创建交互式网站的编程语言，它可以运行在网站的前端和后端。

JS变量和数据类型

变量
在 JavaScript 中，变量用于存储和操作数据。通过使用变量，可以给数据赋予一个名称，并在程序中重复使用它。变量可以存储各种类型的数据，并且可以根据需要修改存储的值。

在 JavaScript 中，可以使用 var、let 和 const 关键字来声明变量。例如：

var x;         // 使用 var 声明一个变量
let y = 10;    // 使用 let 声明一个变量，并初始化为 10
const z = 5;   // 使用 const 声明一个常量，并初始化为 5

使用 var 声明的变量具有函数作用域，即在声明的函数内部有效。如果没有在函数中声明，它们将具有全局作用域。
使用 let 声明的变量具有块级作用域，即在声明的代码块内部有效。
使用 const 声明的是一个常量，其值在声明后无法修改。

数据类型
JavaScript 支持多种数据类型，可以根据数据的性质进行不同的操作。以下是 JavaScript 中的主要数据类型：

数字（Number）：表示数字（整数或浮点数）。例如：let age = 30;
字符串（String）：表示一串文本。JavaScript 中的字符串可以用单引号或双引号括起来。例如：let name = 'John';
布尔值（Boolean）：表示真或假。布尔值只有两个可能的值：true 和 false。例如：let isLogged = true;
对象（Object）：表示复杂的数据结构，可以包含多个键值对。例如：let person = { name: 'John', age: 30 };
数组（Array）：表示按有序索引排列的值的集合。数组使用方括号 [ ] 来表示，每个值通过逗号分隔。例如：let numbers = [1, 2, 3, 4, 5];
空值（Null）：表示一个空的值或不存在的对象。例如：let data = null;
未定义（Undefined）：表示一个未定义的值。当变量声明了但没有赋值时，它的值就是未定义的。例如：let something;

JavaScript 还提供了一些用于操作特定数据类型的内置函数和方法。例如，可以使用 typeof 运算符来检查变量的数据类型，使用字符串对象的 length 属性来获取字符串的长度等。

let name = '张三';
console.log(typeof name);   // 输出：string

let message = 'Hello World';
console.log(message.length); // 输出：11

在 JavaScript 中，也有很多操作数组的方法和技巧：

数组迭代
JavaScript 提供了多种方法用于迭代数组并对数组中的元素执行相应的操作，如 forEach()、map()、filter() 等。这些方法可以简化对数组的处理过程。例如：

let numbers = [1, 2, 3, 4, 5];

numbers.forEach(function(num) {
  console.log(num);    // 逐个输出数组的元素
});

let doubledNumbers = numbers.map(function(num) {
  return num * 2;      // 返回每个元素的两倍值组成的新数组
});
console.log(doubledNumbers);   // 输出：[2, 4, 6, 8, 10]

let evenNumbers = numbers.filter(function(num) {
  return num % 2 === 0;       // 返回数组中的偶数组成的新数组
});
console.log(evenNumbers);      // 输出：[2, 4]

数组排序
可以使用 sort() 方法对数组进行排序。排序可以是字母顺序的（默认）或自定义排序。例如：

let fruits = ['banana', 'apple', 'orange'];

fruits.sort();                 // 对数组进行字母顺序排序
console.log(fruits);           // 输出：['apple', 'banana', 'orange']

let numbers = [3, 1, 5, 2, 4];

numbers.sort(function(a, b) {
  return a - b;                // 对数组进行升序排序
});
console.log(numbers);          // 输出：[1, 2, 3, 4, 5]

numbers.sort(function(a, b) {
  return b - a;    // 返回 b - a 来实现降序排序
});

console.log(numbers);   // 输出：[5, 4, 3, 2, 1]

函数

函数是 JavaScript 中用于封装可重用代码块的工具。通过定义函数，可以将一段特定的任务或操作打包起来，并通过调用函数来执行它。函数可以接受参数，执行任务，并返回一个值。

函数的创建和调用
在 JavaScript 中，可以使用 function 关键字来定义一个函数。函数定义包括函数名称、参数列表和函数体。例如：

function greet() {
  console.log('Hello！');
}

// 调用函数
greet();  // 输出：Hello!

函数参数
函数可以接受零个或多个参数。参数是在函数定义中声明的变量，用于接收函数调用时提供的值。例如：

function add(a, b) {
  return a + b;
}

let result = add(5, 3);  // 将 5 和 3 作为参数传递给函数
console.log(result);            // 输出：8

根据上述内容，我们可以试着实现以下功能：

初始页面：

点击生成表格后：

点击薪资翻倍后：

点击退休人员后（65岁退休）：

点击薪资总数便可以计算出所有人薪资总和：

具体代码实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
</head>
<body>
<div style="text-align: center">
    <h3>强盛集团员工薪资表</h3>
    <div>
        <button class="btn btn-danger" onclick="generate()">生成表格</button>
        <button class="btn btn-warning" onclick="two()">薪资翻倍</button>
        <button class="btn btn-success" onclick="retire()">退休人员</button>
        <button class="btn btn-primary" onclick="total()">薪资总数</button>
    </div>
    <table class="table table-bordered table-striped">
        <thead>
        <tr>
            <th>序号</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>薪资</th>
        </tr>
        </thead>
        <tbody id="tbody">
        </tbody>
        <tfoot>
        <tr>
            <td id="td" colspan="4">薪资总数：</td>
        </tr>
        </tfoot>
    </table>
</div>
</body>
<script>
    let QS = [
        {id: 1, name: "高启强", age: 36, salary: 2000000},
        {id: 2, name: "高启盛", age: 30, salary: 1000000},
        {id: 3, name: "唐小龙", age: 34, salary: 50000},
        {id: 4, name: "唐小虎", age: 32, salary: 30000},
        {id: 5, name: "陈泰", age: 66, salary: 600000},
        {id: 6, name: "老默", age: 40, salary: 20000}
    ]
    let s = `<tr><td>${QS[0].id}</td><td>${QS[0].name}</td><td>${QS[0].age}</td><td>${QS[0].salary}</td></tr>`
    let t = document.getElementById("tbody")
    t.innerHTML = s
    let fun = (arr) => {
        s = ''
        arr.forEach((e) => {
            s += `<tr><td>${e.id}</td><td>${e.name}</td><td>${e.age}</td><td>${e.salary}</td></tr>`
        })
        t.innerHTML = s
    }
    let generate = () => {
        fun(QS)
    }
    let two = () => {
        QS.forEach((e) => {
            e.salary = e.salary * 2
        })
        generate()
    }
    let retire = () => {
        let arr = QS.filter((e) => {
            return e.age > 65
        })
        fun(arr)
    }
    let total = () => {
        let sum = 0
        QS.forEach((e) => {
            sum += e.salary
        })
        document.getElementById("td").innerText = `薪资总数：${sum}`
    }
</script>
</html>

其中onclick表示点击按钮时启动对应函数，document.getElementById()是通过id找到对应元素，类似的还有：

getElementsByClassName()：根据类名获取元素。它返回具有指定类名的所有元素的集合。

let elements = document.getElementsByClassName("className");

getElementsByTagName()：根据标签名获取元素。它返回具有指定标签名的所有元素的集合。

let elements = document.getElementsByTagName("tagName");

querySelector()：使用 CSS 选择器选择单个元素。它返回与给定选择器匹配的第一个元素。

let element = document.querySelector("selector");

querySelectorAll()：使用 CSS 选择器选择多个元素。它返回与给定选择器匹配的所有元素的集合。

let elements = document.querySelectorAll("selector");

箭头函数与function无异，为ES6新语法，如有兴趣可自行研究。

结尾

能实现以上内容今天的学习也算是收获满满！！！！！！！