巩固CSS和学习JS

杰哥不要阿

已于 2023-07-06 11:32:28 修改

阅读量66

点赞数 1

文章标签： css 学习 javascript 开发语言

于 2023-07-04 21:14:46 首次发布

本文链接：https://blog.csdn.net/m0_65517946/article/details/131543332

版权

本文介绍了CSS的核心概念，如布局定位，通过实例展示了如何使用absolute和relative定位元素。接着讨论了CSS动画，包括关键帧动画的创建。此外，文章还涵盖了JavaScript的基础知识，如数据类型转换、数组操作和函数定义，并演示了DOM操作，如获取和设置HTML元素的值。最后，文章通过示例展示了如何利用JS实现动态表格和交互功能。

摘要由CSDN通过智能技术生成

一、CSS的核心：布局定位

注： 1.子元素使用绝对路径，父元素使用相对路径。

2.所有子元素默认的初始位置在左上顶点。

3.通过left和top控制x轴和y轴的距离。

具体例子：

<style>
    .fu{
      width: 300px;
      height: 300px;
      position: relative;
    }
    .z1,.z2,.z3{
      position: absolute;
    }
    .z1{
      width: 300px;
      height: 300px;
      left: 200px;
      top: 100px;
      background-color: deeppink;
      border-radius: 50%;
    }
    .z2{
      width: 300px;
      height: 300px;
      left: 300px;
      top: 200px;
      background-color: deeppink;
      transform: rotate(45deg);
    }
    .z3{
      width: 300px;
      height: 300px;
      left: 400px;
      top: 100px;
      background-color: deeppink;
      border-radius: 50%;
    }
  </style>
</head>
<body>
  <div class="fu">
    <div class="z1"></div>
    <div class="z2"></div>
    <div class="z3"></div>
  </div>
</body>

效果如下：

二、CSS动画

注： 1.使得可以将从一个css样式配置转换到另一个css样式配置。

2.动画包括两个部分：描述动画的样式规则和用于指定动画开始、结束以及中间点样式的关键帧。

具体例子：

<style>
    .f{
      width: 600px;
      height: 600px;
      border: 1px solid rebeccapurple;
      position: relative;
    }
    .z{
      width: 100px;
      height: 100px;
      background-color: aqua;
      position: absolute;
      animation: move1 2s 1s 3 linear alternate forwards;
    }
    @keyframes move1 {
      from{
        top: 0;
        left: 0;
      }to{
        top: 500px;
        left: 500px;
      }
    }
  </style>
</head>
<body>
    <div class="f">
      <div class="z"></div>
    </div>
</body>

实际例子：太极图

<style>
    body{
      background-color: lightblue;
    }
    .fu{
      width: 500px;
      height: 500px;
      position: relative;
      animation: circle 2s linear infinite;
      margin: 0 auto;
    }
    .fu>div{
      position: absolute;
    }
    .z1{
      width: 250px;
      height: 500px;
      background-color: white;
      border-radius: 250px 0px 0px 250px;
    }
    .z2{
      width: 250px;
      height: 500px;
      background-color: black;
      border-radius: 0px 250px 250px 0px;
      left: 250px;
    }
    .z3{
      width: 250px;
      height: 250px;
      background-color: black;
      border-radius: 50%;
      left: 125px;
      z-index: 1;
    }
    .z4{
      width: 250px;
      height: 250px;
      background-color: white;
      border-radius: 50%;
      left: 125px;
      top: 250px;
      z-index: 1;
    }
    .z5{
      width: 80px;
      height: 80px;
      background-color: white;
      border-radius: 50%;
      left: 200px;
      top: 85px;
      z-index: 2;
    }
    .z6{
      width: 80px;
      height: 80px;
      background-color: black;
      border-radius: 50%;
      left: 200px;
      top: 335px;
      z-index: 2;
    }
    @keyframes circle{
      from{
        transform: rotate(0deg);
      }to{
        transform: rotate(360deg);
      }
    }
  </style>
