用户输入自己的【姓名年龄爱好】 + 加CP【姓名年龄爱好】，点击按钮，页面显示该用户的信息点击提交按钮，JSON显示用户信息+副本信息（副本初始值是{}）

最新推荐文章于 2023-03-30 19:53:52 发布

小粗腿Cc

最新推荐文章于 2023-03-30 19:53:52 发布

阅读量1.3k

点赞数 1

文章标签： vscode javascript 前端 html5

本文链接：https://blog.csdn.net/weixin_45249263/article/details/123838748

版权

本文主要是利用了BOM、DOM和json/js数据的转换等知识来综合操练的一个小例子

例子如下：

用户输入自己的【姓名年龄爱好】 + 加CP【姓名年龄爱好】，点击按钮，页面显示该用户的信息

点击提交按钮，JSON显示用户信息+副本信息（副本初始值是{}）【√】

点击拷贝按钮：input中显示副本的信息

修改副本后再次点击提交,JSON显示更新后用户信息+副本信息（副本初始值是{}）

<!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>Document</title>
</head>

<body>
    <!-- 
    用户输入自己的【姓名 年龄 爱好】 + 加CP【姓名 年龄 爱好】，点击按钮，页面显示该用户的信息
   点击提交按钮，JSON显示用户信息+副本信息（副本初始值是{}）【√】
   {
     name:"隔壁老王",
     age:50,
     hobbies:["敲门","串门","打门"](数组)
     cp:{
       name:"包租婆",
       age:80,
       hobbies:["键盘","榴莲","搓衣板"]
     }
   }
   点击拷贝按钮：input中显示副本的信息
   修改副本后再次点击提交,JSON显示用户信息+副本信息（副本初始值是{}）        
     -->
    <h3>本尊</h3>
    姓名<input type="text" id="mipName"><br>
    年龄<input type="text" id="mipAge"><br>
    爱好<input type="text" id="mipHobbies"><br>
    <hr>

    <h3>那口子</h3>
    姓名<input type="text" id="cipName"><br>
    年龄<input type="text" id="cipAge"><br>
    爱好<input type="text" id="cipHobbies"><br>

    <button id="btnUpdate">提交</button>
    <button id="btnCopy">拷贝</button>

    <p id="pMaster">本体</p>
    <p id="pCopy">副本</p>

    <script>
        var master = {
            name: "隔壁老王",
            age: 50,
            hobbies: ["敲门", "串门", "打门"],
            cp: {
                name: "包租婆",
                age: 80,
                hobbies: ["键盘", "榴莲", "搓衣板"]
            }
        }
        var copy = null;

        function deepCopy(obj) {
            var objCopy = {}

            for (var attr in obj) {
                var value = obj[attr]

                if (value instanceof Array) {
                    objCopy[attr] = JSON.parse(JSON.stringify(value))
                }

                // 对象
                else if (typeof (value) === "object") {
                    // 将烤好的副本赋值给objCopy.cp
                    objCopy[attr] = deepCopy(value)
                }

                // 基本数据类型
                else {
                    objCopy[attr] = value
                }
            }
            return objCopy
        }

        function formShowObj(obj) {
            console.log("formShowObj", obj);

            mipName.value = obj.name || ""
            mipAge.value = obj.age || ""
            mipHobbies.value = obj.hobbies ? obj.hobbies.join(",") : ""

            if (obj.cp) {
                cipName.value = obj.cp.name
                cipAge.value = obj.cp.age
                cipHobbies.value = obj.cp.hobbies ? obj.cp.hobbies.join(",") : ""
            } else {
                cipName.value = ""
                cipAge.value = ""
                cipHobbies.value = ""
            }
        }

        // 保存副本并显示
        btnUpdate.onclick = function () {
            // 保存副本
            if (copy) {
                copy.name = mipName.value
                copy.age = mipAge.value * 1
                copy.hobbies = mipHobbies.value.split(",")

                copy.cp.name = cipName.value
                copy.cp.age = cipAge.value * 1
                copy.cp.hobbies = cipHobbies.value.split(",")
            }
            // console.log("copy updated",copy);

            pMaster.innerText = JSON.stringify(master)
            pCopy.innerText = JSON.stringify(copy)
        }

        /* 显示副本的信息于表单 */
        btnCopy.onclick = function () {
            copy = deepCopy(master)
            // copy = master
            formShowObj(copy)
        }
    </script>
</body>

</html>

小粗腿Cc

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
用户输入自己的【姓名年龄爱好】 + 加CP【姓名年龄爱好】，点击按钮，页面显示该用户的信息点击提交按钮，JSON显示用户信息+副本信息（副本初始值是{}）

本文主要是利用了BOM、DOM和json/js数据的转换等知识来综合操练的一个小例子
复制链接

扫一扫