<![CDATA[木子屋 - 脚本语言]]> http://www.mzwu.com/ zh-cn PBlog2 v2.4 木子屋 http://www.mzwu.com/images/logos.gif http://www.mzwu.com/ 木子屋 http://www.mzwu.com/article.asp?id=5054 <![CDATA[jQuery获取元素自身html代码示例]]> service@mzwu.com(dnawo) Wed,31 May 2023 09:41:39 +0800 http://www.mzwu.com/default.asp?id=5054
复制内容到剪贴板程序代码 程序代码
$("title").prop("outerHTML") ;

]]> http://www.mzwu.com/article.asp?id=5042 <![CDATA[Vue组件学习笔记]]> service@mzwu.com(dnawo) Wed,05 Apr 2023 10:57:09 +0800 http://www.mzwu.com/default.asp?id=5042

一、Vue组件

1.局部组件

复制内容到剪贴板程序代码 程序代码
<div id="app">
    <website></website>
</div>
<script>
    new Vue({
        el: '#app',
        //局部组件
        components: {'website': {template: '<span>自定义局部组件!</span>'}}
    })
</script>

2.全局组件

复制内容到剪贴板程序代码 程序代码
<div id="app">
    <website></website>
</div>
<script>
    //全局组件
    Vue.component('website', {
        template: '<span>自定义全局组件!</span>'
    })

    new Vue({
        el: '#app'
    })
</script>

二、Vue组件间传值

复制内容到剪贴板程序代码 程序代码
<div id="app">
    <!-- name为静态值，url为动态值 -->
    <website name="木子屋" v-bind:url="url"></website>
</div>
<script>
    Vue.component('website', {
        props: ['name', 'url'],
        template: '<span>{{name}} - {{url}}</span>'
    })

    new Vue({
        el: '#app',
        data: {
            url: 'www.mzwu.com'
        }
    })
</script>
]]> http://www.mzwu.com/article.asp?id=5041 <![CDATA[jQuery.ajax多任务异步转同步示例]]> service@mzwu.com(dnawo) Thu,30 Mar 2023 09:07:29 +0800 http://www.mzwu.com/default.asp?id=5041
复制内容到剪贴板程序代码 程序代码
let tasks = []; //任务列表
let counter = 0; //计数器

//任务
let todo = function(){
    if(counter<tasks.length){
        $.ajax({
            url: "/test.ashx",
            data: "task=" + tasks[counter],
            async: true,
            success: function(data){
                console.log(data);
            },
            error: function(){
                console.log("error.");
            },
            complete: function(){
                console.log(counter, tasks.length);
                counter++;
                todo();
            }
        });
    }else{
        console.log("finish.");
    }
}

//初始化任务列表和计数器，开始任务
$("#btn").click(function(){
    tasks = ["task1", "task2", "task3"];
    counter = 0;
    todo();
});

]]> http://www.mzwu.com/article.asp?id=5040 <![CDATA[jQuery.ajax回调函数success和done互换示例]]> service@mzwu.com(dnawo) Wed,29 Mar 2023 20:52:13 +0800 http://www.mzwu.com/default.asp?id=5040
复制内容到剪贴板程序代码 程序代码
$.ajax({
    url: "/test.ashx",
    data: `t=${new Date().getTime()}`,
    success: (data,textStatus,jqXHR) => {console.log("success")},
    error: (jqXHR,textStatus,errorThrown) => {console.log("error")},
    complete: (jqXHR,textStatus) => {console.log("complete")}
});

复制内容到剪贴板程序代码 程序代码
$.ajax({
    url: "/test.ashx",
    data: `t=${new Date().getTime()}`,
})
.done((data,textStatus,jqXHR) => {console.log("done")})
.fail((jqXHR,textStatus,errorThrown) => {console.log("fail")})
.always((jqXHR,textStatus) => {console.log("always")});

有一点比较有意思，我们可以在请求完成后，再调用done方法对回调函数进行赋值，这点和success不同：

复制内容到剪贴板程序代码 程序代码
var jqXHR = $.ajax({
    url: "/test.ashx",
    data: `t=${new Date().getTime()}`
});

//other work here ...

