JavaScript笔记之建立动态页面
出色的网页是许多不同因素的综合结果，包括引人注目的内容、良好的设计和对细节的关注，比如加载页面的速度有多快。加快页面加载的方法之一，是在用户的浏览器中使用JavaScript对单独的页面元素进行更新。换句话说，Web服务器并不直接向用户提供页面体验，而是通过因特网发送脚本。然后，脚本利用用户计算机的能力构造出页面。带有这种脚本的页面被称为动态页面(dynamic page)。
本文记录了如何使用JavaScript在网页上显示本地日期和时间；在脚本的控制下跨用户的页面移动对象。
(一)在网页上显示当前日期
JavaScript可以判断出计算机上的当前日期和时间(以数字形式)，然后以许多方式操作这个数字。但是必须处理从数字到文本型日期的转换。以下示例演示如何获得当前日期，将它从数字转换为标准的日期，然后将结果写到文档窗口中。
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Dynamic Date Display</title> <script type="text/javascript" src="script01.js"></script> </head> <body bgcolor="#FFFFFF"> <h1>Today is <span id="dtField"> </span>.</h1> </body> </html>
下面脚本script01.js将当前日期写到文档窗口。
window.onload = initDate;
function initDate() {
var dayName = new Array("Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday");
var monName = new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");
var now = new Date();//now中包含当前日期。
var dtString = dayName[now.getDay()] + ", " + monName[now.getMonth()] + " " + now.getDate();
document.getElementById("dtField").innerHTML = dtString;
}
var dtString = dayName[now.getDay()] + ", " + monName[now.getMonth()] + " " + now.getDate();
以从右到左的次序理解dayName[now.getDay()]对象。getDay()是用来获得一周中日的JavaScript方法，它向now对象询问今天是星期几。然后，用数字结果引用dayName数组中的对应元素。
接下来，在正在构造的文本字符串后加上一个逗号和空格，在连接下一个表达式monName[now.getMonth()]，这个表达式返回月份名称。与前一个表达式一样，它先获得月份号，然后引用monName数组中的对应元素。
最后加上now.getDate()，这个方法返回月中的日。
(二)移动文档中的对象
可以使用JavaScript让对象(图像、文本等)在屏幕上到处移动。实际上，甚至可以让对象看起来像是在做三维移动，让对象在文档中的其他对象背后移动。
body {
background-color: #FFF;
}
#annoyingAdvert {
position: absolute;
z-index: 2;
display: none;
width: 100px;
background-color: #FFC;
padding: 10px;
margin: 10px;
border: 5px solid yellow;
}
#closeBox {
position: absolute;
color: red;
font-size: 1.5em;
top: 0;
right: 0;
}
HTML文档在此处省略
下面的script.js可以实现移动广告
window.onload = initAdvert;
function initAdvert() {
document.getElementById("annoyingAdvert").style.display = "block";
document.getElementById("annoyingAdvert").onmouseover = slide;
document.getElementById("closeBox").onclick = function() {
document.getElementById("annoyingAdvert").style.display = "none";
}
}
function slide() {
if (currPos("annoyingAdvert") < (document.body.clientWidth-150)) {
document.getElementById("annoyingAdvert").style.left = currPos("annoyingAdvert") + 1 + "px";
setTimeout(slide,100);
}
function currPos(elem) {
return document.getElementById(elem).offsetLeft;
}
}
document.getElementById("annoyingAdvert").onmouseover = slide;
为了开始移动，在广告上添加一个onmouseover事件处理程序，让它出发slide()函数。
if (currPos("annoyingAdvert") < (document.body.clientWidth-150))
在移动广告之前，需要检查它的位置是否处于限制范围内，实现的方法时获取它的当前位置(使用currPos()函数)并与文档的宽度做比较。如果当前位置小于窗口的宽度(减去150像素是为了把层本身的宽度考虑进去)，那么就希望继续移动。
setTimeout(slide,100);
每100毫秒重复调用slide()，从而让JavaScript一直移动对象。
(源《JavaScript基础教程》)