超级绚丽，js前端动画特效，轰炸你的眼睛

最新推荐文章于 2024-04-23 16:26:38 发布

sheiily

最新推荐文章于 2024-04-23 16:26:38 发布

阅读量1k

点赞数

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/2301_77478553/article/details/131556067

版权

文章目录

概要

什么是 JavaScript？

JavaScript 是一种脚本，一门编程语言，它可以在网页上实现复杂的功能，网页展现给你的不再是简单的静态信息，而是实时的内容更新，交互式的地图，2D/3D 动画，滚动播放的视频等等。JavaScript 怎能缺席。它是标准 Web 技术蛋糕的第三层，其中 HTML 和 CSS 我们已经在学习中心的其他部分进行了详细的讲解

HTML是一种标记语言，用来结构化我们的网页内容并赋予内容含义，例如定义段落、标题和数据表，或在页面中嵌入图片和视频。
CSS 是一种样式规则语言，可将样式应用于 HTML 内容，例如设置背景颜色和字体，在多个列中布局内容
JavaScript是一种脚本语言，可以用来创建动态更新的内容，控制多媒体，制作图像动画，还有很多。（好吧，虽然它不是万能的，但可以通过简短的代码来实现神奇的功能。）

这三层依次建立，秩序井然。

整体架构流程

技术名词解释

变量是什么？

一个变量，就是一个用于存放数值的容器。这个数值可能是一个用于累加计算的数字，或者是一个句子中的字符串。变量的独特之处在于它存放的数值是可以改变的。

number类型的变量，在需要转换成boolean类型时，如果值为0或者NaN，则转换成false，否则为true
string类型的变量，在需要转换成boolean类型时，如果值为''空字符串，则转换成false，否则为true
null和undefined都会转换成false

//1.数据类型和变量
    let a=3
    console.log(typeof a)//number
    a='abc'
    console.log(typeof a)//string
    a=true
    console.log(typeof a)//boolean
    a=null
    console.log(typeof a)//null
    a
    console.log(typeof a)//undefined
    let b
    console.log(typeof b)
    //2.数据类型转换
    let age=undefined
    if(age){
        console.log(1)
    }else{
        console.log(0)
    }

数组是什么？

数组通常被描述为“像列表一样的对象”; 简单来说，数组是一个包含了多个值的对象。数组对象可以存储在变量中，并且能用和其他任何类型的值完全相同的方式处理，区别在于我们可以单独访问列表中的每个值，并使用列表执行一些有用和高效的操作，如循环 - 它对数组中的每个元素都执行相同的操作。也许我们有一系列产品和价格存储在一个数组中，我们想循环遍历所有这些产品，并将它们打印在发票上，同时将所有产品的价格统计在一起，然后将总价格打印在底部。

如果我们没有数组，我们必须将每个产品存储在一个单独的变量中，然后调用打印的代码，并为每个产品单独添加。花费的时间要长得多，效率很低，而且也容易出错。如果我们有 10 个产品需要添加发票，那就只是有点麻烦而已，但是 100 个，或者 1000 个呢？

//1.简单数组
    let arr1=[1,2.5,'a',true,null,undefined,null];
    console.log(arr1.length)
    //2.复杂的数组
    let arr2=[
        {id:1,name:'曹操',age:40},
        {id:2,name:'刘备',age:41},
        {id:3,name:'孙权',age:42},
    ]

什么是函数？

在 JavaScript 中另一个基本概念是函数, 它允许你在一个代码块中存储一段用于处理单任务的代码，然后在任何你需要的时候用一个简短的命令来调用，而不是把相同的代码写很多次。在本文中，我们将探索函数的基本概念，如基本语法、如何定义和调用、范围和参数。

函数的定义

您在过去的课程中还看到很多定制功能 - 在代码中定义的功能，而不是在浏览器中。每当您看到一个自定义名称后面都带有括号，那么您使用的是自定义函数。

