[JS]技术交底列表

示意图

index.html

jumpManage.js

jsjd.js

addInfo.js

1、只创建一个html文件时如何实现多个页面的跳转
2、多个按钮关联同一个方法时如何区分点击按钮
3、弹出筛选视图时下方视图不允许操作

示意图

index.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>技术交底</title>
</head>
<body><script src="js/jumpManage.js"></script></body>
</html>

jumpManage.js

// 获取指定参数值
var theModel = getUrlParam('model');function getUrlParam(name) {// 取得url中?后面的字符var query = window.location.search.substring(1);// 把参数按&拆分成数组var param_arr = query.split("&");for (var i = 0; i < param_arr.length; i++) {var pair = param_arr[i].split("=");if (pair[0] == name) {return pair[1];}}return (false);
}function addScript(url){var script = document.createElement('script');script.setAttribute('type','text/javascript');script.setAttribute('src',url);document.getElementsByTagName('body')[0].appendChild(script);
}if (theModel == "jsjd") {// 进入技术交底列表addScript("js/jsjd.js");
} else if (theModel == "info") {// 进入添加信息页addScript("js/addInfo.js");
}

jsjd.js

document.body.style.margin = "0px";
document.body.style.padding = "0px";var baseDiv = document.createElement("div");
baseDiv.style.backgroundColor = "gray";
baseDiv.style.width = "100%";
baseDiv.style.height = "100%";
baseDiv.style.position = "absolute";
baseDiv.style.overflow = "auto";
baseDiv.style.top = "0px";
document.body.appendChild(baseDiv);var listNavView = document.createElement("div");
listNavView.style.backgroundColor = "blue";
listNavView.style.width = "100%";
listNavView.style.height = "64px";
listNavView.style.position = "sticky";
listNavView.style.top = "0px";
listNavView.style.zIndex = "3";
baseDiv.appendChild(listNavView);var navReturn = document.createElement("button");
navReturn.style.backgroundImage = "url(img/fanhui.png)";
navReturn.style.width = "44px";
navReturn.style.height = "44px";
navReturn.style.position = "relative";
navReturn.style.top = "20px";
navReturn.style.backgroundPosition = "center center";
navReturn.style.backgroundColor = "transparent";
navReturn.style.backgroundRepeat = "no-repeat";
navReturn.style.border = "none";
navReturn.style.outline = "none";
// navReturn.style.display = "inline-block";
navReturn.addEventListener("click", tapNavReturn);
listNavView.appendChild(navReturn);// 返回
function tapNavReturn(sender) {}var navTitle = document.createElement("div");
navTitle.style.height = "44px";
navTitle.style.position = "relative";
// navTitle.style.top = "0px";
navTitle.style.display = "inline-block";
navTitle.innerText = "技术交底";
navTitle.style.fontWeight = "bold";
navTitle.style.color = "white";
navTitle.style.lineHeight = "44px";
navTitle.style.textAlign = "center";
navTitle.style.left = "50%";
navTitle.style.transform = "translateX(-50%)";
listNavView.appendChild(navTitle);var addBut = document.createElement("button");
addBut.innerText = "+";
addBut.style.fontWeight = "bold";
addBut.style.color = "white";
addBut.style.fontSize = "26px";
addBut.addEventListener("click",tapAddButton);
addBut.style.position = "absolute";
addBut.style.right = "0px";
addBut.style.width = "44px";
addBut.style.height = "44px";
addBut.style.top = "20px";
addBut.style.backgroundColor = "transparent";
addBut.style.border = "none";
addBut.style.outline = "none";
listNavView.appendChild(addBut);// 点击添加技术交底
function tapAddButton() {// window.location.href = "js/addInfo.js"; // js页面跳转// location.reload(); // 页面重载，刷新// var sr = document.getElementsByTagName("script")[0];// document.body.removeChild(sr);// var newSR = document.createElement("script");// newSR.src = "js/addInfo.js";// document.body.appendChild(newSR);window.location.href = "index.html?model=info";
}var listCategoryView = document.createElement("div");
listCategoryView.style.width = "100%";
listCategoryView.style.height = "44px";
listCategoryView.style.backgroundColor = "white";
listCategoryView.style.position = "sticky";
listCategoryView.style.zIndex = "3";
listCategoryView.style.top = parseFloat(listNavView.style.height)+"px";
baseDiv.appendChild(listCategoryView);var dwcBut = document.createElement("button");
dwcBut.addEventListener("click",tapCategoryButton);
dwcBut.value = "dwc";
dwcBut.innerText = "待完成";
dwcBut.style.fontSize = "18px";
dwcBut.style.width = "50%";
dwcBut.style.height = "100%";
dwcBut.style.backgroundColor = "transparent";
dwcBut.style.border = "none";
dwcBut.style.outline = "none";
listCategoryView.appendChild(dwcBut);var ywcBut = document.createElement("button");
ywcBut.addEventListener("click",tapCategoryButton);
ywcBut.value = "ywc";
ywcBut.innerText = "已完成";
ywcBut.style.fontSize = "18px";
ywcBut.style.width = "50%";
ywcBut.style.height = "100%";
ywcBut.style.backgroundColor = "transparent";
ywcBut.style.border = "none";
ywcBut.style.outline = "none";
listCategoryView.appendChild(ywcBut);// 选择待完成、已完成
function tapCategoryButton(sender) {var ss = sender.currentTarget.value;if (ss == "dwc") {} else if (ss == "ywc") {}
}var searchView = document.createElement("div");
searchView.style.width = "100%";
searchView.style.height = "64px";
searchView.style.backgroundColor = "red";
searchView.style.position = "sticky";
searchView.style.zIndex = "3";
searchView.style.top = (parseFloat(listNavView.style.height) + parseFloat(listCategoryView.style.height)) + "px";
baseDiv.appendChild(searchView);var searchTextView = document.createElement("div");
searchTextView.style.backgroundColor = "white";
searchTextView.style.width = "75%";
searchTextView.style.height = "44px";
searchTextView.style.display = "inline-table";
searchTextView.style.borderRadius = "22px";
searchTextView.style.position = "relative";
searchTextView.style.top = "10px";
searchTextView.style.left = "10px";
searchView.appendChild(searchTextView);
var searchMarkView = document.createElement("img");
searchMarkView.style.width = "32px";
searchMarkView.style.height = "32px";
searchMarkView.src = "img/shousuo.png";
searchMarkView.style.display = "inline-block";
searchMarkView.style.position = "relative";
searchMarkView.style.top = "5px";
searchMarkView.style.left = "15px";
searchTextView.appendChild(searchMarkView);
var inputView = document.createElement("input");
inputView.placeholder = "请输入关键字";
inputView.style.position = "absolute";
inputView.style.left = "50px";
inputView.style.height = "40px";
inputView.style.backgroundColor = "transparent";
inputView.style.border = "none";
inputView.style.outline = "none";
inputView.style.fontSize = "18px";
inputView.style.width = "70%";
searchTextView.appendChild(inputView);var cancelView = document.createElement("button");
cancelView.style.backgroundImage = "url(img/shanchu.png)";
cancelView.style.width = "32px";
cancelView.style.height = "32px";
cancelView.style.position = "absolute";
cancelView.style.right = "10px";
cancelView.style.top = "5px";
cancelView.style.border = "none";
cancelView.style.outline = "none";
cancelView.style.backgroundColor = "transparent";
cancelView.addEventListener("click",tapCancelAction);
searchTextView.appendChild(cancelView);// 点击删除按钮
function tapCancelAction(sender) {inputView.value = "";
}var sxView = document.createElement("div");
sxView.style.backgroundColor = "white";
sxView.style.width = "20%";
sxView.style.height = "44px";
sxView.style.display = "inline-block";
sxView.style.position = "absolute";
sxView.style.right = "10px";
sxView.style.top = "10px"
sxView.style.borderRadius = "22px";
sxView.addEventListener("click",tapShaixuanAction);
searchView.appendChild(sxView);
var sxLab = document.createElement("p");
sxLab.innerText = "筛选";
sxLab.style.height = "44px";
sxLab.style.display = "table-cell";
sxLab.style.color = "gray";
sxLab.style.position = "relative";
sxLab.style.left = "10px";
sxLab.style.verticalAlign = "middle";
sxView.appendChild(sxLab);
var xiala = document.createElement("img");
xiala.src = "img/xiala.png";
xiala.style.display = "inline-block";
xiala.style.position = "absolute";
xiala.style.right = "10px";
xiala.style.top = "12px";
xiala.style.width = "20px";
xiala.style.height = "20px";
sxView.appendChild(xiala);var listView = document.createElement("div");
listView.style.width = "100%";
// listView.style.position = "absolute";
// listView.style.top = (parseFloat(listNavView.style.height) + parseFloat(listCategoryView.style.height) + parseFloat(searchView.style.height)) + "px";
// listView.style.zIndex = "0";
baseDiv.appendChild(listView);for (var i = 0 ; i < 20 ; i ++) {var tempListV = document.createElement("div");tempListV.style.width = "100%";tempListV.style.height = "64px";tempListV.style.border = "1px solid green";tempListV.innerText = i+"行";listView.appendChild(tempListV);
}// 筛选
var baseFiltrateView = document.createElement("div");
baseFiltrateView.style.width = "100%";
baseFiltrateView.style.height = "100%";
baseFiltrateView.style.position = "absolute";
baseFiltrateView.style.backgroundColor = "transparent";
baseFiltrateView.style.zIndex = "5";
baseFiltrateView.addEventListener("click",tapBaseFiltrateBackgroundView);var filtrateView = document.createElement("div");
filtrateView.style.backgroundColor = "white";
filtrateView.style.width = "100%";
var theTop = (parseFloat(listNavView.style.height) + parseFloat(listCategoryView.style.height) + parseFloat(searchView.style.height));
filtrateView.style.height = (window.innerHeight - theTop) + "px";
filtrateView.style.position = "absolute";
filtrateView.style.top = theTop + "px";
filtrateView.style.overflow = "auto";
filtrateView.addEventListener("click",tapFiltrateView);
baseFiltrateView.appendChild(filtrateView);var qzrqLab = document.createElement("p");
qzrqLab.innerText = "起止日期";
qzrqLab.style.left = "10px";
qzrqLab.style.position = "relative";
filtrateView.appendChild(qzrqLab);
var startTime = document.createElement("input");
startTime.placeholder = "开始时间";
startTime.style.position = "relative";
startTime.style.left = "10px";
startTime.style.display = "inline-block";
filtrateView.appendChild(startTime);var jgDiv = document.createElement("div");
jgDiv.innerText = "-";
jgDiv.style.width = "40px";
jgDiv.style.height = "30px"
jgDiv.style.color = "black";
jgDiv.style.left = "5px";
jgDiv.style.display = "inline-block";
jgDiv.style.textAlign = "center";
jgDiv.style.position = "relative";
filtrateView.appendChild(jgDiv);var endTime = document.createElement("input");
endTime.placeholder = "结束时间";
endTime.style.position = "relative";
endTime.style.display = "inline-block";
filtrateView.appendChild(endTime);var gxlxLab = document.createElement("p");
gxlxLab.innerText = "工序类型";
gxlxLab.style.left = "10px";
gxlxLab.style.position = "relative";
filtrateView.appendChild(gxlxLab);for (var i = 0 ; i < 12 ; i ++) {var lxDiv = document.createElement("div");lxDiv.style.width = "32%";lxDiv.style.height = "30px";lxDiv.style.border = "1px solid blue";lxDiv.style.float = "left";lxDiv.innerText = "类型"+i;filtrateView.appendChild(lxDiv);
}for (var i = 0 ; i < 10 ; i ++) {var tempBR = document.createElement("br");filtrateView.appendChild(tempBR);
}var czBut = document.createElement("button");
czBut.innerText = "重置";
czBut.style.width = "50%";
czBut.style.height = "44px";
filtrateView.appendChild(czBut);var qdBut = document.createElement("button");
qdBut.innerText = "确定";
qdBut.style.width = "50%";
qdBut.style.height = "44px";
filtrateView.appendChild(qdBut);// 点击筛选
function tapShaixuanAction() {var isFi = document.body.contains(baseFiltrateView);if (isFi == false) {document.body.appendChild(baseFiltrateView);} else {document.body.removeChild(baseFiltrateView);}
}function tapBaseFiltrateBackgroundView(sender) {document.body.removeChild(baseFiltrateView);
}function tapFiltrateView(sender) {sender.stopPropagation();
}

