JS期末重点(全是重点，建议全部学会)

最新推荐文章于 2024-04-03 13:37:50 发布

tree746

最新推荐文章于 2024-04-03 13:37:50 发布

阅读量574

点赞数 1

文章标签： javascript 前端

本文链接：https://blog.csdn.net/qq_61095698/article/details/131077538

版权

1、筛选数组

// 筛选数组到新数组中
    let x = [1, 2, 3, 4, 5];
    let y = [];
    for (let i = 0; i < x.length; i++) {
        if (x[i] > 2) {
            // 将x中大于2的数字筛选出来,放到y中
            y[y.length] = x[i];
        }
    }
    console.log(y);

2、利用函数求出参数中的最大值

// 做这题之前，需要知道arguments是什么
    // arguments是一个内置对象，用来获取实参,下面是一个arguments的实例
    function fn() {
        // 得到了Arguments的对象，里面是三个值，1,2,3,这三个是实参
        // Arguments(3) [1, 2, 3, callee: ƒ, Symbol(Symbol.iterator): ƒ]
        console.log(arguments); // 打印arguments对象
        // 长度3
        console.log(arguments.length); // 打印arguments的长度
        // 1
        console.log(arguments[0]);  // 获取实参的第一个值
    }
    fn(1, 2, 3);

    // 做题，思路是利用arguments对象进行遍历得到每一个值后确定最大值
    function maxArguments() {
        // 确立一个max对象
        let max = arguments[0];
        for (let i = 1; i < arguments.length; i++) {
            if (arguments[i] > max) {
                max = arguments[i];
            }
        }
        console.log(max);
    }
    // 结果:4
    maxArguments(1, 2, 3, 4);
    // 结果:3
    maxArguments(3, 1, 2);

3、生成指定范围的随机数

利用Math，数学对象里的random来生成,random有随机的意思

 // 公式为:Math.floor(Math.random*(max-min+1)+min)
    // 生成1到3的随机数，不解释，公式直接背就行，floor的意思是向下取整
    console.log(Math.floor(Math.random() * (3 - 1 + 1) + 1));

4、倒计时案例

 // 倒计时主要是对于时间的一个计算。
    function countDown() {
        // 现在的时间
        // +new Date是new Date().getTime的缩写
        // new Date().getTime()是获取时间戳的意思
        let nowTime = +new Date();
        // +new Date("2023-10-1");得到2023-10-1时，0点的时间戳
        let inputTime = +new Date("2023-10-1");
        // 结束时间减去现在的时间，得到这期间的时间戳
        // 时间戳是以毫秒的形式存在的，1秒为1000毫秒
        let timer = (inputTime - nowTime) / 1000; // 得到总秒数
        // 总秒数除以60得到总分钟,总分钟除以60得到总小时，总小时除以24得到总天数
        // javaScript里的除法默认是浮点型,所以我们需要得到整数类型的天数
        // parseInt,转换为整数
        let day = parseInt(timer / 60 / 60 / 24);
        // 当day小于10的时候，转为09,08这样的情况
        day = day < 10 ? '0' + day : day;
        // 总秒数除以60得到总分钟,总分钟除以60得到总小时,求余24得到小时
        let hour = parseInt(timer / 60 / 60 % 24);
        hour = hour < 10 ? '0' + hour : hour;
        // 后面同理
        let m = parseInt(timer / 60 % 60);
        m = m < 10 ? '0' + m : m;
        let s = parseInt(timer % 60);
        s = s < 10 ? '0' + s : s;
        console.log(day + "天" + hour + "时" + m + "分" + s + "秒");
    }
    countDown();

5、筛选数组

let arr = [1500, 2000, 1200, 2100];
    let newArr = [];
    for (let i = 0; i < arr.length; i++) {
        if (arr[i] < 2000) {
            // push,在数组最后添加元素
            newArr.push(arr[i]);
        }
    }
    console.log(newArr);
    for (let i = 0; i < arr.length; i++) {
        if (arr[i] < 2000) {
            // push，等价于这个
            newArr[newArr.length] = arr[i];
        }
    }
    console.log(newArr);