//函数的2种常用的定义方式
    function f1(){
        console.log('f1函数')
    }
    let f2=function(){
        console.log('f2函数')
    }
    console.log(arr1)
    console.log(arr2)
    //3.数组的遍历
    arr2.forEach(function(e,i){
        console.log(e,i)
    })
    //简化为 箭头函数的表现形式
    arr2.forEach((e,i)=>{
        console.log(e,i)
    })
    //4.数组的筛选,原数组不会被改变，筛选出来的结果返回到新数组中
    let arr3 = arr2.filter((e,i)=>{
        return e.age<42
    })
    console.log(arr3)

JS-dom操作

事件是发生在你正在编程的系统中的事情——当事件发生时，系统产生（或“触发”）某种信号，并提供一种机制，当事件发生时，可以自动采取某种行动（即运行一些代码）。事件是在浏览器窗口内触发的，并倾向于附加到驻留在其中的特定项目。这可能是一个单一的元素，一组元素，当前标签中加载的 HTML 文档，或整个浏览器窗口。有许多不同类型的事件可以发生。

<p>

什么是dom操作？和html进行交互<br>

1.获取html标签，返回一个元素对象<br>

2.设置值<br>

</p>

<input id="input1" type="text" value="aa">

<ul id="ul1">

<li>1-a-12</li>

<li>2-b-13</li>

<li>3-c-14</li>

</ul>

<button οnclick="changeText()">替换按钮</button>

<ul>

<li>onclick属性表示一个点击事件属性</li>

<li>onclick属性值是一个函数名称()</li>

<li>表示一旦点击该按钮，就调用这个函数</li>

</ul>

JS代码：

//1.单个的设置

//1.1获取

let input1=document.getElementById('input1')

//1.2设置值

input1.value='曹操'

//2.批量的设置

let arr2=[

{id:1,name:'曹操',age:40},

{id:2,name:'刘备',age:41},

{id:3,name:'孙权',age:42},

]

//2.1获取ul

let ul1=document.getElementById('ul1')

function changeText(){

//2.2替换

let s=''

arr2.forEach((e)=>{

s+=`<li>${e.id}-${e.name}-${e.age}</li>`

})

ul1.innerHTML=s

}

技术细节

炫酷的js动画：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>心动的感觉</title>
    <style>
        /* 定义动画 */
        @keyframes jump{
            from{
                transform: scale(0.5);
                opacity: 0.5;
                
            }to{
                transform: scale(2.0);
                opacity: 1;
                
            }
        }
        /* 定义一个iou旋转动画 */
        @keyframes circles{
            from{
                transform: rotate(0deg);
                z-index: 1;
            }to{
                transform: rotate(360deg);
                /*z-index: -1;*/
            }
        }
        .f{
            width: 170px;
            height: 160px;
            /* border: 1px solid rebeccapurple; */
            position: relative;
            left: 200px;
            top: 200px;
            /* 给父元素绑定动画 */
            /* animation: jump 1s ease alternate infinite; */
        }
        .m{
            animation: jump 1s ease infinite alternate;   
        }
        .f>div{
            position: absolute;
        }
        /* 两个圆 */
        .z1,.z2{
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background-color: red;
        }
        .z2{
            left: 70px;
        }
        .z3{
            width: 100px;
            height: 100px;
            background-color: red;
            left: 35px;
            top: 35px;
            transform: rotate(45deg);
        }
        .z4{
            top: 50px;
            left: 50px;
            font-size: large;
            color: aliceblue;
            z-index: -1;
        }
        .z4c{
            animation: circles 1s linear 0.5s infinite alternate;
        }
        button{
            width: 80px;
            height: 40px;
            background-color: rgb(39, 141, 39);
            border: none;
            color: white;
            font-size: large;
            border-radius: 10px;
            cursor: pointer;
            box-shadow: 0 8px 5px gray;
            margin-left: 20px;
        }
        button:active{
            transform: translate(5px,5px);
        }
    </style>
</head>
<body>
    <button onclick="start1()">开始</button>
    <button onclick="stop1()">停止</button>
    <div id="divF" class="f">
        <div class="z1"></div>
        <div class="z2"></div>
        <div class="z3"></div>
        <div id="z4" class="z4">I&emsp;o&emsp;u</div>
    </div>