</head>
<body>
  <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>
</body>

效果如下：

三、JS的学习

1.数据类型主要有：number、string、boolean、null、undefined 。

2.数据类型的转换：

（1）number类型的变量在转换成boolean类型时,如果值为0或NaN,则转换成false,否则转换成true。

（2）string类型的变量在转换成boolean类型时,如果值为''空字符串,则转换成false,否则转换成true。

（3）null和undefined类型的变量在转换成boolean类型时,都会转换成false。

3.数组和函数：

（1）数组分为简单数组和复杂数组。

（2）数组的遍历：

arr2.forEach(function(e,i){
    console.log(e,i)
  })
//简化为箭头函数的形式
  arr2.forEach((e,i)=>{
    console.log(e,i)
  })

（3）数组的筛选，原数组不会被改变，筛选出来的结果返回到新数组中。

例：

let arr3=arr2.filter((e,i)=>{
    return e.age<21
  })
  console.log(arr3)

（4）函数两种常用的定义方式：

function f1(){
    console.log('f1函数')
  }
let f2=function (){
    console.log('f2函数')
  }

4.dom操作

指和html进行交互，获取html标签,返回一个元素对象；设置值。

具体例子：

<body>
  <input id="inp1" type="text" value="aa">
  <ul id="ul1">
    <li>1-a-66</li>
    <li>2-b-77</li>
    <li>3-c-88</li>
  </ul>
  <button onclick="changeText()">替换按钮</button>
  <ul>
    <li>onclick属性表示一个点击事件属性</li>
    <li>onclick属性值是一个函数名称()</li>
    <li>表示一旦点击该按钮就调用这个函数</li>
  </ul>
</body>
<script>
  //一、单个的设置
  //1.获取
  let inp1=document.getElementById('inp1')
  //2.设置值
  inp1.value='孙尚香'
  //二、批量的设置
  let arr2=[
    {id:1,name:'貂蝉',age:20},
    {id:2,name:'西施',age:21},
    {id:3,name:'杨玉环',age:22},
  ]
  //1.获取ul
  let ul1=document.getElementById('ul1')
  //2.替换
  function changeText(){
    let s=''
    arr2.forEach((e)=>{
      s+=`<li>${e.id}-${e.name}-${e.age}</li>`
  })
  ul1.innerHTML=s
  }
</script>

实际例子：强盛集团

<style>
    button{
      width: 100px;
      height: 40px;
      margin-left: 40px;
      border: none;
      outline: none;
      border-radius: 8px;
      color: white;
      font-size: large;
      cursor: pointer;
    }
    .fb>button:nth-child(1){
      background-color: aqua;
    }
    .fb>button:nth-child(2){
      background-color: aquamarine;
    }
    .fb>button:nth-child(3){
      background-color: pink;
    }
    .fb>button:nth-child(4){
      background-color: plum;
    }
    /* tbody中的每个tr隔行变色 */
    tbody>tr:nth-child(odd){
      background-color: lemonchiffon;
    }
    tbody>tr:nth-child(even){
      background-color: mistyrose;
    }
  </style>
</head>
<body>
  <h1 style="text-align: center;">强盛集团员工薪资表</h1>
  <h3 style="text-align: center;">强盛集团经营理念：风浪越大，鱼越贵！</h3>
  <div class="fb" style="text-align: center;">
    <button onclick="generateTab()">生成表格</button>
    <button onclick="doubleSalary()">薪资翻倍</button>
    <button onclick="restEmp()">退休人员</button>
    <button onclick="sumSalary()">薪资总数</button>
  </div>
  <table style="margin-top: 30px;" align="center" border="1" cellpadding="18" cellspacing="0">
    <thead>
      <tr>
        <th><a href="javascript:orderEmp('id')">序号</a></th>
        <th>姓名</th>
        <th><a href="javascript:orderEmp('age')">年龄</a></th>
        <th><a href="javascript:orderEmp('salary')">薪资</a></th>
      </tr>
    </thead>
    <tbody id="tbody">
      <tr style="text-align: center;">
        <td>1</td>
        <td>高启强</td>
        <td>36</td>
        <td>2000000</td>
      </tr>
    </tbody>
    <tfoot id="tfoot">
      <tr style="text-align: center;">
        <td colspan="4">薪资总数：</td>
      </tr>
    </tfoot>
  </table>
