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控件的方法.当然,动态创建过多的控件会极大的消耗系统的资源,建 ...

随机推荐

Redis 数据结构服务器
Redis 简介 Redis 是完全开源免费的,遵守BSD协议,是一个高性能的key-value数据库. Redis 与其他 key - value 缓存产品有以下三个特点: Redis支持数据的持久 ...
centos 6.5 启动时卡在进度条位置无法进入系统解决办法。
今天公司服务器因突然断电导致phddns 花生壳启动失败,一直卡在启动进度条页面. 解决办法 1.按F5查看卡在什么位置, 2.查看解决方法:程序卡住的情况下,直接备份资料后,卸载程序重启就可以了. ...
vs_code 快捷键
一般的Ctrl+Shift+P,F1显示命令面板按Ctrl+P快速打开,到文件.Ctrl + Shift + N新窗口/实例Ctrl + Shift + W /关闭窗口实例Ctrl +.用户设置Ctr ...
UVa 401 - Palindromes 解题报告 - C语言
1.题目大意输入字符串,判断其是否为回文串或镜像串.其中,输入的字符串中不含0,且全为合法字符.以下为所有的合法字符及其镜像: 2.思路 (1)考虑使用常量数组而不是if或switch来实现对镜像的 ...
maven把项目打包成jar包后找不到velocity模板的bug
使用springmvc 开发时候要实现发送velcotiy模板邮件,在配置正常后,在本地测试正常后,使用maven打包成jar包后,报以下错误, Caused by: org.apache.veloc ...
lol人物模型提取（七）
9月13号我就把上了贴图的模型文件发了过去,到9月18号他们那的颜色就上好了,一个叫"3d打印旗舰店"的人加了我微信并拍了几张照片发了给我,效果图如下: 第一眼看上去我还是 ...
通过设置窗体的AcceptButton属性，可以设置窗体的“接受”按钮，若此设计，则用户每次按下Enter键都相当于单击该按钮
using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...
关于new delete的说明
1. 删除空指针不会有问题,因为C++的标准规定在delete时首先会判断指针是否为空,为空就不再处理,所以也就不会有问题. 2. delete一个非空指针之后,并不会将该指针自动置为空.此时如果重复 ...
do_group_exit函数
一个进程在sleep状态如何获取进程的调用栈 TASK_WAKEUPKILL状态一个进程sleep了,我如何获取他的用户态栈,如何获取用户堆栈如何在内核态打印用户态+内核态的栈? 确定上一个调用栈 ...
RT-thread内核之定时器管理
一.前言 rt-thread采用软件定时器线程模式或硬件定时器中断模式来实现系统定时器管理.而rt-thread操作系统在默认情况下是采用的硬件定时器中断模式的方式,用户可以通过宏定义RT_USING ...

DOM动态操纵控件案例

DOM动态操纵控件案例的更多相关文章

随机推荐

热门专题