黑马自学_DOM_4

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

 

练习一：自动提示。一个文本框。默认value值为：说点什么吧。字体色为 Gray。当获得焦点时清空文本框，字体色变为黑色。失去焦点时，如果文本框为空则恢复初始状态。

<script type="text/javascript">
    function ssfocus(txtss) {
        if (txtss.style.color == "gray") {                                            html中属性值开头字母是大写，js中都是小写
            txtss.value = "";
            txtss.style.color = "white";
        }      
    }
    function ssblur() {
        if (txtss.value == "") {
            txtss.style.color = "Gray"
            txtss.value="说点什么吧！！！！"
        }
    }
</script>
<input id="txtss" type="text" value="说点什么吧！！！！！！！！" style="background-color:Gray" onfocus="ssfocus(this)" onblur="ssblur(this)" />

 

练习二：点击按钮弹出登陆对话框。

<script type="text/javascript">
    function landNow() {
        var div1 = document.getElementById("div1");                    修改div的style中display的值来控制div中内容的显示
        div1.style.display = "";
    }
</script>

                                        创建div
<div id="div1" style="border-style:solid;border-width:thin;border-color:Red;width:300px;position:absolute;top:200px;left:200px;display:none">

<center>

<table>

<tr><td colspan="2"><input type="button" value="关闭" onclick="document.getElementById('div1').style.display='none'" style="float:right" /></td>  关闭按钮

</tr><tr><td>用户名：</td><td><input type="text" /></td></tr>        用户名框

<tr><td>密码：</td><td><input type="password" /></td></tr>       密码框

</table>

</center></div>

<input type="button" value="立即登录" onclick="landNow()" />            点击显示登陆界面

 

练习三：点击小图片显示详细信息。

 <script type="text/javascript">
    var dataImages = { "images/mm/27small.JPG": ["images/mm/27.JPG", "英子", "165"], "images/mm/28small.JPG": ["images/mm/28.JPG", "惠子", "168"],"images/mm/39small.JPG": ["images/mm/39.JPG", "戈薇", "169"] };
    function initImageMouseover() {
        var divImages = document.getElementById("divImages");       获得放小图片的层
        for (var imgKey in dataImages) {                                                    遍历数据集合，将所有小图片放在新创建的img标签中
            var image = document.createElement("img");
            image.src = imgKey;                                                                 设置一系列img的属性、样式和响应函数
            image.setAttribute("imgId", imgKey);                                          创建一个img没有的属性imgId，它的值存放小图片的src的值，便于调用。
            image.style.width = "70px";
            image.style.height = "98px";
            image.style.cursor = "pointer";
            image.onmouseover = showAll;
            divImages.appendChild(image);
        }
    }
    function showAll() {                                                                                                鼠标放到图片上的事件的响应函数
        var divBigImages = document.getElementById("divBigImages");
        var bigImage = document.getElementById("bigImage");
        var imageName = document.getElementById("imageName");
        var imageheight = document.getElementById("imageheight");
        for (var imgKey in dataImages) {
            if (this.imgId == imgKey) {
                bigImage.src = dataImages[imgKey][0];
                imageName.innerHTML = dataImages[imgKey][1];
                imageheight.innerHTML = dataImages[imgKey][2];
            }
        }
        divBigImages.style.top = window.event.clientY;
        divBigImages.style.left = window.event.clientX;
        divBigImages.style.display = "";
    }
</script>
<br /><div id="divImages" style="width:300px"></div><div id="divBigImages" style="position:absolute;display:none">
    <img id="bigImage" src="" />
    <p id="imageName"></p>
    <p id="imageheight"></p>
    <input type="button" value="关闭" onclick="document.getElementById('divBigImages').style.display='none'" />

 

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