新手笔记02_JS常用方法

代码都放body里

时间格式化

	<p id="demo01"></p>
    <p id="demo02"></p>

    <script>
        // 对Date的扩展，将 Date 转化为指定格式的String  
        // 月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符，  
        // 年(y)可以用 1-4 个占位符，毫秒(S)只能用 1 个占位符(是 1-3 位的数字)  
        Date.prototype.format = function (fmt) {
            var o = {
                "M+": this.getMonth() + 1,                 //月份 是从0开始的
                "d+": this.getDate(),                    //日
                "h+": this.getHours(),                   //小时
                "m+": this.getMinutes(),                 //分
                "s+": this.getSeconds(),                 //秒
                "q+": Math.floor((this.getMonth() + 3) / 3), //季度
                "S": this.getMilliseconds()             //毫秒
            };

            if (/(y+)/.test(fmt)) {
                fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
            }

            for (var k in o) {
                if (new RegExp("(" + k + ")").test(fmt)) {
                    fmt = fmt.replace(
                        RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
                }
            }

            return fmt;
        }

        // (new Date()).Format("yyyy-MM-dd hh:mm:ss.S") ==> 2021-08-28 22:07:35.644
        document.getElementById("demo01").innerHTML = new Date().format("MM月dd日");
        document.getElementById("demo02").innerHTML = new Date().format("yyyy年MM月dd日hh小时mm分ss秒S毫秒");

    </script>

时间戳转换

	<p id="demo01"></p>
    <p id="demo02"></p>

    <script>

        //获取系统时间戳
        var time = parseInt(new Date().getTime() / 1000);
        // getTime()  通过原型方法直接获得当前时间的毫秒值 = 从 1970 年 1 月 1 日至今的毫秒数

        //时间戳转为普通日期格式 函数
        function getLocalTime(timeS) {
            return new Date(parseInt(timeS) * 1000).toLocaleString();
            // parseInt() 函数可解析一个字符串，并返回一个整数
            // toLocaleString() 方法可根据本地时间把 Date 对象转换为字符串，并返回结果
        }

        document.getElementById("demo01").innerHTML = this.time;
        document.getElementById("demo02").innerHTML = this.getLocalTime(this.time);

    </script>

数组的添加和删除

    <script>

        var arr01 = [1,2,3,4,5,];
        console.log(this.arr01);
        // console.log() 控制台打印

        //删除
        arr01 = [1,2,3,4,5,];
        this.arr01.shift();
        console.log(this.arr01);
        // arr01 = [2,3,4,5]
        // shift() 删除原数组第一项，并返回删除元素的值；如果数组为空则返回undefined 

        arr01 = [1,2,3,4,5,];
        this.arr01.pop();
        console.log(this.arr01);
        // arr01 = [1,2,3,4]
        // pop() 删除原数组最后一项，并返回删除元素的值；如果数组为空则返回undefined 

        //添加
        arr01 = [1,2,3,4,5,];
        a1 = this.arr01.unshift(-1,0);
        console.log(this.arr01);
        console.log(a1);
        // arr01 = [-1,0,1,2,3,4,5]
        // a1 = 7
        // unshift() 将参数添加到原数组开头，并返回数组的长度 

        arr01 = [1,2,3,4,5,];
        a1 = this.arr01.push(6,7);
        console.log(this.arr01);
        console.log(a1);
        // arr01 = [1,2,3,4,5,6,7]
        // a1 = 7
        // push() 将参数添加到原数组末尾，并返回数组的长度 

        arr01 = [1,2,3,4,5,];
        a2 = this.arr01.concat(6,7);
        console.log(a2);
        // a2 = [1,2,3,4,5,6,7]
        // concat() 返回一个新数组，是将参数添加到原数组中构成的 

        // 添加删除
        arr01 = [1,2,3,4,5,];
        this.arr01.splice(1,2,9,0);
        console.log(arr01);
        // a3 = [1,9,0,4,5]
        // splice(start,deleteCount,val1,val2,...) 从start位置开始删除deleteCount项，并从该位置起插入val1,val2,... 

    </script>

定时器

    <p>点击按钮，在等待 3 秒后弹出 "Hello"。</p>
    <button onclick="myFunction()">点我</button>

    <input type="text" id="clock" />
    <button onclick="int=window.clearInterval(int)">停止</button>
    <!-- 清除定时器 window.clearInterval(int); -->

    <script>
        // 设置定时器
        // 方式一
        function myFunction() {
            setTimeout(function () { alert("Hello") }, 3000);
            // setTimeout() 在指定的毫秒数后调用函数或计算表达式
            // setTimeout(code,millisec)
            // code 必需。要调用的函数后要执行的 JavaScript 代码串。 对比 { alert("Hello") }
            // millisec 必需。在执行代码前需等待的毫秒数。 对比 3000 单位毫秒
        }
        // 方式二
        var int = self.setInterval("clock()", 1000);
        // 每 1000 毫秒执行 clock() 函数
        function clock() {
            var d = new Date();
            var t = d.toLocaleTimeString();
            // t = 当前时间
            document.getElementById("clock").value = t;
        }
    </script>

正则表达式检测邮箱地址是否正确

    <input type="text" id="app">
    <input type="submit" value="检测Email地址格式是否正确" onclick="return  ischeckemail() ">
    <script>
        function ischeckemail() {
            var email = document.getElementById("app").value;
            if (email != "") {
                var reg = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;
                // reg = 判断的条件 正则表达式
                // 调用正则验证test()函数
                isok = reg.test(email);
                if (!isok) {
                    alert("邮箱格式不正确，请重新输入！");
                    document.getElementById("app").focus();
                    // focus() 为元素设置焦点
                    return false;
                }
            };
        }
    </script>

页面跳转

页面一

    <button onclick="PageJump()">点击跳转</button>

    <script>
        function PageJump() {
            window.location.href="./YeMianTiaoZhuan02.html";
            // 将地址替换成新 url
        };
        
    </script>

页面二

    <script>
        function PageJump() {
            window.location.href="javascript:history.go(-1)";
        };
    </script>

获取URL中的参数

    <script>
        // 列url = 网址?q1=9&q2=4
        var qs = getQueryString();
        var q1 = qs["q1"]; // 9
        console.log("q1="+q1)

        function getQueryString() {
            var qs = location.search.substr(1), // 获取当前网页的url中"?"符后的字串  
                args = {}, // 保存参数数据的对象
                items = qs.length ? qs.split("&") : [], // 取得每一个参数项,
                item = null,
                len = items.length;

            for (var i = 0; i < len; i++) {
                item = items[i].split("=");
                var name = decodeURIComponent(item[0]),
                    value = decodeURIComponent(item[1]);
                if (name) {
                    args[name] = value;
                }
            }
            return args;
        }

    </script>

字符串转JSON对象，JSON对象转字符串

    <script>
        // JSON字符串转JSON对象
        var text = '{"name":"dong","site":"ccc"}';
        var obj = JSON.parse(this.text);
        // 参数必须符合 JSON字符串 的格式才可以被正确的转换为对象
        console.log(obj);

        // JSON对象转JSON字符串
        var jsonStr = JSON.stringify(this.obj);
        console.log(jsonStr);