今天朋友让我忙帮给写个页面,由于时间紧破,所以没有完善,暂时先贴出来,以后有时间了在做修改
* {
margin: 0px;
padding: 0px;
}
.header {
width: 100%;
background: #567;
height: 100px;
}
#leftDiv,#centerDiv,#rightDiv {
float: left;
background: #DDD;
margin-right: 10px;
word-wrap: break-word;
font-size: 12px;
}
#rightDiv {
width: 60%;
}
#leftDiv {
width: 19%;
}
#centerDiv {
width: 18%
}
#foot {
height: 100px;
background-color: #ccc;
clear: both;
}
#middle {
zoom: 1;
}
.li{
width:100px;
}
header
total = document.documentElement.clientHeight;
colHeight = total - 100 - document.getElementById("leftDiv").offsetTop;
document.getElementById("leftDiv").style.height = colHeight + "px";
document.getElementById("centerDiv").style.height = colHeight + "px";
document.getElementById("rightDiv").style.height = colHeight + "px";
var i = 0;
function addButton() {
var button_create1 = document.getElementById("button_create1");
var letfDiv_ul=document.getElementById("l_ul1");
var o = document.createElement(‘input‘);
var li=document.createElement(‘li‘);
o.type = ‘button‘;
o.value = ‘按钮‘ + i++;
if (button_create1.attachEvent) {
button_create1.attachEvent(‘onclick‘, addButton);
} else {
button_create1.addEventListener(‘click‘, addButton);
}
//document.body.appendChild(o);
li.appendChild(o);
letfDiv_ul.appendChild(li);
o = null;
}
/**
* 创建中间div的input
*/
var ii = 0;
function addInput(){
var button_create2=document.getElementById("button_create2");
var centerDiv_ul=document.getElementById("c_ul1");
var c_input = document.createElement(‘input‘);
var c_input_btn = document.createElement(‘input‘);
c_input_btn.type = ‘button‘;
c_input_btn.value = ‘按钮‘+ i++;
if(c_input_btn.attachEvent){
alert();
c_input_btn.attachEvent(‘onclick‘,addInput_select)
}else{
c_input_btn.addEventListener(‘click‘,addInput_select)
}
var li=document.createElement(‘li‘);
c_input.type = ‘text‘;
c_input.value = ‘input‘ + ii++;
if (button_create2.attachEvent) {
button_create2.attachEvent(‘onclick‘, addInput);
} else {
button_create2.addEventListener(‘click‘, addInput);
}
li.appendChild(c_input);
li.appendChild(c_input_btn);
centerDiv_ul.appendChild(li);
}
var iii = 0;
function addInput_select(){
alert();
var rightDiv_ul=document.getElementById("r_ul1");
for(var n=0;n<4;n++){
var o = document.createElement(‘input‘);
var li=document.createElement(‘li‘);
o.value=n;
li.appendChild(o);
for(var z=0;z<2;z++){
var select = document.createElement(‘select‘);
for(var y=0;y<4;y++){
select.options.add(new Option(y,y));
}
li.appendChild(select);
select=null;
}
rightDiv_ul.appendChild(li);
o = null;
}
}
window.onload = function(){
addInput_select();
addInput();
addButton();
};
如果觉得《html页面按钮布局 js动态生成按钮 页面用DIV简单布局(示例代码)》对你有帮助,请点赞、收藏,并留下你的观点哦!