js 使用-CSDN博客

本文链接：https://blog.csdn.net/m0_63159952/article/details/135656929

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <div>

    </div>
    

    <script>
        // 1、声明变量、数据类型  var   let    const
        var num = 10; // 数字类型，= 10； = 11.5； = 0.5；
        var str = "内容"; // 字符串类型 可用双引号 "" 、或单引号 '' 、以及模板字符串 `  `;
        str = '拼接方式' + num;
        str = `模板字符串方式${num}`;
        // 布尔值
        var bool = false;
        // 控制台输出
        console.log(str, "str类型是-->", typeof str, ",num类型是->", typeof num,",bool类型是->", typeof bool);
        
        // 数组
        var arr = []; // 声明可以直接给空，也可以先给初始值，后续都可以加内容
        arr[0] = 1;
        console.log(arr, "arr类型是->", typeof arr);

        // 对象
        // var obj = {}  // 初始给空对象
        var obj = {
            id: 1,
            name: '张三'
        }
        obj.id = 2;
        console.log(obj, obj.id, "obj类型是-->", typeof obj);

        // 空类型
        var any = null;
        console.log(any, "null类型是->", typeof any);

        console.log('------2------');

        // 2、流程控制 if、 else、 else if、 switch、while、for
        for(var i=0; i< 5; i++) {
            if (i == 4) {
                break; // 跳出循环
            } else if (i < 2) {
                continue; // 跳过当前循环
            } else {
                // 三目运算
                var text = i==2 ? '等于' : '不等于';
                console.log(i + '=2' + text);
            }
            console.log("循环第", i);
        }

        // 与(&&) 或(||) 非(!), 短路与、短路或
        if (true && true) {}
        if (false || true) {}
        if (!bool) { // !bool 等价于 值 等于 false 就成立
            console.log('假');
        }

        console.log('------3------');

        // 3、数组和对象的操作
        var arr = [20, 30];
        // 最前面加一项
        arr.unshift(10);
        // 最后加一项
        arr.push(40);
        console.log(arr);
        // 删除指定项
        // arr.splice(2, 1); // [10, 20, 30, 40]  下标为2的被删掉  30没了
        console.log('原数组被删除->', arr.splice(2, 1));
        console.log('原数组', arr);

        var obj = {
            id: 1
        };
        console.log("1.查看obj->", obj);
        obj.name = "张三"; // 对象存在对应属性就修改，不存在就添加
        console.log("2.查看obj->", obj);
        delete obj.id; // 删除对象的某个属性
        console.log("3.查看obj->", obj, "obj.id->", obj.id);


        // 遍历数组
        for(var i=0; i <arr.length; i++) {
            console.log('for遍历数组下标', i, arr[i]);
        }
        // arr.forEach(item => {})
        var arrObj = [{id: 1}, {id: 2}];
        arrObj.forEach((item, index) => {
            // 如果数组的每一项是对象
            // item.name = "666"
            console.log("forEach遍历", item, index);
        })
        // 遍历对象
        for(key in obj) {
            console.log("属性名",key,"值",obj[key]);
        }
        console.log("------4------");

        // 4、函数
        function testFun() {
            console.log("testFun被调用");
        }
        // 调用函数
        testFun();
        // 立即执行函数
        (function () {
            console.log("立即执行函数");
        }) ();
        // 函数有返回值
        function testReturnFun(x, y) {
            return x + y;
        }
        var sum = testReturnFun(10,20); // 函数的返回值赋值给变量
        var sumFun = testReturnFun; // 函数体赋值变量
        // console.log(sumFun);
        console.log(sum,testReturnFun(10,20), sumFun(10,20));
        // 匿名函数赋值给变量
        var sumFun2 = function(x, y) {
            return x + y;
        }
        // sumFun2(10, 20) // 有返回值的必须要用东西来接收或者赋值给变量
        console.log(sumFun2(10, 20));

        var obj = {
            tname: '666',
            sumFun: function(x, y) {
                return x + y;
            }
            // // 或者
            // sumFun: (x, y) => {
            //     return x + y;
            // }
            // // 或者
            // sumFun(x, y) {
            //     return x + y;
            // }
        }
        console.log(obj.sumFun(50,50));

        // 函数作为参数
        function fun(x, y, fn) {
            fn(x, y);
        }
        fun(10, 20, function(x, y) {
            console.log('函数作为参数');
        })

        console.log("------5------");

        // 5、json
        // JSON.stringify(obj)  转成了json文本也就是一串json字符串
        var objData = { id: 1, name: '张三'}
        console.log(JSON.stringify(objData));
        // JSON.parse(jsonData)  转成js对象
        var jsonData = '{ "id": 1, "name": "张三"}'
        console.log(JSON.parse(jsonData));

        console.log("------6------");

        // 6、时间日期
        // let date = new Date('2024/01/01'); // 指定时间
        // let date = new Date(1705474285133); // 指定时间
        let date = new Date(); // 当前时间
        console.log(date.getTime()); // 获取时间戳


        console.log("------7------");

        // 7、延时器、定时器
        setTimeout(() => {
            console.log("倒计时结束后执行");
        }, 1000 * 3);

        var setTime = null;
        setTime = setInterval(() => {
            console.log("间隔1秒执行一次");
        }, 1000); // 多少毫秒执行一次， 这个页面不用需要清除调

        setTimeout(() => {
            clearInterval(setTime);
        }, 1000 * 13);
        
        

    </script>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .item-style {
            color: red;
        }
        .bg {
            background: black;
        }
    </style>