jqXHR.done((data,textStatus,jqXHR) => {console.log("done1")});
jqXHR.done((data,textStatus,jqXHR) => {console.log("done2")});
]]> http://www.mzwu.com/article.asp?id=5032 <![CDATA[H5实现页面全屏显示脚本]]> service@mzwu.com(dnawo) Fri,30 Dec 2022 14:14:46 +0800 http://www.mzwu.com/default.asp?id=5032 1、页面开启全屏

复制内容到剪贴板程序代码 程序代码
function openFullScreen() {
    var doc = document.documentElement;
    if (doc.requestFullscreen) {
        doc.requestFullscreen();
    } else if (doc.msRequestFullscreen) {
        doc.msRequestFullscreen(); //早期IE浏览器
    } else if (doc.webkitRequestFullScreen) {
        doc.webkitRequestFullScreen(); //早期Chrome浏览器
    } else if (doc.mozRequestFullScreen) {
        doc.mozRequestFullScreen();  //早期火狐浏览器
    }
}

2、页面退出全屏

复制内容到剪贴板程序代码 程序代码
function exitFullScreen() {
    var doc = document;
    if(doc.exitFullscreen) {
        doc.exitFullscreen();
    } else if(doc.msExitFullscreen) {
        doc.msExitFullscreen(); //早期IE浏览器
    } else if(doc.webkitExitFullscreen) {
        doc.webkitExitFullscreen(); //早期Chrome浏览器
    } else if(doc.mozCancelFullScreen) {
        doc.mozCancelFullScreen(); //早期火狐浏览器
    }
}

3、判断页面全屏状态

复制内容到剪贴板程序代码 程序代码
function isFullScreen(){
    return !!(document.fullscreenElement || document.msFullScreenElement || document.webkitFullScreenElement || document.mozFullScreenElement);
}
]]> http://www.mzwu.com/article.asp?id=5030 <![CDATA[H5监听移动设备摇一摇功能实现[转]]]> service@mzwu.com(dnawo) Mon,26 Dec 2022 21:46:58 +0800 http://www.mzwu.com/default.asp?id=5030

复制内容到剪贴板程序代码 程序代码
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>摇一摇</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
    <button id="startBtn">开启摇一摇</button>
    <button id="closeBtn">关闭摇一摇</button>
    <script>
        /*
        setDeviceMotion 添加陀螺仪监控
        参数： cb devicemotion的事件处理函数; errCb 不支持devicemotion时的处理回调
        */
        function setDeviceMotion(cb, errCb) {
            if (!window.DeviceMotionEvent) {
                errCb("设备不支持DeviceMotion");
                return;
            }
            if (typeof DeviceMotionEvent.requestPermission === 'function') {
                // IOS13 设备
                DeviceMotionEvent.requestPermission()
                .then(permissionState => {
                    if (permissionState === 'granted') {
                        window.addEventListener('devicemotion', cb);
                    }
                })
                .catch((err) => {
                    errCb("用户未允许权限");
                });
            } else {
                // 其他支持加速度检测的系统
                let timer = setTimeout(function () {
                    errCb("用户未开启权限");
                }, 1000);
                window.addEventListener("devicemotion", (e) => {
                    clearTimeout(timer);
                }, { once: true });
                window.addEventListener("devicemotion", cb);
            }
        }

        /*
        throttle 节流函数
        参数：
        fn 要节流的函数
        interval 节流间隔时间
        start 是否在节流开始时执行 (true在开始时执行，false在结束时执行)
        返回值：
        经过节流处理的函数
        */
        function throttle(fn, interval = 200, start = true) {
            if (typeof fn !== "function") {
                return console.error("请传入一个函数");
            }
            let timer = 0;
            return function (...arg) {
                let _this = this;
                if (timer) {
                    return;
                }
                start && fn.apply(_this, arg);
                timer = setTimeout(() => {
                    (!start) && fn.apply(_this, arg);
                    timer = 0;
                }, interval);
            }
        }

        /*
        addShake 添加摇一摇功能
        参数：cbShake 类型 fn 当用户进行了摇一摇之后要做的事情
        返回值：shakeIndex 开启的第几个摇一摇功能的索引，用来删除监听    
        */
        function addShake(cbShake) {
            const maxRange = 60; //当用户的两次加速度差值大于这个幅度，判定用户进行了摇一摇功能
            const minRange = 10; //当用户的两次加速度差值小于这个幅度，判定用户停止摇动手机
            let isShake = false; //记录用户是否摇动手机
            let lastX = 0,lastY = 0,lastZ = 0;
            function toShake(e) {
                let motion = e.acceleration;
                let {x, y, z} = motion;
                let range = Math.abs(x - lastX) + Math.abs(y - lastY) + Math.abs(z - lastZ);
                if (range > maxRange) {//用户进行了摇一摇
                    isShake = true;
                }
                if (range < minRange && isShake) { // 停止摇一摇
                    cbShake(e);
                    isShake = false;
                }
                lastX = x;
                lastY = y;
                lastZ = z;
            }
            if (!window.shakeEvent) { //建立 shakeEvent 存储所有的摇一摇的处理函数，方便一会取消
                window.shakeEvent = [];
            }
            toShake = throttle(toShake);
            window.shakeEvent.push(toShake);
            setDeviceMotion(toShake, (errMessage) => {
                alert(errMessage)
            })
            return window.shakeEvent.length - 1;//返回该次摇一摇处理的索引
        }

        /*
        删除摇一摇监听
        参数：shakeIndex 摇一摇功能的索引
        */
        function removeShake(shakeIndex) {
            window.removeEventListener("devicemotion", window.shakeEvent[shakeIndex]);
        }

        // 调用摇一摇
        {
            let startBtn = document.querySelector("#startBtn");
            let closeBtn = document.querySelector("#closeBtn");
            let isStartShake = false;
            let shakeIndex;
            // 再次强调 IOS 13.3 需要用户触发，再能开启摇一摇
            startBtn.addEventListener("touchend", () => {
                if (isStartShake) return;
                isStartShake = true;
                shakeIndex = addShake(() => {
                    alert("您进行了摇一摇！")
                })
            });
            closeBtn.addEventListener("touchend", () => {
                if (!isStartShake) return;
                isStartShake = false;
                removeShake(shakeIndex);
            });
        }
    </script>