addInfo.js

document.body.style.margin = "0px";
document.body.style.padding = "0px";var baseDiv = document.createElement("div");
baseDiv.style.backgroundColor = "gray";
baseDiv.style.width = "100%";
baseDiv.style.height = "100%";
baseDiv.style.position = "absolute";
baseDiv.style.overflow = "auto";
baseDiv.style.top = "0px";
document.body.appendChild(baseDiv);var listNavView = document.createElement("div");
listNavView.style.backgroundColor = "blue";
listNavView.style.width = "100%";
listNavView.style.height = "64px";
listNavView.style.position = "sticky";
listNavView.style.top = "0px";
listNavView.style.zIndex = "3";
baseDiv.appendChild(listNavView);var navReturn = document.createElement("button");
navReturn.style.backgroundImage = "url(img/fanhui.png)";
navReturn.style.width = "44px";
navReturn.style.height = "44px";
navReturn.style.position = "relative";
navReturn.style.top = "20px";
navReturn.style.backgroundPosition = "center center";
navReturn.style.backgroundColor = "transparent";
navReturn.style.backgroundRepeat = "no-repeat";
navReturn.style.border = "none";
navReturn.style.outline = "none";
// navReturn.style.display = "inline-block";
navReturn.addEventListener("click", tapNavReturn);
listNavView.appendChild(navReturn);// 返回
function tapNavReturn(sender) {window.history.back(); // 返回上一页
}var navTitle = document.createElement("div");
navTitle.style.height = "44px";
navTitle.style.position = "relative";
// navTitle.style.top = "0px";
navTitle.style.display = "inline-block";
navTitle.innerText = "添加页面";
navTitle.style.fontWeight = "bold";
navTitle.style.color = "white";
navTitle.style.lineHeight = "44px";
navTitle.style.textAlign = "center";
navTitle.style.left = "50%";
navTitle.style.transform = "translateX(-50%)";
listNavView.appendChild(navTitle);

