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

IIFE JavaScript

在ES5中为了避免全局污染所用的手法。

 (function () {
            var sum = 0;
            for (var i = 0; i <= 100; i++) {
                sum += i;
            }
            console.log(sum);
        })();
小诸葛 IIFE 4-19
评论(0) 浏览(352)

例如封装一个函数求N个数相加之和 JavaScript

方法一：arguments方法【伪数组】

        function add() {
            let sum = 0;
            for (i = 0; i < arguments.length; i++) {
                sum += arguments[i];
            }
            return sum;
        }

方法二:rest参数【真数组】

      function add(...arr) {
            let sum = 0;
            arr.forEach(v => {
                sum += v;
            })
            return sum;
        }

调用函数

        console.log(add(1, 5, 3, 4));
        console.log(add(1, 8, 3, 4, 21));
        console.log(add(1, 25, 6));
小诸葛 N数相加之和 4-19
评论(0) 浏览(312)

Js箭头函数 JavaScript

ES5

 let show = function () {
            console.log("show");
            }
            show()

ES6箭头函数

 let show = () => {
            console.log("show");
        }
        show()
当形式参数只有一个的时候，可以省略（）
 let arr = [1, 2, 3]
        arr.forEach(v => {
            console.log(v);
        })
当代码只有一句话的时候，可以省略{}，自动返回，return可以不写
let arr2 = arr.map(v => v + 10)
        console.log(arr2);
小诸葛 箭头函数 4-19
评论(0) 浏览(319)

阻止事件传播 JavaScript 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            button {
                border: 0;
                width: 350px;
                height: 80px;
                position: fixed;
                font-size: 16px;
                font-weight: bold;
                color: rebeccapurple;
                color: #fff;
                background-color: saddlebrown;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }

            button:hover {
                background-color: cadetblue;
                color: #fff;
            }

            .mc {
                width: 100%;
                height: 100%;
                position: fixed;
                top: 0;
                left: 0;
                background-color: #00000054;
                        z-index: 9;
                        display: none;

            }

            .lodo {
                position: fixed;
                top: 50%;
                left: 50%;
                transform: translate(-50%,-50%);
                height: 300px;
                width: 500px;
                background-color: #fff;
                        z-index: 99;
            }
            h1{
                text-align: center;
                padding: 10px;
                border-bottom: 1px dashed #000;
            }
            input{
                border: 0;
                padding:0 20px;
                background-color: steelblue;
                width: 80%;
                height: 50px;
                outline:none;
                color: #fff;
            }
            input::placeholder{
                color: #fff;
            }
            p{
                padding: 0 10px;
                font-weight: bold;

            }
        </style>
    </head>
    <body>
        <button>点击登录</button>
        <div class="mc">
            <div class="lodo">
                <h1>登录</h1>
                <p>账号：<input type="text" name="" id="" placeholder="请输入账号"></p>
                <p>密码：<input type="text" name="" id="" placeholder="请输入密码"></p>
            </div>
        </div>
        <script>
            let button =document.querySelector("button")
            let mc = document.querySelector(".mc")
            let lodo = document.querySelector(".lodo")
            button.addEventListener("click",function(){
                mc.style.display="block"
            })

            mc.addEventListener("click",function(){
                mc.style.display="none"
            })
             lodo.addEventListener("click",function(e){
                e.stopPropagation()
            })
        </script>
    </body>
</html>
小诸葛 阻止事件传播 4-16
评论(0) 浏览(329)

JS删除指定数组元素 JavaScript 

   //封装函数删除数组中所有的指定的数字
        let arr1 = [3, 2, 1, 2, 5, 1];
        //定义函数
        const deleteNum = (arr, num) => {
            //判断传入值是否为数组
            if (arr instanceof Array) {
                arr.splice(arr.indexOf(num), 1); //获取指定数字的索引并删除
                if (arr.indexOf(num) !== -1) deleteNum(arr, num); //如果数组内还有指定数字进行递归删除
            } else {
                console.warn("请传入数组"); //在控制台输出警告
            }
            return arr1
        };
        deleteNum(arr1, 1)
        console.log(deleteNum(arr1, 1))
小诸葛 数组操作 4-15
评论(0) 浏览(384)

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

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

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

        })

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

小诸葛 load 4-15
评论(0) 浏览(413)

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) 浏览(354)

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) 浏览(324)

友情链接 申请

会飞的鱼 lerte程序员 六思逸 微4e 迎風别葉 峡州仙士之页 郑羊羊咩的窝 微资源论坛 91影视网 拾光博客

I am 小诸葛

是一名前端工程师，独立开发者、博主

最新评论