</body>
</html>

原文链接

[1].H5设备运动事件 DeviceMotionEvent 实现摇一摇功能：https://www.jianshu.com/p/a0d671f723cb]]> http://www.mzwu.com/article.asp?id=5029 <![CDATA[Javascript节流函数]]> service@mzwu.com(dnawo) Mon,26 Dec 2022 19:53:25 +0800 http://www.mzwu.com/default.asp?id=5029

一、什么是节流函数？

在前端开发中，onscroll、onresize、onchange、mousemove等事件的回调函数，总会被频繁的触发调用：

复制内容到剪贴板程序代码 程序代码
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>节流函数</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="//lib.mzwu.com/jquery/jquery-1.12.4.min.js"></script>
</head>

<body>
    <input id="usn" />
    <script>
        $(document).ready(function(){
            let query = function(content){
                console.log("连接服务器查询-", content);
            }

            $("#usn").on("input propertychange", function(){
                query($(this).val());
            })
        });
    </script>
</body>
</html>



我们可以人为干预限制函数调用次数，限制在n秒中只执行一次，2n秒只执行2次，3n秒只执行3次，依此类推，这就是节流函数。

二、Javascript实现节流函数

1.时间差版本

复制内容到剪贴板程序代码 程序代码
<script>
    $(document).ready(function(){
        //节流函数改造器
        let throttle = function(fn, delay) {
            let previous = 0;
            return function() {
                let args = arguments;
                let now = new Date();
                //第一次不查询
                // if(previous == 0){
                //     previous = new Date();
                // }

                if(now - previous > delay) {                        
                    previous = now;
                    fn.apply(null, args);
                }
                // else{
                //     console.log("不查询-", arguments[0]);
                // }
            }
        }

        //直正要执行的函数,待改造成节流函数
        let query = function(content){
            console.log("连接服务器查询-", content);
        }

        //节流函数,3秒内只执行一次
        let throttle_query = throttle(query, 3000);

        $("#usn").on("input propertychange", function(){
            throttle_query($(this).val());
        })
    });
</script>



2.定时器版本

