---------------------- 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" οnfοcus="ssfocus(this)" οnblur="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="关闭" οnclick="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="立即登录" οnclick="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="关闭" οnclick="document.getElementById('divBigImages').style.display='none'" />
---------------------- Windows Phone 7手机开发、.Net培训、期待与您交流! ----------------------