</body>
<script>
    //1.获取
    let divF=document.getElementById('divF')
    let z4=document.getElementById('z4')
    function start1(){
        //2.设值（不能使用关键字class）
        divF.className='f m'
        z4.className='z4 z4c'
    }
    function stop1(){
        //2.设值（不能使用关键字class）
        divF.className='f'
        z4.className='z4'
    }
</script>
</html>

强盛集团实现薪资翻倍功能：

<!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>
    <style>
        button{
        width: 100px;
        height: 40px;
        border: none;
        outline: none;
        color: white;
        border-radius: 8px;
        font-size: large;
        color: seashell;
        cursor: pointer;
        margin-left: 40px;
    }
    .fb>button:nth-child(1){
        background-color: rebeccapurple;
    }
    .fb>button:nth-child(2){
        background-color: goldenrod;
    }
    .fb>button:nth-child(3){
        background-color: green;
    }
    .fb>button:nth-child(4){
        background-color: rgb(11, 171, 235);
    }
    /* 鼠标放上去，有个阴影 */
    button:hover{
        box-shadow: 10px 10px 10px rebeccapurple;
    }
    /* 鼠标点击，动一动 */
    button:active{
        transform: translate(5px,5px);
    }
    /* tbody中的每一个tr隔行变色 */
    tbody>tr:nth-child(odd){
        background-color: skyblue;
    }
    tbody>tr:nth-child(even){
        background-color: rgb(240, 194, 78);
    }
    </style>
</head>
<body>
    <h1 style="text-align: center;">强盛集团员工薪资表</h1>
    <h2 style="text-align: center;">风浪越大，鱼越贵</h2>
    <div class="fb" style="text-align: center;">
    <button onclick="changeText()">生成表格</button>
    <button onclick="doubleMoney()">薪资翻倍</button>
    <button onclick="restEmp()">退休人员</button>
    <button onclick="sumMoney()">薪资总数</button>
</div>
    <table style="margin-top: 30px;" align="center" border="1" cellspacing="0" cellpadding="20">
        <thead>
            <tr>
                <th><a href="javascript:orderEmp('id')">序号</a></th>
                <th><m>姓名</m></th>
                <th><a href="javascript:orderEmp('age')">年龄</a></th>
                <th><a href="javascript:orderEmp('money')">薪资</a></th>
            </tr>
        </thead>
        <tbody id="td1">
            <tr bgcolor="lightskyblue">
                <td>1</td>
                <td>高启强</td>
                <td>36</td>
                <td>2000000</td>
            </tr>
        </tbody>
        <tfoot id="tfoot">
            <tr style="text-align: center; color:rgb(255,255,0);">
                <td colspan="4">薪资总数:</td>
            </tr>
        </tfoot>
    </table>