</head>
<body>

    <div>
        <button id="btn_1">给box加子元素</button>
        <button class="btn_2">删除box子元素下标为0的</button>

        <div class="box"></div>

        
        <button id="btn_3" onclick="setContent()">innerText修改自己文本</button>
        
    </div>

    <script>
        // 获取DOM元素
        var box = document.querySelector('.box');
        var btn_1 = document.querySelector('#btn_1');
        var btn_2 = document.querySelector('.btn_2');
        var btn_3 = document.getElementById("btn_3");

        console.log(btn_1);
        console.log(btn_2);
        console.log(box);

        let count = 0;

        // 点击事件
        btn_1.onclick = function() {
            count++;
            // 创建元素
            var devNode = document.createElement('div');
            devNode.className = 'item-style bg';
            devNode.innerText = "文本修改"+count;
            // 把创建的元素添加父元素身上
            box.appendChild(devNode);
        }

        btn_2.onclick = function () {
            // 删除某个子元素
            box.removeChild(box.childNodes[0]);
        }

        function setContent() {
            // box.innerHTML = `<div>内容2内容2内容2</div>`
            // box.style.color = "red"
            btn_3.innerText = "innerText";
            btn_3.style.background = "#ccc";
            btn_3.style.borderColor = "#fff";
        }


    </script>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style></style>
</head>
<body>
    <div>
        <button class="btn_1">点击跳转百度</button>
        <button class="btn_2">点击新窗口打开百度</button>
        <button class="btn_3" onclick="setItem()">设置缓存</button>
        <button class="btn_3" onclick="getItem()">获取缓存</button>
    </div>

    <script>
        var btn_1 = document.querySelector('.btn_1');
        var btn_2 = document.querySelector('.btn_2');
        btn_1.onclick = function newDoc(){
            window.location.assign("http://www.baidu.com")
        }

        btn_2.onclick = function openWin() {
            window.open("https://www.baidu.com");
        }

        function setItem() {
            // 存的数据类型是 String, String
            // localStorage.setItem("arr", [10,20]);
            localStorage.setItem("arr", JSON.stringify([10,20]));
            // localStorage.setItem("num", 123);
            // localStorage.setItem("obj", {id: 1});
            // localStorage.setItem("obj", {id: 1});
            sessionStorage.setItem("arr", JSON.stringify([10,20]));
        }

        function getItem() {
            let arr = localStorage.getItem("arr");
            console.log(JSON.parse(arr));
            // console.log(localStorage.getItem("num"));
        }
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <div onclick="getList()">
        请求接口
    </div>

    <div onclick="postApiReg()">
        注册
    </div>

    <script>
        function getList(){
            var xhr = new XMLHttpRequest();
            xhr.open("GET","http://127.0.0.1:8000/api/user/list",true);
            xhr.onreadystatechange=function(){
                if (xhr.readyState==4 && xhr.status==200){
                    console.log(xhr.responseText);
                }
            }
            xhr.send();
        }
        function postApiReg() {
            // xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
            // xhr.setRequestHeader("Content-Type","application/json;charset=utf-8")
            var xhr = new XMLHttpRequest();
            xhr.open("post","http://127.0.0.1:8000/api/user/reg",true);
            xhr.setRequestHeader("Content-Type","application/json;charset=utf-8")
            xhr.onreadystatechange=function(){
                if (xhr.readyState==4 && xhr.status==200){
                    console.log(xhr.responseText);
                }
            }
            // json提交方式请求头要加这一行 xhr.setRequestHeader("Content-Type","application/json;charset=utf-8")
            // json 参数
            xhr.send(
                JSON.stringify({
                    account: 112233,
                    password: '123456',
                    nickname: '测试56',
                    gender: 1,
                    phone: "1008610011"
                })
            );
            xhr.onload = function() {
                console.log(xhr.responseText);
            }

            // 表单提交方式请求头要加这一行 xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
            // xhr.send('account'+112233+'&password'+'123456');
        }
    </script>
    
</body>
</html>