6、统计出现最多的字符和次数

// 思路是什么？
    // 可以使用对象，键值对的形式来进行一个数据的统计,不多废话，直接开始
    let countObj = {};
    let arr = "apple";
    for (let i = 0; i < arr.length; i++) {
        // 如果countObj中存在该字符,就让该字符的数量+1
        // charAt是拿到单一字符的函数
        if (countObj[arr.charAt(i)]) {
            countObj[arr.charAt(i)]++;
        }
        // 不存在，就让该字符数量为1
        else {
            countObj[arr.charAt(i)] = 1;
        }
    }
    // 还需要求出最大值，这个没什么难度，确立一个max的思想
    let max = 0;
    for (let j in countObj) {
        // j是countObj里的每一个键
        // countObj[j] 是 countObj的值
        if (countObj[j] > max) {
            max = countObj[j];
        }
    }
    console.log(max);

7、显示隐藏密码明文

<!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>
</head>

<body>
    <!-- 一个输入框 -->
    <input type="text">
    <button>点击进入密码形式，二段点击后切换回归</button>
</body>
<script>
    // 当按钮被点击后，将type改为password,密码形式
    let button = document.querySelector("button");
    let input = document.querySelector("input");
    let flag = 1;
    button.addEventListener("click", function () {
        if (flag === 1) {
            flag = 0;
            input.type = "password";
        }
        else {
            flag = 1;
            input.type = "text";
        }

    })
</script>

</html>

8、下拉菜单(简易版)

<!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>
</head>
<style>
    ul li ul li {
        display: none;
    }
</style>

<body>
    <ul>
        <li>
            <a href="#">1</a>
            <ul>
                <li>内容1</li>
                <li>内容2</li>
                <li>内容3</li>
            </ul>
        </li>
    </ul>
    <script>
        var li = document.querySelectorAll("ul li ul li");
        var a = document.querySelector("a");
        a.onmouseover = function () {
            for (var z = 0; z < li.length; z++) {
                li[z].style.display = "block"
            }
        }
        a.onmouseleave = function () {
            for (var z = 0; z < li.length; z++) {
                li[z].style.display = "none"
            }
        }
    </script>
</body>

</html>

9、简易留言板

<!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>
</head>

<body>
    <textarea name="" id="" cols="30" rows="10"></textarea><button>发布</button>
    <h4>发布的内容展示于下方</h4>
    <ul></ul>
</body>
<script>
    var button = document.querySelector("button");
    var ul = document.querySelector("ul");
    var textarea = document.querySelector("textarea");
    button.addEventListener("click", function () {
        var value = textarea.value;
        var li = document.createElement("li");
        li.innerText = value;
        ul.appendChild(li);
        a = document.createElement('a');
        a.innerText = "删除";
        a.href = "#";
        a.style.marginLeft = "10px";
        li.appendChild(a);
        a.addEventListener("click", function () {
            // 获取a标签的父级节点
            ul.removeChild(this.parentElement)
        })
    })

</script>

</html>

10、angle鼠标跟随(图片需要自己插入)

<!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>
</head>

<body>
    <img src="angel.gif" alt="" style="position: absolute;">
</body>
<script>
    var img = document.querySelector('img');
    document.addEventListener("mousemove", function (e) {
        var x = e.pageX;
        var y = e.pageY;
        img.style.top = y - 40 + "px";
        img.style.left = x - 50 + "px";
    })
</script>

</html>

11、倒计时(定时器的小用法)

<!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>
</head>

<body>
    <input type="text" name="" id="">
    <button>点击发送短信</button>
</body>
<script>
    var button = document.querySelector("button");
    var x = 3;
    button.addEventListener("click", function () {
        button.disabled = true;
        var time = setInterval(function () {
            if (x == 0) {
                clearInterval(time);
                button.disabled = false;
                button.innerHTML = "点击发送短信";
                x = 3;
            } else {
                button.innerHTML = "还剩" + x + "秒"
                x--;
            }
        }, 1000)
    })
</script>

</html>