黑马自学_DOM_4

原创 2012年03月30日 22:24:19

---------------------- 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培训、期待与您交流! ----------------------

 

 

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

相关文章推荐

黑马程序员_王康 java利用DOM4J解析XML文件

《水浒传》 80 施耐庵 元末 《西游记》 90 吴承恩 明代 《三国演义》 75 罗贯中 元末 《红楼梦》 79 曹雪...

(黑马)总结: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_层的操作

---------------------- Windows Phone 7手机开发、.Net培训、期待与您交流! ----------------------     层的操作:      ...
  • cxylu
  • cxylu
  • 2012-03-29 20:59
  • 137

小白自学Android路之 xml文件的Dom4j解析编程

相对于前面的d

"黑马程序员"javascript和DOM

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

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

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

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

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

黑马程序员_学习日记18_Dom(2)

1、 DOM的动态创建 l        document.write只能在页面加载过程中才能动态创建。 l        可...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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