</body>
<script>
    let arr2=[
        {id:1,name:'高启强',age:36,money:300},
        {id:2,name:'高启盛',age:30,money:200},
        {id:3,name:'唐小龙',age:34,money:100},
        {id:4,name:'唐小虎',age:32,money:50},
        {id:5,name:'陈泰',age:66,money:30},
        {id:6,name:'老默',age:40,money:10},
    ]
    //2.1获取td1元素
    let td1=document.getElementById('td1')
    let tfoot=document.getElementById('tfoot')

    function changeText(){
        //2.2替换
        //调用函数
        createTab(arr2)
    }
    //重复出现的代码，封装成一个函数,把某个数组中的数据放在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.money}</td>
            </tr>`
    })
    td1.innerHTML=s

    }
    let newEmps;
    function doubleMoney(){
        //薪资翻倍后，返回一个新的数组
        newEmps=arr2.map((e)=>{
            e.money*=2
            return e;
        })
        //调用函数
        createTab(newEmps)
    }
    //退休功能
    function restEmp(){
        let newEmps=arr2.filter((e)=>{
            return e.age>65
        })
        //调用函数
        createTab(newEmps)
    }
    //薪资求和
    function sumMoney(){
        let moneySum
        if(newEmps){
            //alert('对翻倍后的数组求和')
            moneySum=newEmps.reduce((sum,e)=>{
                return sum+e.money
            },0)
        }else{
            //alert('对原数组求和')
            moneySum=arr2.reduce((sum,e)=>{
                return sum+e.money
            },0)
        }
        tfoot.innerHTML=`<tr style="text-align: center; color:rgb(255,255,0);">
                <td colspan="4">薪资总数:${moneySum}</td>
            </tr>`
    }
    //排序
    let a = true
    function orderEmp(type){
        a=!a//每调用一次，a取反
        let newEmps2
        switch(type){
            case 'id':
                console.log('根据id排序')
                newEmps2=arr2.sort((e1,e2)=>{
                    return a? e2.id-e1.id : e1.id-e2.id
                })
                break;
            case 'age':
                console.log('根据age排序')
                newEmps2=arr2.sort((e1,e2)=>{
                    return a? e2.age-e1.age : e1.age-e2.age
                })
                break;
            case 'money':
                console.log('根据money排序')
                newEmps2=arr2.sort((e1,e2)=>{
                    return a? e2.money-e1.money : e1.money-e2.money
                })
                break;
        }
        //调用生成tbody的函数
        createTab(newEmps2)
    }
</script>
</html>

js炫酷走马灯：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>走马灯</title>
    <style>
        .f{
            width: 800px;
            height: 100px;
            border-top: 1px solid rebeccapurple;
        }
        .f>div{
            width: 60px;
            height: 40px;
            background-color: white;
            border-radius: 50%;
            float: left;
            margin-left: 20px;
        }
        @keyframes changeColor{
            0%{
                background-color: rgb(236, 65, 65);
            }20%{
                background-color: rgb(235, 176, 68);
            }40%{
                background-color: rgb(28, 148, 28);
            }60%{
                background-color: rgb(35, 35, 165);
            }80%{
                background-color: rebeccapurple;
            }100%{
                background-color: pink;
            }
        }
            .f>div:nth-child(1){
                animation: changeColor 3s ease 0s infinite;
            }
            .f>div:nth-child(2){
                animation: changeColor 3s ease 1s infinite;
            }
            .f>div:nth-child(3){
                animation: changeColor 3s ease 2s infinite;
            }
            .f>div:nth-child(4){
                animation: changeColor 3s ease 3s infinite;
            }
            .f>div:nth-child(5){
                animation: changeColor 3s ease 4s infinite;
            }
            .f>div:nth-child(6){
                animation: changeColor 3s ease 5s infinite;
            }
            .f>div:nth-child(7){
                animation: changeColor 3s ease 6s infinite;
            }
            .f>div:nth-child(8){
                animation: changeColor 3s ease 7s infinite;
            }
            .f>div:nth-child(9){
                animation: changeColor 3s ease 8s infinite;
            }
            .f>div:nth-child(10){
                animation: changeColor 3s ease 9s infinite;
            }
    </style>
</head>
<body id="body">
    <form action="" method="">
    <button onclick="generate">生成</button>
    <input type="text" name="submit1" value=" ">行</form>
    <div class="f">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
<script>
    // function generate(){
        
    // }
    // 1.获取
    let body=document.getElementById('body')
    let s=''
    for(let i=0;i<10;i++){
        s+=`<div class="f">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>`
    }
    body.innerHTML=s
</script>
</html>

效果图：

小结

本节小课堂我们对js核心课程进行了学习，有数据类型转换，变量，简单数组和复杂数组，函数的两种定义方式，js-dom操作，并且通过四个有趣的小项目加以巩固所学到的知识点，这些绚丽的js前端动画特效让我眼前一亮，核心代码也通俗易懂。希望上述内容能带给你们帮助，有需求或者想要讨论前端内容的可以评论或者私信我。看到这里的小伙伴点个赞吧！我们一起学习打卡哟！