微语：代码适合中午敲，早晚出BUG

相册图库图片相册介绍
站长工具各种快捷工具
我的邻居我的小伙伴们
热门文章关注点最多文章
账号注册注册本站账号
技术支持大佬指导员

如何网页加载完成才执行JS JavaScript

使用load,可以让你想要加载的东西放到最后。

window.addEventListener("load", function () {
执行代码

        })

比如图片，当网页一开始的时候，不渲染某些图片，这会导致网页加载速度变慢，我们可以先让网页整体框架加载出来，然后再慢慢加载图片，当然一开始可以传一个比较小的gif动图，显示图片加载中，这样用户体验会稍微好一点，当网页加载完成再把图片渲染到src属性上。

小诸葛 load 4-15

评论(0) 浏览(390)

JS将数组元素颠倒reverse JavaScript

声明以下数组元素

let arr = ["a", "b", "c"]

通过reverse可以让数组元素颠倒过,来如下效果

['c', 'b', 'a']

  let s = arr.reverse(function (v) {
            return v
        })
        console.log(s);

小诸葛 reverse 4-15

评论(0) 浏览(327)

slice区间截取 JavaScript

有如下数组

let arr = ["张飞", "关羽", "马超", "刘备", "吕布", "刘备"]

1.要截取从关羽到最后一位：通过下标截取，关羽的下标是1，就可以通过指定下标截取

let s = arr.slice(1)

结果

 ['关羽', '马超', '刘备', '吕布', '刘备']

2.当我们不知道具体下标的时候可以通过indexOf()来查询下标

let s = arr.slice(arr.indexOf("关羽"))

结果

 ['关羽', '马超', '刘备', '吕布', '刘备']

3.要截取某个区间，比如关羽到刘备，slice(开始下标，结束下标)

let s = arr.slice(1, 3 + 1)

这里为什么后面要 +1？，slice()包含开头下标，不包含结尾，所以必须+1

小诸葛 slice截取 4-15

评论(0) 浏览(300)

JS数组去重 JavaScript

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>数组去重</title>
</head>

<body>
    <script>

        let arr = [5, 1, 5, 3, 8, 9, 8, 6, 1]
        let s = []
        console.log("原数组：", arr)
        arr.forEach(function (v) {
            if (!s.includes(v)) {
                s.push(v);
            }
        });
        console.log(s)
    </script>
</body>

</html>

小诸葛数组去重 4-15

评论(0) 浏览(328)

九九乘法表 JavaScript

九九乘法表

代码

<!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>
        body {
            background-color: #000;
        }

        div {
            display: inline-block;
            text-align: center;
            width: 100px;
            height: 50px;
            line-height: 50px;
            border: 1px solid #ffffff;
            color: #fff;
            margin: 3px;
            font-weight: bold;

        }

        div:hover {
            background-color: #fff;
            color: #000;
        }
    </style>
</head>

<body>
    <script>
        for (i = 1; i <= 9; i++) {
            for (j = 1; j <= i; j++) {
                document.write(`<div>${j}*${i}=${j * i}</div>`)
            }
            document.write("<br/>")

        }
    </script>
</body>

</html>

小诸葛九九乘法表 4-15

评论(0) 浏览(364)

js三种注册事件 JavaScript

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <button class="btn">1</button>
        <button onclick="btn2()">2</button>
        <button class="btn3">3</button>
        <script>
            const Btn = document.querySelector(".btn")
            Btn.onclick=function(){
                console.log("在DOM上注册事件")
            }
            function btn2(){
                console.log("自定义函数")
            }

            const Btn3 = document.querySelector(".btn3")
            Btn3.addEventListener("click",function(){
                console.log("W3C标准注册事件")
            })
        </script>
    </body>
</html>

小诸葛注册事件 3-20

评论(0) 浏览(400)

js获取对象的长度 JavaScript

let obj = {name: 'John', age: 30, city: 'New York'};
let count = 0;
for (let key in obj) {
  if (obj.hasOwnProperty(key)) {
    count++;
  }
}
console.log(count); // 3

小诸葛获取对象长度 3-16

评论(0) 浏览(443)

判断数组元素是否大/小于平均值 JavaScript

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <script>
            // 定义一个数组arr=[23,3,15,7,28,1,40,25,38]，将该数组中小于等于平均数的数字整合到一个新数组arr1中，将大于平均数的数字整合到一个新数组arr2中。
            // （考点：定义数组、遍历数组、操作数组元素方法）  
            let arr = [23, 3, 15, 7, 28, 1, 40, 25, 38]
            let arr1 = []; //小于平均数
            let arr2 = []; //大于平均数
            let sum = 0;

            for (i = 0; i < arr.length; i++) {
                sum = sum + arr[i]
            }
            sum = sum / arr.length
            for (i = 0; i < arr.length; i++) {
                if (sum >= arr[i]) {
                    arr1[arr1.length] = arr[i];
                }
                else{
                    arr2[arr2.length] = arr[i];

                }
            }
            console.log("初始数组：", arr)
            console.log("平均值：", sum)
            console.log("【小于】平均值", arr1)
            console.log("【大于】平均值", arr2)
        </script>
    </body>
</html>

小诸葛数组 3-13

评论(0) 浏览(389)