html通过json文件动态生成页面元素-button

本文链接：https://blog.youkuaiyun.com/qq_53485256/article/details/126601099

本文介绍了一种使用JSON文件动态生成HTML页面中按钮的方法。通过解析JSON数据，可以自定义按钮的位置、大小、颜色等属性，并将其添加到指定的HTML元素内。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

框架搭建，目的是通过编写json文件即可达到编写页面的目的，我们要做的就是想办法解析json文件内容来动态生成页面，今天测试了读取json文件来生成button

html内容，放个空壳就行了，主要是引入需要的文件

<!DOCTYPE html>
<html>
	<head>
		<link rel="shortcut icon" href="tools/imgs/ico.ico" type="image/x-icon">
		<meta charset="UTF-8">
		<link href="tools/scripts/ui.css" rel="stylesheet">
		<script src="tools/scripts/jquery.js"></script>
		<script src="tools/scripts/jquery-ui.js"></script>
		<script src="tools/scripts/echarts.min.js" type="text/javascript"></script>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta charset="utf-8">
	</head>
	<body>

	</body>
</html>

json测试文件

[{
		"parent": "1",
		"type": "button",
		"id": "2",
		"size": "100,100",
		"pos": "0.5,0.1",
		"fontcolor": "white",
		"background_color": "blue",
		"border": "5px solid white",
		"border_radius": "50%",
		"value": "蓝"
	},
	{
		"parent": "1",
		"type": "button",
		"id": "3",
		"size": "200,300",
		"pos": "0.4,0.3",
		"fontcolor": "white",
		"background_color": "red",
		"value": "红"
	},
	{
		"parent": "1",
		"type": "button",
		"id": "4",
		"size": "300,200",
		"pos": "0.2,0.3",
		"fontcolor": "white",
		"background_color": "green",
		"value": "绿"
	}
]

javascript内容，主要内容就在这里了

function getdata(f){//读取json文件
		 $.getJSON(f, function(data, status) {
			console.log("是是不是成功读到数据" + status);
			if (status == 'success') {
				arrayData = data;
				for (var i = 0; i < arrayData.length; i++) { //循环生成
					generate(arrayData[i])
				}
			} else {
				console.log("没有读取到本地文件：" + status);
				return false;
			}
		})
	}
	$(document).ready(function() {
		
	}
	)
	$(document).ready(function() {
		$('body').append(//生成一个div区域
			'<div class="main" id="1" data="" style="width:100vw;height:100vh;background-color:yellow;position: absolute;">hhh<div>'
		);
	})

	function generate(obj) { //生成元素
		if (obj['type'] == "button") { //首先判断生成元素的html标签
			let parent, ids, elew, eleh, backcolor, value, btn, left, top, fontcolor, border, border_radius //用于接收可能用到的属性
			for (key in obj) { //遍历数据
				switch (key) {
					case "id":
						ids = obj[key];
						break;
					case "value":
						value = obj[key];
						break;
					case "size":
						elew = obj[key].split(',')[0] + "px";
						eleh = obj[key].split(',')[1] + "px";
						break;
					case "background_color":
						backcolor = obj[key];
						break;
					case "parent":
						parent = obj[key];
						break;
					case "pos":
						left = Number(obj[key].split(',')[0]) * 100 + "vw";
						top = Number(obj[key].split(',')[1]) * 100 + "vh";
						break;
					case "fontcolor":
						fontcolor = obj[key];
						break;
					case "border":
						border = obj[key];
						break;
					case "border_radius":
						border_radius = obj[key];
						break;
					default:
						break;
				}
			}
			btn = '<button id="' + ids + '" style="width:' + elew + ';height:' + eleh + ';color:' + fontcolor +
				';background-color:' + backcolor + ';position: absolute;left:' + left + ';top:' + top + ';border:' +
				border + ';border-radius:' + border_radius + '">' + value + '</button>' //前面判断了是button标签，所以这里生成
			$('#' + parent + '').append(btn); //添加到对应的父容器里面
		}
	}
	$(document).ready(function() {
		var file="tools/scripts/demo.json"
		getdata(file)
	})