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