[JS]技术交底列表相关推荐

图灵访谈系列之九：CNode社区谈Node.js技术及生态
Node.js在各种技术会议上的分享越来越火热,为了让更多的人了解Node.js以及Node.js中文技术社区CNode,12月10日在易宝支付举行第三期Node.js北京分享会--NodeParty ...
Node.js技术手册
2019独角兽企业重金招聘Python工程师标准>>> Node.js技术手册: -------------------------------手册----------------- ...
技术交底软件_【干货分享】软件类产品如何进行专利挖掘与技术交底书撰写？...
"导读:在很多人的认知里,软件著作权是软件著作权,专利是专利,两者并没有太多关联.甚至有的人认为,软件产品只能申请软件著作权保护,不能申请专利保护.但是,当有人抄袭你的软件设计理念,而你无法 ...
设置固定长度_加气块砌筑（构造柱、圈梁设置）技术交底21条
墙体砌筑技术交底我给下发21条,内容不全,砌筑的墙体观感差,欢迎大家提出宝贵意见 1.填充墙的材料.平面位置尺寸见建筑施工图纸,不得随意更改. 2.当首层填充墙下无基础梁或结构梁板时,墙下应做基础,基 ...
node js 技术架构_[视频] Node JS中的干净架构
node js 技术架构 In this video you'll learn how to apply Bob Martin's Clean Architecture model to a Micr ...
专利交底书模板_技术交底书该谁来写？
很多人估计要笑话Limit了:这还用问啊,肯定是发明人啊! 事实上,你确定是发明人写的?如果你是代理所的代理师,你确定你没写过交底书?如果你是企业专利工程师,你确定你没写过交底书?如果你是发明人,你确 ...
基于JS实现新闻列表无缝向上滚动实例代码
当新闻较多,并且空前有限的时候,使用滚动是一个不错的选择,本章节就通过代码实例介绍一下如何实现此效果. 代码实例如下: <!DOCTYPE html> <html> <h ...
其中一个页签慢_房建工程全套技术交底，720页Word版表格，各分部分项全覆盖...
房建工程全套技术交底,720页Word版表格,各分部分项全覆盖在建筑业中,房建工程可谓是一个重要的不可缺少的部分,因此对于房建工程的各种工作内容的要求可谓是极其严格,其中,最重要的部分就是房建工程的 ...
js技术要点---document.write()方法在IE浏览器和火狐浏览器下面的兼容性问题
2.js技术要点---document.write("")方法在IE浏览器和火狐浏览器下面的兼容性问题技术qq交流群:JavaDream:251572072 教程下载,在线交流 ...

[JS]技术交底列表

示意图

index.html

jumpManage.js

jsjd.js

addInfo.js

[JS]技术交底列表相关推荐

最新文章

热门文章