JS的一些知识点+用JS实现一些简单的动画效果_用js知识做一个表情包动画代码-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_46335802/article/details/124595435

之前的内容记录了在HTML和CSS阶段的一些过程，现在我们来学习JS的一些基础语法。for循环和if判断语句在这里就不做过多的介绍了，咱们具体看代码。

1.获取元素

大家在学习前端的时候可能都会有和我一样的疑问，JS可以帮助我们做些什么，我们的算法如何使用才可以实现我们想要的一些内容，所以在介绍JS的知识点之前，咱们先来看一下如何获取元素。

getElementById() 通过标签的Id名来获取元素
getElementsByTagName() 通过标签的名称来获取元素，返回的是一个数组，比如说我们的代码里面有10个div，我们想要调用第一个我们可以这样写getElementsByTayName(‘div’)[0]; 这样子就可以得到我们想要的第一个标签了。之后其他的方法也有返回数组的，可以参照这个。
getElementsByClassName() 通过类名来获取元素，返回一个数组。
再给大家介绍两个好用的ES6的语法：
（1）querySelector() 获取一个元素，这个也是我们使用起来特别方便的一个，用法类似写CSS。
（2）querySelectorAll() 返回一个元素的数组。
这是我们获取元素的一些方法，有了这些方法咱们就可以利用JS的来帮助我们做许许多多的事情了，下面咱们来介绍一些常用的js的知识。

2.js的数据类型和数据类型转换

1.js的数据类型我们常用的6种，大家需要都记一下，这个在之后还是很有用的。
Number 数字类型
String 字符串类型
Boolean 布尔类型
Undefind 未定义类型
Null 空类型
Object 特殊类型
2. 数据类型的转换
数据类型转换就是我们把某一种数据类型转换为另外一种数据类型的操作。
在我们之后处理数据的时候有许多时候获取到的数据是字符串类型的，需要我们转换一下，才可以完成一些运算。
1.parseInt(n) n转为整数
parseFloat(n)n转为浮点型
Number(n) n转为数字
isNaN（n）判断n是否是NAN
typeOf(n) 查看n的数据类型
2.隐式数据转换
隐式转换区别于上面的是，它是自动发生的，js会按照既定的规则来进行自动转换，针对一些不同的数据类型有不同的数据处理方式，
‘+’用来连接字符串，当我们在使用加号的时候，如果有一项是字符串类型的，那么会自动把另外一项也转换为字符串类型的，例如 ‘1’+2在输出的时候，我们得到的值为12.这种方法我们也常用于字符串的拼接。
‘-’ ‘*’ ‘/’ ‘%’都是转为数字的。

运算符

说完数据类型转换之后，我们就要来看一下运算符了，上面大家看到的加减乘除求余都是我们的算术运算符，还有我们的++ – 递增递减运算符，这些概念就不一一阐述了，我想强调的只有一个比较运算符
‘==’ 等于只比较内容另外一个 ‘= = =‘恒等于不仅仅比较内容，还会比较数据类型。

数组

数组也是我们的一种数据类型，是上面的Object类型中的，数组顾名思义，用来将一组数据集合在一起，通过一个变量就可以访问一组数据的，在这里我们经常和for循环搭配使用，冒泡排序就是这里的一个重点。
创建一个数组
var arr = [1,2,4,75,62,856]
这就是一个数组，用[]表示。在这里先学习下数组的遍历，就是得到我们数组中的全部数据。
我们可以利用‘数组名.length’来快速获取数组的长度，结合我们的for循环就可以快速遍历我们的数组
for(var i = 0;i<arr.length; i++)就可以遍历到我们整个数组内容。

冒泡排序

冒泡排序的思想不在这里做过的的阐述，具体看代码，我们来使用JS来完成下

var arr = [78,56,12,47,38,72,3,23];//首先我们随便定义一个数组

for(var i = 0; i<arr.length-1;i++){//这里数组长度减一就是冒泡排序的思想。外层循环管遍历的次数，每一遍就可以筛选出一个最大的数字，我们就可以不用再去得到它
for(var j = 0; j<arr.length-i-1;j++){//内层循环管每趟交换的次数，-1是为了防止越界
		if(arr[j]>arr[j+1]){
			var temp = arr[j+1];
			arr[j+1] = arr[j];
			arr[j] = arr[j+1];
			}
	}
}

这样我们就可以做到冒泡排序了

js内置对象-数组对象