复制内容到剪贴板程序代码 程序代码
<script>
    $(document).ready(function(){
        //节流函数改造器
        let throttle = function(fn, delay) {
            let timer;
            return function() {
                let args = arguments;
                if(!timer){
                    timer = setTimeout(function(){
                        timer = null;
                        fn.apply(null,args);
                    },delay);
                }
                // else{
                //     console.log("不查询-", arguments[0]);
                // }
            }
        }

        //直正要执行的函数,等待改造成节流函数
        let query = function(content){
            console.log("连接服务器查询-", content);
        }

        //节流函数,3秒内只执行一次
        let throttle_query = throttle(query, 3000);

        $("#usn").on("input propertychange", function(){
            throttle_query($(this).val());
        })
    });
</script>



参考资料

[1].Javascript 实现函数节流(throttle)：https://zhuanlan.zhihu.com/p/367106221
[2].节流函数：https://blog.csdn.net/bhq1711617151/article/details/115556353]]> http://www.mzwu.com/article.asp?id=5024 <![CDATA[ jQuery.ajax向服务器端post提交json数据错误及解决方法]]> service@mzwu.com(dnawo) Sun,11 Dec 2022 23:31:34 +0800 http://www.mzwu.com/default.asp?id=5024

客户端使用 jQuery.ajax向服务器端post提交json数据，代码如下：

复制内容到剪贴板程序代码 程序代码
apiPost = function(url, data){
    $.ajax({        
        url: url,        
        data: data,
        type: "post",
        async: true,
        dataType: "json",
        contentType: "application/json",
        success: function(response){console.log(response)}
    });
}

复制内容到剪贴板程序代码 程序代码
data = {"domain":"mzwu.com","date":"2005-03-28"};
apiPost("demo.ashx", data);

测试发现服务器端获取到的数据不是json格式，而是key/value格式：domain=mzwu.com&date=2005-03-28，对代码稍做修改(data加单引号)：

复制内容到剪贴板程序代码 程序代码
data = '{"domain":"mzwu.com","date":"2005-03-28"}';
apiPost("demo.ashx", data);

测试正常了，但这样不便于修改json数据，借助JSON.stringify方法，完美解决：

复制内容到剪贴板程序代码 程序代码
apiPost = function(url, data){
    $.ajax({        
        url: url,        
        data: JSON.stringify(data),
        type: "post",
        dataType: "json",
        async: true,
        contentType: "application/json",
        success: function(response){console.log(response)}
    });
}

复制内容到剪贴板程序代码 程序代码
data = {"domain":"mzwu.com","date":"2005-03-28"};
data.date = "2022-12-11";
apiPost("demo.ashx", data);
]]> http://www.mzwu.com/article.asp?id=5013 <![CDATA[Javascript字符串拼接三种方法比较]]> service@mzwu.com(dnawo) Sun,16 Oct 2022 23:24:51 +0800 http://www.mzwu.com/default.asp?id=5013
复制内容到剪贴板程序代码 程序代码
let name = "张三";
let tel = "13800000000";
let address = "浙江省杭州市西湖区北山街1号";

方法1：加号拼接法

复制内容到剪贴板程序代码 程序代码
let str1 = "姓名:" + name + "，" + "电话:" + tel + "，" + "地址:" + address;

方法2：replace替换法

复制内容到剪贴板程序代码 程序代码
let str2 = "姓名:{name}，电话:{tel}，地址:{address}".replace("{name}", name).replace("{tel}", tel).replace("{address}", address);

方法3：ES6模板字符串

复制内容到剪贴板程序代码 程序代码
let str3 = `姓名:${name}，电话:${tel}，地址:${address}`;
]]> http://www.mzwu.com/article.asp?id=5001 <![CDATA[手机浏览器打开控制台的方法]]> service@mzwu.com(dnawo) Wed,14 Sep 2022 09:29:43 +0800 http://www.mzwu.com/default.asp?id=5001
复制内容到剪贴板程序代码 程序代码
<script src="https://cdn.jsdelivr.net/npm/eruda"></script>
<script>eruda.init();</script>



经查，发现服务器端js站点SSL证书配置错误，电脑浏览器忽略了这个问题正常加载js所以运行正常，而手机浏览器没有加载js才导致无法使用，重新配置证书，问题解决！

相关链接

[1].eruda官网：https://eruda.liriliri.io/
[2].eruda GitHub：https://github.com/liriliri/eruda]]>