黑马自学_DOM_层的操作

---------------------- 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" οnclick="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" οnclick="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培训、期待与您交流！ ----------------------