要做个文档页面,行政发来的数据改来改去,还通知说后续还会继续改,没这个时间折腾,写个公共模板,让页面自己生成文档
这里隐藏了css,一般都是自己写自己用的css,就不放出来了
页面主体部分和js模块
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title id="title-name">**科技</title>
</head>
<body>
<!-- 判断当前是否为PC端 -->
<script>
(function () {
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)) { var a = document.referrer, b = { "baidu.com": "seo_baidu", "sogou.com": "seo_sogou", "sm.cn": "seo_sm", "so.com": "seo_360", "bing.com": "seo_bing", "google.com": "seo_google" }, c; for (c in b) { if (-1 != a.indexOf(c)) { a = b[c]; if (window.sessionStorage) { sessionStorage.setItem("channel", a) } else { var d = d || 0, b = ""; 0 != d && (b = new Date, b.setTime(b.getTime() + 1000 * d), b = "; expires=" + b.toGMTString()); document.cookie = "channel=" + escape(a) + b + "; path=/" } break } } window.location.href = "./m/index.html" };
})();
</script>
<!-- 引入数据 -->
<script src="./static/data.js"></script>
<!-- 数据处理函数 -->
<script>
window.onload = function () {
// 循环数据
for (let key in obj) {
for (let key2 in obj[key]) {
document.getElementById('mar-bom').innerHTML += "<li><ul class='muban-ul'></ul></li>"
addInnerHtml(obj[key][key2], [key2])
}
}
// 打印文字内容
function addInnerHtml (data, keyNum) {
let ulList = document.getElementsByClassName('muban-ul')[keyNum]
for (const key in data.text) {
if (Object.hasOwnProperty.call(data.text, key)) {
ulList.innerHTML += "<li>" + data.text[key] + "</li>";
}
}
addInnerHtmlImg(data, keyNum, ulList)
}
// 打印图片内容
function addInnerHtmlImg (obj, keyNum, ulList) {
ulList.innerHTML += "<li class='muban-img'></li>"
for (const key in obj.imgUrl) {
let imgList = document.getElementsByClassName('muban-img')[keyNum]
if (obj.imgUrl.length == 1) {
if (Object.hasOwnProperty.call(obj.imgUrl, key)) {
imgList.innerHTML += "<img src=./images/" + obj.imgUrl[key] + " alt=''>";
}
}
if (obj.imgUrl.length == 2) {
if (Object.hasOwnProperty.call(obj.imgUrl, key)) {
imgList.innerHTML += "<img class='w50' src=./images/" + obj.imgUrl[key] + " alt=''>";
}
}
if (obj.imgUrl.length == 3) {
if (Object.hasOwnProperty.call(obj.imgUrl, key)) {
imgList.innerHTML += "<img class='w33' src=./images/" + obj.imgUrl[key] + " alt=''>";
}
}
}
}
}
</script>
<div class="layout" id="layout">
<div class="typearea">
<div class="noticeContent">
<ul class="mar-bom" id="mar-bom">
</ul>
</div>
</div>
</div>
</body>
</html>
data.js 数据部分
这里甚至可以改成接口获取数据,根据需要展示不同的内容
// 使用格式
// 在 text 中输入单引号 '',在单引号中填入文字,逗号区分
// 在 imgUrl 中输入单引号 '',在单引号中填入图片名称,逗号区分
// 图片放在images目录下
// 模板
// {
// text: ['文字内容', '文字内容'],
// imgUrl: ['图片名称','图片名称']
// },
var obj = {
"redirestList": [
{
text: ['文字内容'],
imgUrl: ['01.png']
},
{
text: ['文字内容', '文字内容'],
imgUrl: ['01.png', '01.png']
},
{
text: ['文字内容', '文字内容', '文字内容'],
imgUrl: ['01.png', '01.png', '01.png']
},
]
};
写的很粗糙,大致逻辑就是循环和插入