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

本文主要是利用了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.cpobjCopy[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.namecipAge.value = obj.cp.agecipHobbies.value = obj.cp.hobbies ? obj.cp.hobbies.join(",") : ""} else {cipName.value = ""cipAge.value = ""cipHobbies.value = ""}}// 保存副本并显示btnUpdate.onclick = function () {// 保存副本if (copy) {copy.name = mipName.valuecopy.age = mipAge.value * 1copy.hobbies = mipHobbies.value.split(",")copy.cp.name = cipName.valuecopy.cp.age = cipAge.value * 1copy.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 = masterformShowObj(copy)}</script>
</body></html>

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

创建输入控件(input控件、文本框、密码框、单项选择、多项选择、重置与提交按钮的设置)
创建输入控件 input控件的相关概念 input控件的属性 input控件的类型文本框的设置密码框的设置单项选择的设置多项选择的设置重置与提交按钮的设置综合运用相关概念选择题及参考答案 ...
无需用户输入，Adobe提出自动生成高质量合成图像新方法
点击上方"小白学视觉",选择加"星标"或"置顶" 重磅干货,第一时间送达没有用户输入,也能生成高质量的合成图像吗? 编辑:迈威AI研习社 ...
微信小程序开发系列五：微信小程序中如何响应用户输入事件
微信小程序开发系列教程微信小程序开发系列一:微信小程序的申请和开发环境的搭建微信小程序开发系列二:微信小程序的视图设计微信小程序开发系列三:微信小程序的调试方法微信小程序开发系列四:微信小程序 ...
编写python程序、利用循环输出_Python基础编程—用户输入和while循环
温馨提示如果你喜欢本文,请分享到朋友圈,想要获得更多信息,请关注我. 函数input()的工作原理函数input()让程序暂停运行,等待用户输入一些文本.获取用户输入后,Python将其存储在一个 ...
基础知识——用户输入和函数(五)
基础点用户输入:message=input("用户输入:") 函数传递列表参数,并且禁止修改列表:列表为a,函数为func(),调用func(a[:]),此时传递的是列表a的副本 ...
无需用户输入！Adobe提出自动生成高质量合成图像新方法
点击上方,选择星标或置顶,不定期资源大放送! 阅读大概需要15分钟 Follow小博主,每天更新前沿干货本文转载自:机器之心 | 作者:He Zhang等编辑:小舟.杜伟没有用户输入,也能生 ...
Java黑皮书课后题第8章：*8.5（代数：两个矩阵相加）编写两个矩阵相加的方法，编写一个测试程序，提示用户输入两个3*3的矩阵，然后显示它们的和
*8.5(代数:两个矩阵相加)编写两个矩阵相加的方法,编写一个测试程序,提示用户输入两个3*3的矩阵,然后显示它们的和题目题目描述与运行示例破题代码题目题目描述与运行示例 8.5(代数:两 ...
Java黑皮书课后题第4章：*4.17（一个月的天数）编写一个程序，提示用户输入一个年份和一个月份名称的前3个字母（第一个字母使用大写形式），显示该月中的天数。如果月份非法则显示出错信息
*4.17(一个月的天数)编写一个程序,提示用户输入一个年份和一个月份名称的前3个字母(第一个字母使用大写形式),显示该月中的天数.如果月份非法则显示出错信息题目题目概述破题运行示例代码题 ...
java edittext 输入监听_Android应用开发之Android EditText 监听用户输入完成的实例
本文将带你了解Android应用开发Android EditText 监听用户输入完成的实例,希望本文对大家学Android有所帮助. 我们都知道, Android EditText输入框,并没有 ...
无需用户输入，Adobe提出自动高质量图像合成新方法
本文转载自机器之心. 选自arXiv 作者:He Zhang等机器之心编译编辑:小舟.杜伟没有用户输入,也能生成高质量的合成图像吗? 图像合成是指组合不同图像中的部分区域以合成一张新的图像,一个 ...

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

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

最新文章

热门文章

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

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

最新文章

热门文章

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

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