黑马自学_DOM_层的操作

原创 2012年03月29日 20:59:58

---------------------- Windows Phone 7手机开发.Net培训、期待与您交流! ----------------------

 

 

层的操作:

          元素的position样式值:static(无定位,显示在默认的位置)、absolute(绝对位置,top:横坐标、left:纵坐标)、fixed(相对于窗口的固定位置,位置不会随着浏

         览器的滚动而变化)、relative(相对于元素默认位置的定位)。

练习一:数字时钟。

    <script type="text/javascript">
        function iniTime() {// 页面加载完毕自动执行该计时器
            if (document.getElementById("timediv"))
                setInterval("timemove()", 1000);//每一秒刷新并显示一次当前时间
        }
        function timemove() {   // 整个数字时钟由六个图片组成:小时两个图片、分钟两个图片、秒钟聊个图片
            var now = new Date();
            var times = now.toLocaleTimeString().split(":");//将当前时间的小时,分钟,秒钟分割出来
            var hours = times[0];// 小时
            var hour1 = document.getElementById("hour1");
            hour1.src = "images/date/" + hours.charAt(0) + ".JPG"; //小时十位数
            var hour2 = document.getElementById("hour2");
            hour2.src = "images/date/" + hours.charAt(1) + ".JPG"; //小时个位数

            var mins = times[1];
            var min1 = document.getElementById("min1");
            min1.src = "images/date/" + mins.charAt(0) + ".JPG";  //分钟十位数
            var min2 = document.getElementById("min2");
            min2.src = "images/date/" + mins.charAt(1) + ".JPG";  //分钟个位数

            var seconds = times[2];
            var sec1 = document.getElementById("sec1");
            sec1.src = "images/date/" + seconds.charAt(0) + ".JPG"; //秒钟十位数
            var sec2 = document.getElementById("sec2");
            sec2.src = "images/date/" + seconds.charAt(1) + ".JPG"; //秒钟个位数
        }
    </script>
    <div id="timediv" style="border-style:solid;border-width:thin;border-color:Red" onclick="alert('div'+this.style.top)">
    <center>
    <img id="hour1" src="#" /><!--小时-->
    <img id="hour2" src="#" />
    <img src="images/date/m.JPG" /> <!--冒号-->
    <img id="min1" src="#" /><!--分钟-->
    <img id="min2" src="#" />
    <img src="images/date/m.JPG" /> <!--冒号-->
    <img id="sec1" src="#" /><!--秒钟-->
    <img id="sec2" src="#" />
    </center></div>

练习二:若干个文本框,获得焦点的文本框的背景颜色变为红色,其他的背景颜色变为白色。

    <script type="text/javascript">
        function initOnfocus() {       //监听所有name=focuscolor的文本框的onfocus事件。在body加载完成后运行。
            var txts = document.getElementsByName("focuscolor");
            for (var i = 0; i < txts.length; i++) {
                txts[i].onfocus = nfocus;         //将所有文本框的onfocus事件的响应函数设置为nfocus函数。
            }
        }
        function nfocus() {
            var txts = document.getElementsByName("focuscolor");    //获取所有name=focuscolor的文本框集合。
            for (var i = 0; i < txts.length; i++) {
                if (txts[i] != this)
                    txts[i].style.background = "White";            //如果该文本框不是当前引发onfocus事件的文本框,则将其背景改为白色。
            }
            this.style.background = "Red";               //将当前引发onfocus事件的文本框的背景改为红色。
        }
    </script>
    <input name="focuscolor" type="text" /><input name="focuscolor" type="text" /><input name="focuscolor" type="text" /><input name="focuscolor" type="text" />

练习三:控制层的样式。

    <script type="text/javascript">
        function nchecked(checkbox) {          //checkbox的onclick事件的响应函数所调用的函数同时将this传入到函数中使用。
            var style1 = document.getElementById("style1")
            if (checkbox.checked ==true)  ///注意:在html中checkbox的checked属性的值是checked。但在javascript中checked的值是true或false。
                style1.style.display = "";
            else                              //如果checkbox被选中则显示div,否则隐藏div
                style1.style.display = "none";
        }
    </script>
    <input type="checkbox" onclick="nchecked(this)" />样式一
    <div id="style1" style="display:none">twert wer graewrtg traer  rwert </div>

 

练习四:图片随着鼠标移动。

    <script type="text/javascript">
       document.onmousemove = function () {        //设置document的onmusemove事件的响应函数。
            var imagemove = document.getElementById("imagemove");
            if (imagemove) {
                imagemove.style.position = "absolute";
                imagemove.style.top = window.event.clientY;     //鼠标的纵坐标为图片的纵坐标
                imagemove.style.left = window.event.clientX;      //鼠标的横坐标为图片的横坐标
            } 
        }
    </script>
    <input id="imagemove" type="image" src="124.gif" />


 

 

 

---------------------- Windows Phone 7手机开发.Net培训、期待与您交流! ----------------------

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

黑马程序员_学习日记63_710jQuery2(属性选择器、表单选择器、操作Dom节点、事件、动画)

一、属性过滤选择器: $(“div[id]”) 选取有id属性的 $(“div[title=test]”) 选取title属性为”test”的,jQuery中没有对getElementByNa...

黑马程序员-----dom简单操作之二

Windows Phone 7手机开发、.Net培训、期待与您交流! window对象的属性: 1.window.location.href对象既可以取出当前页面的值,也可以给当前页面赋值(相当于...

(黑马)总结:dom4j 操作xml文件

自己写的一些小的代码,这些代码有一些局限性。

黑马程序员--dom4j操作XML

dom4j操作XML dom4j这个包里定义定义的jiel

黑马自学_Dom_window对象、document对象

---------------------- Windows Phone 7手机开发、.Net培训、期待与您交流! ----------------------    window对象的属性 h...
  • cxylu
  • cxylu
  • 2012-03-28 19:28
  • 132

黑马自学_DOM_4

---------------------- Windows Phone 7手机开发、.Net培训、期待与您交流! ----------------------   练习一:自动提示。一个文本框。...
  • cxylu
  • cxylu
  • 2012-03-30 22:24
  • 117

jQuery自学教程(三)——DOM操作

DOM有三种形式,标准DOM、HTML DOM、CSS DOM,大部分进行了封装,然而jQuery中并不需要深刻理解它们。 其中最重要的DOM操作,就是元素及内容的操作和元素的属性操作。 一、元素及内...

[黑马IOS自学第八篇]C语言文件操作,通讯录实现,代码

#include void sum(){          static intcount = 0 ;     printf("%d\n",count);     count++; }...

"黑马程序员"javascript和DOM

------ http://www.itheima.com" target="blank">android培训、http://www.itheima.com" javascript概述:     ...

黑马程序员_Dom学习知识简单总结

---------------------- Windows Phone 7手机开发、.Net培训、期待与您交流! ---------------------- Dom:       ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)