DOM动态操纵控件案例
点击登陆显示登陆框
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>event deal</title>
<script type="text/javascript">
var lg = function () {
var div = document.createElement("div");
var input1 = document.createElement("input");
var input2 = document.createElement("input");
var label1 = document.createElement("label");
var label2 = document.createElement("label");
label1.htmlFor = "user";
label2.htmlFor = "pass";
label1.innerText = "用户名：";
label2.innerText = "密码:";
input1.type = "text";
input2.type = "text";
input1.id = "user";
input2.id = "pass"; var br = document.createElement("br");
div.appendChild(label1); div.appendChild(input1);
div.appendChild(br);
div.appendChild(label2);
div.appendChild(input2);
document.body.appendChild(div);
input2.style.left = input1.style.left;
} </script> </head>
<body>
<input type="button"value="登陆"onclick="lg()"/>
</body>
</html>
点击按钮使文本框连续变大
<html><!--制作一个会跟着鼠标走的图像，还有控件定位的案例-->
<head>
<title>document practise</title>
<style type="text/css">
.bian
{
border-color:yellow;
border-width:1px;
border-style:solid;
}
</style>
<script type="text/javascript">
var intervalid;
var incres = function () { intervalid = setInterval("IncreseSquare()", 500); this.disabled=true;}
function IncreseSquare()
{
var div = document.getElementById("divchange"); var oldwidth = div.style.width;
oldwidth = parseInt(oldwidth, 10) + 5;
div.style.width = oldwidth.toString() + "px";
var oldheight = div.style.height;
div.style.height = (parseInt(oldheight, 10) + 10).toString() + "px";
} </script>
</head>
<body>
<div id="divchange"style="border-style:solid;border-width:2px;width:20px;height:20px">
这里有很多很多的字，你们也许可以看到这些字真的好多好多的，哈哈。
你们也许不知道这些字是用来干什么的哦，其实就是凑字数的，好啦差不多了。
</div>
<input type="button"value="扩大"onclick="incres()"/>
<input type="button"value="停止"onclick="clearInterval(intervalid)"/>
</body>
</html>
图片随着鼠标移动变化
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>多向变化图片</title>
<script type="text/javascript">
function DynasticChange()
{
var pic = document.getElementById("img");
if (window.event.x < (pic.x + 100) && window.event.y < (pic.y + 100))
pic.src = "images/leftup.jpg";
else if(window.event.x>(pic.x+100)&&window.event.x<(pic.x+200)&&window.event.y < (pic.y + 100))
pic.src = "images/up.jpg";
else if(window.event.x>=(pic.x+200)&&window.event.y < (pic.y + 100))
pic.src = "images/rightup.jpg";
else if(window.event.y>=(pic.y+100)&&window.event.y<(pic.y+200)&&window.event.x < (pic.x + 100))
pic.src = "images/left.jpg";
else if (window.event.y > (pic.y + 100) && window.event.y < (pic.y + 200) && window.event.x > (pic.x + 200))
pic.src = "images/right.jpg";
else if (window.event.y >= (pic.y + 200) && window.event.x <= (pic.x + 100))
pic.src = "images/leftdown.jpg";
else if (window.event.y >= (pic.y + 200) && window.event.x >(pic.x + 100) && window.event.x <(pic.x + 200))
pic.src = "images/down.jpg";
else if (window.event.y >= (pic.y + 200) && window.event.x >= (pic.x + 200))
pic.src = "images/rightdown.jpg";
else
pic.src = "images/front.jpg";
}
function withdrawpic()
{
var pic = document.getElementById("img");
pic.src = "";
} </script>
</head>
<body bgcolor="blue">
<div>
<table align="center">
<tr><td width="301" height="301">
<img id="img" onmousemove="DynasticChange()" onmouseout="withdrawpic()" width="300" height="300" />
</td>
</tr>
</table>
</div>
</body>
</html>
点击按钮颜色隔行变色
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>超链接变色</title>
<script type="text/javascript">
function InitEvent()
{
var As = document.getElementsByTagName("a");
for (var key in As)
{
As[key].onclick =Process;
}
}
function Process()
{
window.event.returnValue = false;
this.style.color = "red";
var As = document.getElementsByTagName("a");
for (var key in As) {
if (As[key] != this)
As[key].style.color = "black";
}
}
function ChangeColor()
{
var table = document.getElementById("table1");
var trs = table.getElementsByTagName("tr");
for(var i=0;i<trs.length;i++)
{
if (i%2 == 0) trs[i].style.background = "yellow";
else trs[i].style.background = "green";
}
}
function trevent() {
var table = document.getElementById("table1");
var trs = table.getElementsByTagName("tr");
for (var i = 0; i < trs.length; i++) { trs[i].onclick = otherdeal; } }
function dealcolor()
{
this.style.background = "black";
}
function recovercolor()
{
this.style.background = "white";
}
function otherdeal()
{
var table = document.getElementById("table1");
var trs = table.getElementsByTagName("tr");
for (var i = 0; i < trs.length; i++) {
if (trs[i] == this)
trs[i].style.background = "black";
else
trs[i].style.background = "white"; }
}
</script>
</head>
<body onload="InitEvent(); trevent();">
<a href="HtmlPageWrite.html">链接一</a>
<a href="HtmlPageWrite.html">链接二</a>
<a href="HtmlPageWrite.html">链接三</a>
<table border="1" align="center" id="table1">
<tr><td width="400" height="30"></td></tr>
<tr><td width="400" height="30"></td></tr>
<tr><td width="400" height="30"></td></tr>
<tr><td width="400" height="30"></td></tr>
<tr><td width="400" height="30"></td></tr>
<tr><td width="400" height="30"></td></tr>
<tr><td width="400" height="30"></td></tr>
<tr><td width="400" height="30"></td></tr>
<tr><td width="400" height="30"></td></tr>
<tr><td width="400" height="30"></td></tr>
<tr><td width="400" height="30"></td></tr>
<tr><td width="400" height="30"></td></tr>
<tr><td width="400" height="30"></td></tr>
<tr><td width="400" height="30"></td></tr>
<tr><td width="400" height="30"></td></tr>
<tr><td width="400" height="30"></td></tr>
<tr><td width="400" height="30"></td></tr>
<tr><td width="400" height="30"></td></tr>
<tr><td width="400" height="30"></td></tr>
<tr><td width="400" height="30"></td></tr>
<tr><td width="400" height="30"></td></tr>
<tr><td width="400" height="30"></td></tr>
<tr><td width="400" height="30"></td></tr>
<tr><td width="400" height="30"></td></tr>
</table>
<input type="button" value="变色"onclick="ChangeColor()"/> </body>
</html> <!--onclick 的响应函数是匿名函数，再匿名函数里可疑得到this对象-->
<!--但是对于调用函数实际上是onclick响应函数内调用的一个函数，不能通过this获得对象-->
DOM动态操纵控件案例的更多相关文章
- DOM动态增加控件
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...
- jQuery EasyUI动态添加控件或者ajax加载页面后不能自动渲染问题的解决方法
博客分类: jquery-easyui jQueryAjax框架HTML 现象: AJAX返回的html无法做到自动渲染为EasyUI的样式.比如:class="easyui-layout ...
- winform导入导出excel，后台动态添加控件
思路: 导入: 1,初始化一个OpenFileDialog类 (OpenFileDialog fileDialog = new OpenFileDialog();) 2, 获取用户选择文件的后缀名(s ...
- Android 在布局容器中动态添加控件
这里,通过一个小demo,就可以掌握在布局容器中动态添加控件,以动态添加Button控件为例,添加其他控件同样道理. 1.addView 添加控件到布局容器 2.removeView 在布局容器中删掉 ...
- android动态增加控件时控制样式的方法
在学习android的动画时,发现所谓的tween动画只是改变绘制效果并不改变原控件的位置时是颇为失望的,虽然3.0之后已经有了property animation,但是由于要兼容老版本的androi ...
- VC中动态添加控件
VC中动态添加控件 动态控件是指在需要时由Create()创建的控件,这与预先在对话框中放置的控件是不同的. 一.创建动态控件: 为了对照,我们先来看一下静态控件的创建. 放置静态控件时必须先建立一个 ...
- 2014年辛星解读Javascript之用DOM动态操纵HTML元�
关于DOM,我们了解了能够用DOM操纵HTML的一些属性和样式,还能够为HTML元素绑定事件等等,那么接下来,我们将涉及到用DOM来动态的创建.删除HTML等一些操作,我的核心思路还是重实战,因此,代 ...
- 小子给大家分享一个或者多个新手创建tableview经常会遇到的坑（动态创建控件，xib的重用）
小子最近做了一个根据接口返回的数据在Cell中动态创建控件,感觉应该会一部分人卡在这里,小子就跟大家分享一下: 1.控件重复创建:这个问题出现的原因是动态创建的cell内容的时候,无法进行重用设置,所 ...
- VisionPro笔记（1）:动态创建控件
VisionPro学习笔记(1):动态创建控件 有的时候可能需要在程序中动态创建控件,VisionPro实例中提供了一例动态创建Blob控件的方法.当然,动态创建过多的控件会极大的消耗系统的资源,建 ...
随机推荐
- 1 wait notify
wait/notify: wait()使线程停止,notify使wait状态的线程继续执行. wait()是Object类的方法,该方法用来将线程置入“预执行队列”,并在wait()方法处停止执行,直 ...
- 讯飞云 API 语音听写 python3 调用例程
#!/usr/bin/python3 # -*- coding: UTF-8 -*- import requests import time import gzip import urllib imp ...
- 硬件原理图Checklist检查表（通用版）
类别 描述 检视规则 原理图需要进行检视,提交集体检视是需要完成自检,确保没有低级问题. 检视规则 原理图要和公司团队和可以邀请的专家一起进行检视. 检视规则 第一次原理图发出进行集体检视后所有的修改 ...
- Hero In Maze（BFS广搜）
Description 500年前,Jesse是我国最卓越的剑客.他英俊潇洒,而且机智过人^_^.突然有一天,Jesse心爱的公主被魔王困在了一个巨大的迷宫中.Jesse听说这个消息已经是两天以后了, ...
- 冲刺ing-1
冲刺一 1.第一天的工作分配: 姓名 任务分工 吴伟华(队长) 布置团队任务,发表汇总博客及第一次冲刺博客 蔺皓雯 讨论任务分配 杨池宇 讨论任务分配 鲁婧楠 讨论任务分配 曾茜 讨论任务分配 蔡晨旸 ...
- .net改善程序性能建议
对改善程序性能的建议. 文章:https://msdn.microsoft.com/zh-cn/library/ms973838.aspx
- 链表相加（Add Two Numbers）
描述: 给定两个非空的链表,表示两个非负整数.数字以相反的顺序存储,每个节点包含一个数字.添加两个数字并将其作为链表返回. 您可以假设两个数字不包含任何前导零,除了数字0本身. 输入:(2 - > ...
- 分页查询es时，返回的数据不是自己所期望的问题
在进行es分页查询时,一般都是用sql语句转成es查询字符串,在项目中遇到过不少次返回的数据不是自己所期望的那样时,多半原因是自己的sql拼接的有问题. 解决办法:务必要保证自己的sql语句拼接正确.
- 访问方式由http改为https curl:(51)
系统访问由http变为https,先申请了CA证书,然后win下浏览器访问时没问题的,但是linux下通过curl的方式访问就报错: curl:(51) SSLcertificate subject ...
- adb shell input keyevent值所对应的字符
转自:http://blog.csdn.net/chen825919148/article/details/18732041 0 --> "KEYCODE_UNKNOWN" ...