黑马自学_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培训、期待与您交流! ----------------------

 

 

软件测试黑马工程师---接口测试

接口测试的定义 接口测试是测试系统组件间接口的一种测试。接口测试主要用于检测外部系统与系 统之间以及内部各个子系统之间的交互点。测试的重点是要检查数据的交换,传 递和控制管理过程,以及系统间的相...
  • clear_ad
  • clear_ad
  • 2017年08月22日 08:28
  • 530

黑马程序员:你想要的UI学习路线图来咯!

相信很多想入门深度学习的朋友都会遇到这个问题,就是应该看哪些视频、读哪些文章、找哪些人交流。包括我自己,也是花费了大量的时间在寻找资源上。也曾苦恼视频资源套路太多,苦恼视频资源为什么那么零散,苦恼自学...
  • itcast_cn
  • itcast_cn
  • 2016年11月08日 11:37
  • 1326

黑马学习笔记--JAVA基础知识

JAVA概述JAVA发展史: JAVA之父:詹姆斯.高斯林 SUN公司:斯坦福大学网络公司(2010-10-24被oracle收购) JDK JRE JVM: JDK: JAVA开发工具包,包含了JR...
  • qq_28114645
  • qq_28114645
  • 2017年03月07日 22:33
  • 374

黑马程序员:各学科学习路线图,简直是厉害了word哥

1999年的一部电影《一个都不能少》火了一句话“一个都不能少”!2016年,黑马程序员走心出品,全学科学习路线图。今天,我们也做到了,一个都不能少!差一个都那不叫完美。(此处无图,请自觉脑补)今天我们...
  • itcast_cn
  • itcast_cn
  • 2016年11月10日 13:57
  • 1718

黑马自学_JQuery

---------------------- Windows Phone 7手机开发、.Net培训、期待与您交流! ----------------------   $.map(array,fn)...
  • cxylu
  • cxylu
  • 2012年04月13日 16:38
  • 109

黑马自学_SQL

---------------------- Windows Phone 7手机开发、.Net培训、期待与您交流! ----------------------     drop table t...
  • cxylu
  • cxylu
  • 2012年03月22日 13:43
  • 97

黑马自学_论坛学习

char 类型字符在内存中是以一个字节来表示的,从0到255,int 是四个字节来表示,把字符变量赋给整型变量就会默认的将字符变量转换成整型。 const是静态常量,所以在编译的时候值就确定下来了 ...
  • cxylu
  • cxylu
  • 2012年04月13日 15:22
  • 301

黑马自学_DataSet

---------------------- Windows Phone 7手机开发、.Net培训、期待与您交流! ----------------------   DataSet的来历: 在用...
  • cxylu
  • cxylu
  • 2012年03月11日 13:13
  • 133

黑马自学_JavaScript基础

---------------------- Windows Phone 7手机开发、.Net培训、期待与您交流! ----------------------    Javascript是解释性...
  • cxylu
  • cxylu
  • 2012年03月24日 16:24
  • 103

黑马自学_HTML基本知识

---------------------- Windows Phone 7手机开发、.Net培训、期待与您交流! ----------------------    HTML最基本格式: ht...
  • cxylu
  • cxylu
  • 2012年03月18日 13:11
  • 131
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:黑马自学_DOM_4
举报原因:
原因补充:

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