html页面按钮布局,js动态生成按钮,页面用DIV简单布局(示例代码)
今天朋友让我忙帮给写个页面,由于时间紧破,所以没有完善,暂时先贴出来,以后有时间了在做修改
* {
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;
}
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简单布局(示例代码)相关推荐
- html动态生成按钮事件,javascript 动态生成按钮并添加事件时为什么不响应?
javascript 动态生成按钮并添加事件时为什么事件不响应?(谢谢大家!) 1)html部分 1 2 3 4 5 6 7 8 9 10 11 12 2)script部分 //_t 为一个现在的Ta ...
- js动态生成按钮,页面用DIV简单布局2
对前边不完善的修改 <!DOCTYPE html> <html> <head> <title>test.html</title> <m ...
- htmlunit爬虫工具使用--模拟浏览器发送请求,获取JS动态生成的页面内容
Htmlunit是一款模拟浏览抓取页面内容的java框架,具有js解析引擎(rhino),可以解析页面的js脚本,得到完整的页面内容,特殊适合于这种非完整页面的站点抓取. 下载地址: https:// ...
- 用js动态生成html页面
首先思路明确:生成的元素是一个完整的DOM对象:这些DOM对象的属性可以是字符串,xml文件,也可以是json格式的数据,存储在后台或者其它位置:通过层层解析,顺着DOM层级关系动态创建在html文档 ...
- js动态生成echarts图表,并生成图片保存到本地,自定义图片名。
目录 一.js动态生成图表 1. 效果图 2. 测试数据 3. 实现代码 二.点击下载按钮生成快照 - 图片路径 1. 效果图 2. 实现代码 三. 保存图片到本地 1. 效果图 2. 代码实现 一. ...
- js 动态生成html(js根据后台返回数据生成html页面中的table标签)(转义字符)
js 动态生成html table标签中内容js生成 html代码 js代码 js 动态生成html 触发事件传参字符转义 table标签中内容js生成 html代码 <div><t ...
- 写一个静态HTML页面,直接写HTML代码和用JS动态生成代码,哪种方式要好
如果写一个静态HTML页面,直接写HTML代码和用JS动态生成代码,哪种方式要好点?为什么? 不考虑人力因素(手写HTML太费时间排除),请从读取和解析或者其他的角度分析.谢谢 添加评论 分享 按投票 ...
- Asp.net动态生成html页面
作者:网际浪子专栏(曾用名littlehb) http://blog.csdn.net/littlehb/ 适用于:Microsoft ASP.NET 摘要:asp.net动态生成html页面,适用 ...
- 2)JS动态生成HTML元素的爬取
2)JS动态生成HTML元素的爬取 import java.util.List;import org.openqa.selenium.By; import org.openqa.selenium.We ...
最新文章
- python 十大经典排序算法
- 基于协程的并发框架orchid简介
- python学习心得--编码格式篇
- linux awk 分组统计
- Boost:符号symbols找到null的测试程序
- 华为交换机屏蔽远程计算机,华为交换机远程telnet配置的小问题
- 跨域共享session (实现http跳转https 共享session)
- OpenCV3学习(9.2)连通域分析函数详解connectedComponents()和connectedComponentsWithStats()
- 在JavaScript面向对象编程中使用继承(5)
- Spark 0.9.1 MLLib 机器学习库简介
- centos SSH免密登录
- 安装python3并安装paramiko
- matlab的yalmip为什么这么慢,Yalmip使用学习
- PlaySound的同步播放与异步播放
- 博客推广——提交搜索引擎
- vue中图片解析失败
- qt(qu chu biao ti lan /窗口非暴力置顶)
- 深度学习之神经网络基础(1)——感知器,S型神经元,梯度下降法,神经网络架构
- pyinstaler打包paddle
- HDU 4544 湫湫系列故事——消灭兔子 (贪心+优先队列)
热门文章
- HtmlAgilityPack 爬虫批量获取百度音乐下载地址一
- Lab3因而起——对正则表达式的学习(一)
- VisionMaster连接工业相机(海康)
- STM32做平衡小车,代码,PCB都现成的,妈妈再也不用担心我的毕业设计了
- 理解JAVA的三大特性之---多态
- c语言 编写小学生100以内四则运算数学测试游戏,运用C语言开发一个“小学生算术四则运算测试系统”。...
- 中科院西光所成立时空大数据实验室,打造大数据运算核心基础平台
- 一、Pytest自动化测试框架 — Pytest和unittest测试框架原理
- chrome浏览器扩展安装
- SQL Server 2014 安装教程(图文教程,附下载地址)