</body>
<script>
  let emps=[
    {id:1,name:'高启强',age:25,salary:90000},
    {id:2,name:'高启盛',age:30,salary:80000},
    {id:3,name:'唐小龙',age:28,salary:70000},
    {id:4,name:'唐小虎',age:32,salary:60000},
    {id:5,name:'陈泰',age:68,salary:50000},
    {id:6,name:'老默',age:63,salary:40000},
  ]
  //获取tbody元素
  let tbody=document.getElementById('tbody')
  let tfoot=document.getElementById('tfoot')
  function generateTab(){
    //调用函数
    createTab(emps)
  }
  //重复出现的代码，封装成一个函数，把某个数组中的数据放入tbody中
  function createTab(arr){
    let s=''
    arr.forEach((e)=>{
      s+=`<tr>
          <td>${e.id}</td>
          <td>${e.name}</td>
          <td>${e.age}</td>
          <td>${e.salary}</td>
          </tr>`
    })
    tbody.innerHTML=s
  }
  let newEmps;
  function doubleSalary(){
    //薪资翻倍后，返回一个新的数组
    newEmps=emps.map((e)=>{
      e.salary*=2
      return e;
    })
    //调用函数
    createTab(newEmps)
  }
  //退休功能
  function restEmp(){
    let newEmps=emps.filter((e)=>{
      return e.age>65
    })
    //调用函数
    createTab(newEmps)
  }
  //薪资求和
  function sumSalary(){
        let salarySum
        if(newEmps){
            //alert('对翻倍后的数组求和')
            salarySum=newEmps.reduce((sum,e)=>{
                return sum+e.salary
            },0)
        }else{
            //alert('对原数组求和')
            salarySum=emps.reduce((sum,e)=>{
                return sum+e.salary
            },0)
            
        }
        console.log(salarySum)
            tfoot.innerHTML=
            `<tr style="text-align: center;">
                <td colspan="4">薪资总数：${salarySum}</td>
            </tr>`
    }
  //排序
  let a=true
  function orderEmp(type){
    a=!a //每调用一次，a取反
    let newEmps2
    switch (type) {
      case 'id':
        console.log('根据id排序')
        newEmps2=emps.sort((e1,e2)=>{
          return a? e2.id-e1.id : e1.id-e2.id
        })
        break;
      case 'age':
        console.log('根据age排序')
        newEmps2=emps.sort((e1,e2)=>{
          return a? e2.age-e1.age : e1.age-e2.age
        })
        break;
      case 'salary':
        console.log('根据salary排序')
        newEmps2=emps.sort((e1,e2)=>{
          return a? e2.salary-e1.salary : e1.salary-e2.salary
        })
        break;
    }
    //调用生成的tbody函数
    createTab(newEmps2)
  }
</script>

效果如下：

本章小结：

学习CSS和JS是创建交互性和动态效果的关键。CSS用于控制网页的样式和布局，而JS是一种编程语言，用于实现网页的交互和动态功能。学习CSS和JS需要掌握它们的基本语法和常用属性/方法。了解CSS的选择器和样式规则，以及JS的变量、函数和事件处理等概念是必要的。通过实践项目和挑战，可以提高编码技巧和解决问题的能力。同时，探索相关工具和资源，如浏览器调试工具和在线教程，可以加速学习过程。持续学习和不断练习是成为CSS和JS专家的关键。