在js中我们数组的内置对象，可以帮助我们来做很多的事情，
unshift() 将元素添加到数组的开头。
shift()将开头的第一个元素删除。
push()在数组的末尾添加一个元素。
pop()删除数组最后一个元素。
reverse()翻转数组。
sort()数组排序，这个需要优化一下
sort( function(a,b) {return a-b})这个是升序排列
join(规则) 按照指定规则返回数组中的字符串例如join(+) 返回的就是a+b。
splice(x,y,newEI)从元素的X下标开始，删除Y个元素，并添加新的元素。
slice(shart,end)从指定位置返回字符串。end可有可无
concat()字符串拼接，把一个数组添加到另一个数组的后面。

有了这些方法我们在对数组进行操作的时候效率直接翻倍了。

Math数学对象

js还为我们提供了数学内置对象许多的方法，也来看下
Math.abs(n)返回n的绝对值
Math.ceil(n)向上取整
Math.floor(n)向下取整
Math.round(n)四舍五入
Math.random()返回（0,1]的一个随机数
这个给大家添加一个可以返回任意区间的随机数函数
function rand(max,min){
return Math,round(Math.random()*(max-min)+min)
}
Math.PI 圆周率
Math.pow(n,m) 返回n的m次方
Math.sqrt(n)开平方

Date日期对象

js的日期对象也是可以帮助我们完成许多事情的。

日期对象不同的是需要我们使用过new Date()实例化对象才能使用
var date = new Date();
getFullYear()年
getMonth()月【0-11】我们在使用的使用可以getMonth()+1来得到月份
getDate()日
getDay()星期
getHour()小时
getMinutes()分钟
getSecond() 秒
getTime()获取1970 01 01至今的毫秒数

字符串对象

str.length 字符串的长度
str.toUppercase() 转换为大写
str.toLowercase()转换为小写
str.split(x) 字符串的裁剪，按照某种格式（x）返回一个数组
str.indexOf()获取子元素的下标，如果不存在返回-1
str,substring(start,stop)返回start与stop之间的内容，左闭右开
str.substr(start,length) 从start的位置，返回指定length的内容
str,replace(x,y) 替换

函数

先来了解一下函数的构成。
function 函数名(参数1,参数2…){
执行语句
}
函数名()

函数的构成真的很简单，但是我们如何使用它是一个考验，需要我们大家多多练习

有了以上的知识后，我们就可以利用js做一些简单的效果了。有许许多多的案例，这里给大家做一个小球弹跳的案例。
先来看下我们要实现的效果
在这里插入图片描述

我们希望这个小球在随机位置以随机速度出发在碰到盒子的边框后会弹走以此循环。

<!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>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .wrap {
            width: 800px;
            height: 300px;
            position: relative;
            margin: 0 auto;
            border: 1px solid black;
        }
        
        .ball {
            width: 40px;
            height: 40px;
            background-color: pink;
            border-radius: 50%;
            position: absolute;
            top: 130px;
            left: 0;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <div class="ball"></div>
</body>
<script>
    //小球要实现随机方向，随机速度，就一定会用到随机函数，
    //既然是碰撞反弹，并不能是垂直或者水平，我们需要给小球运动的方向加上X,Y的方向
    //最后我们需要做出边界处理，这里的边界处理，我们根据自己设置的盒子大小来判断就可以了


    //获取和定义我们需要的一些元素
    var dBall = document.querySelector('.ball');

    var vx = 0;
    var vy = 0;

    var timer = null;

    //随机函数

    function rand(min, max) {
        return Math.round(Math.random() * (max - min) + min)
    }

    // 我们先来给小球一个随机起点和速度
    function randSpend() {
        // 随机起点
        dBall.style.left = rand(0, 760) + 'px';
        dBall.style.top = rand(0, 260) + 'px';

        //随机速度
        //判断速度的时候需要加方向
        vx = Math.random() > 0.5 ? rand(3, 10) : -rand(3, 10);
        vy = Math.random() > 0.5 ? rand(3, 10) : -rand(3, 10);
    }
    randSpend()
        //启动定时器
    timer = setInterval(
        function() {
            var l = dBall.offsetLeft + vx;
            var t = dBall.offsetTop + vy;


            if (l > 760) {
                l = 760;
                vx = -vx;
            } else if (l < 0) {
                l = 0;
                vx = -vx;
            }
            if (t > 260) {
                t = 260;
                vy = -vy;
            } else if (t < 0) {
                t = 0;
                vy = -vy;
            }
            dBall.style.left = l + 'px';
            dBall.style.top = t + 'px';
        }, 30)
</script>

</html>

js的分享会持续更新