JavaScript笔记之建立动态页面

最新推荐文章于 2024-06-08 09:44:34 发布

iteye_13633

最新推荐文章于 2024-06-08 09:44:34 发布

阅读量141

点赞数

文章标签： javascript xhtml ViewUI

出色的网页是许多不同因素的综合结果，包括引人注目的内容、良好的设计和对细节的关注，比如加载页面的速度有多快。加快页面加载的方法之一，是在用户的浏览器中使用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可以实现移动广告

document.getElementById("annoyingAdvert").onmouseover = slide;

为了开始移动，在广告上添加一个onmouseover事件处理程序，让它出发slide()函数。

if (currPos("annoyingAdvert") < (document.body.clientWidth-150))

在移动广告之前，需要检查它的位置是否处于限制范围内，实现的方法时获取它的当前位置(使用currPos()函数)并与文档的宽度做比较。如果当前位置小于窗口的宽度(减去150像素是为了把层本身的宽度考虑进去)，那么就希望继续移动。

setTimeout(slide,100);

每100毫秒重复调用slide()，从而让JavaScript一直移动对象。

(源《JavaScript基础教程》)