CSS+JavaScript总结_script 和 css结合使用-优快云博客

CSS 属性：

1. border-radius：通过设置圆角半径，可以使元素的边框变为圆角。

2. box-shadow：可以添加阴影效果到元素上。可以指定阴影的颜色、位置、模糊半径和扩展半径。

3. linear-gradient：可以创建线性渐变背景。可以指定起始和结束颜色，以及渐变方向。

4. radial-gradient：可以创建径向渐变背景。可以指定中心颜色、扩展半径和渐变方向。

5. transform：可以对元素进行变换，如平移、缩放、旋转和倾斜等。

6. clip-path：可以裁剪元素的形状。可以使用CSS形状函数或SVG路径来定义裁剪路径。

7. ::before 和 ::after 伪元素：可以在元素的内容之前或之后插入内容，并使用CSS样式对其进行美化。

8. position 和 z-index：可以控制元素的位置和层级关系。position属性可以设置为absolute、relative、fixed等值来确定元素的定位方式；z-index属性可以指定元素的层级关系。

9. CSS形状函数（如polygon()、circle()、ellipse()等）：可以使用这些函数来创建不规则的形状。

10. @keyframes`动画：可以使用@keyframes关键字定义动画的关键帧，并通过animation属性应用动画。

下面是一个CSS示例动画展示：

代码展示：

 <style>
        .f{
            width: 600px;
            height: 600px;
            border: 1px solid rebeccapurple;
            position: relative;
        }
        .z{
            width: 100px;
            height: 100px;
            background-color: green;
            position: absolute;
            animation-name: move1;
            animation-duration: 2s;
            animation-delay: 0.1s;
            animation-iteration-count: 3;
            animation-timing-function: linear;
            animation-direction: alternate;
            animation-fill-mode: forwards;
        }
        @keyframes move1{
            0%{
                top:0;
                left: 0;
            }
            25%{
                top:0;
                left: 500px;    
            }
            50%{
                top: 500px;
                left: 500px;
            }
            75%{
                top: 500px;
                left: 0px;
            }
            100%{
                top: 0;
                left: 0;
            }
        }

    </style>

    <body>
        <div class="f">
            <div class="z"></div>
        </div>
    </body>

以上是css的一些重要知识点

JavaScript（简称JS）是一种广泛应用于Web开发的脚本语言，用于为网页添加交互性和动态功能。以下是JavaScript的一些重要知识点总结：

1. 数据类型：JavaScript有七种基本数据类型：String（字符串）、Number（数字）、Boolean（布尔值）、Null（空值）、Undefined（未定义）、Symbol（符号）和 Object（对象）。

2. 变量和常量：使用var、let或const来声明变量和常量。变量是可以被重新赋值的，而常量是一旦赋值就不能被修改的。

3. 运算符：JavaScript支持各种数学和逻辑运算符，例如加减乘除、比较和逻辑运算符等。

4. 控制流程：使用if-else语句、switch语句和循环语句（如for循环和while循环）来控制程序的执行流程。

5. 函数：函数是一段可重复使用的代码块，用于封装一些特定的操作。可以使用function关键字定义函数，也可以使用箭头函数。

 //重复出现代码封装一个函数
    function createTab(arr){
        let s = ''
        arr.forEach((e) => {
            s += `<tr>
                <td>${e.id}</td>
                  <td>${e.name}</td> 
                  <td>${e.age}</td>
                 <td>${e.money}</td>
                 </tr>`
        })
        tr1.innerHTML = s
    }

6. 对象：JavaScript是一门面向对象的语言，对象是由属性和方法组成的集合。可以使用对象字面量、构造函数或类来创建对象。

7. 数组：数组是一个有序的数据集合，可以包含任意的数据类型。可以通过索引来访问数组中的元素，并使用一系列的数组方法对数组进行操作。

 let arr1 = [
        {
            id: 1,
            name: '高启强',
            age: 36,
            money: 2000000
        }, {
            id: 2,
            name: '高启盛',
            age: 36,
            money: 1000000
        }, {
            id: 3,
            name: '唐小龙',
            age: 36,
            money: 50000
        },
        {
            id: 4,
            name: '唐小虎',
            age: 36,
            money: 30000
        },
        {
            id: 5,
            name: '陈泰',
            age: 36,
            money: 600000
        }, {
            id: 6,
            name: '老莫',
            age: 36,
            money: 20000
        }
    ]

8. DOM操作：JavaScript可通过Document Object Model（DOM）来操作HTML文档。可以使用getElementById、querySelector等方法来选择元素，并使用添加、删除、修改元素的属性和内容等操作。

let tr1 = document.getElementById('tr1');

9. 事件处理：JavaScript可以通过事件处理程序来响应用户的交互动作，例如点击、输入等。可以使用addEventListener方法来注册事件，并编写对应的事件处理函数。

总结：以上是JavaScript的一些重要知识点 JavaScript是一种常用的脚本语言，主要用于Web开发，为网页添加交互性和动态功能。它有七种基本数据类型，包括字符串、数字、布尔值、空值、未定义、符号和对象。JavaScript支持各种运算符、控制流程、函数、对象和数组操作。通过Document Object Model（DOM）可以操作HTML文档，通过事件处理程序响应用户的交互动作。还可以使用异步编程实现非阻塞操作。JavaScript是一门灵活的语言，还有许多其他的知识和特性需要掌握。