第 四 部 分 : 状 态 条 和 定 时 设 置
状 态 条
你 的 JavaScript 程 序 能 对 状 态 条 进 行 写 操 作 -所 谓 状 态 条 就 是 浏 览 器 窗 口 的 底 部 部 分。 你 所 要 做 的 只 需 在 window.status 中 指 定 一 个 字 符 串 。 下 面 的 例 子 显 示 了 两 个 按 钮 , 一 个 对 状 态 条 进 行 写 操 作 , 另 一 个 用 来 清 除 写 入 的 字 符 串 。
这 段 script 语 言 是 这 样 的 :
<html>
<head>
<script language="JavaScript">
<!-- hide
function statbar(txt) {
window.status = txt;
}
// -->
</script>
</head>
<body>
<form>
<input type="button" name="look" value="Write!"
onClick="statbar('Hi! This is the statusbar!');">
<input type="button" name="erase" value="Erase!"
onClick="statbar('');">
</form>
</body>
</html>
我 们 生 成 了 两 个 按 钮 。 它 们 都 调 用 了 函 数 statbar()。 下 面 是 Write! 按 钮 调 用 这 个 函 数 的 代 码 :
statbar('Hi! 这 儿 就 是 状 态 条 !');
在 单 括 号 中 我 们 指 定 使 用 了 字 符 串 'Hi! 这 儿 就 是 状 态 条 !'。 这 意 味 着 是 这 个 字 符 串 被 函 数 statbar() 使 用 。 我 们 是 这 样 定 义 statbar() 这 个 函 数的 :
function statbar(txt) {
window.status = txt;
}
在 函 数 的 定 义 中 我 们 在 函 数 名 后 面 的 单 括 号 中 使 用
了 txt。 这 也 就 是 说 我 们 传 递 给 函 数 的 字 符 串 储 存 在 变
量 txt 中 。
参 数 的 传 递 可 以 使 函 数 的 应 用 范 围 更 广 。 你 可 以 同
时 传 递 几 个 参 数 给 函 数 , 只 需 在 参 数 间 用逗 号 分 开 。
txt 中 的 字 符 串 通 过 使 用 window.status = txt 可 以 显 示 在 状 态
条 上 。
而 擦 去 状 态 条 上 的 字 符 串 只 需 在 window.status 中 指 定 一 个
空 字 符 串 就 可 以 了 。
在 状 态 条 上 显 示 的 文 字 可 以 同 连 接 结 合 起 来 使 用 。 你 可 以 在 状 态 条 上 简 单 介 绍 将 要 载 入 的 页 的 内 容 。 这 个 连 接 是 一 个 演 示, 你 只 需 把 你 的 鼠 标 移 到 它 的 上 面 。 这 个 例 子 的 代 码 是 这 样 的 :
<a href="dontclck.htm"
onMouseOver="window.status='不 要 按 '; return true;"
onMouseOut="window.status='';">link</a>
这 儿 我 们 使 用 onMouseOver 和 onMouseOut 来 侦 测 鼠 标 是 否 移 到
连 接 上 。
你 可 能 会 问 为 什 么 我 们 在 这 儿 要 在 onMouseOver 中 使 用 return
true 呢 ? 这 样 写 是 为 了 不 要 让 浏 览 器 不 要 在 MouseOver 事 件
中 使 用 它 自 己 的 代 码 。 一 般 来 说 , 浏 览 器 会 在 状 态
条 上 显 示 连 接 的 URL 地 址 。如 果 我 们 不 使 用 return true 那 么
浏 览 器 会 在 执 行 了 我 们 的 代 码 后 在 状 态 条 中 直 接 写
入 它 的 URL 地 址 - 这 也 就 是 说 浏 览 器 会 覆 盖 我 们 的 文 字
, 用 户 无 法 读 到 它 。 一 般 来 说 我 们 能 通 过 使 用 return
true 来 阻 止 浏 览 器 的 事 件 处 理 器 中 的 反 应 。
在 JavaScript 1.0 中 并 没 有 onMouseOut 事 件 。 如 果 你 在 使 用 Netscape
Navigator 2.x 版 本 那 在 不 同 的 平 台 上 你 也 许 会 得 到 不 同 的
结 果 。 在 UNIX 平 台 上 即 使 浏 览 器 不 认 识 onMouseOut, 状 态 条
上 的 文 字 也 会 消 失 。 在 Windows 中 文 字 不 会 消 失 。 如 果
你 想 使 你 的 script 程 序 对 Windows 上 的 Netscape 2.x 也 保 持 兼 容
, 你 就 需 要 写 一 个 函 数 把 文 字 写 入 到 状 态 条 上 , 然
后 在 一 段 特 定 的 时 间 后 把 它 擦 去 。 这 是 一 个 关 于 定
时 设 置 的 编 程 问 题 。 在 以 后 的 段 落 中 我 们 将 要 学 习
到 更 多 关 于 定 时 设 置 的 内 容 。
通 过 使 用 定 时 设 置 你 可 以 让 计 算 机 在 一 定 的 时 间 后 运 行 另 一 段 代 码。 我 制 作 了 一 个 按 钮, 如 果 你 按 下 它, 在 三 秒 后 会 弹 出 一 个 窗 口:
源 代 码 是 这 样 的:
<script language="JavaScript">
<!-- hide
function timer() {
setTimeout("alert('Time is up!')", 3000);
}
// -->
</script>
...
<form>
<input type="button" value=" 定 时"
onClick="timer()">
</form>
setTimeout() 是 window 对 象 的 一 个 方 法。 它 作 了 一 个 定 时 设
置, 对 这 我 想 你 也 猜 到 了 吧。 第 一 个 参 数 是 在 特 定 的
时 间 后 将 要 被 执 行 的 JavaScript 代 码。 在 这 里 是 用
"alert(' 时 间 到 了')"。 清 记 住 输 出 代 码 必 须 在 引 号
中。
第 二 个 参 数 是 告 诉 计 算 机 在 多 少 时 间 后 这 段 代 码 将
被 执 行。 你 必 须 以 毫 秒 为 单 位 来 制 定。 (3000 毫 秒=3
秒)
现 在 你 已 经 知 道 如 何 写 入 到 状 态 条 和 如 何 设 置 定
时, 现 在 让 我 们 来 看 看 滚 动。 也 许 你 早 就 见 过 在 状 态
条 上 滚 动 的 文 本 字 符 串, 它 们 在 Internet 网 上 到 处 都 是。
我 们 来 学 一 下 如 何 编 写 一 个 基 本 的 滚 动。 然 后 我 们 来
看 看 如 何 改 善 滚 动 的 效 果。
滚 动 很 容 易 实 现。 首 先 我 们 在 滚 动 条 上 写 入 一 些 文
字, 然 后 在 一 小 段 时 间 后 我 们 在 状 态 条 上 再 次 写 入 这
段 文 字- 只 不 过 位 置 向 左 边 移 了 一 点。 如 果 我 们 一 遍
一 遍 重 复 这 样 的 步 骤, 用 户 看 到 的 就 是 一 段 在 滚 动 的
文 字 了。
我 们 还 必 须 确 定 当 文 字 的 长 度 超 过 状 态 条 时, 哪 一 段
文 字 会 显 示 出 来。
这 个 按 钮 会 生 成 一 个 新 的 窗 口, 并 显 示 一 个 在 状 态 条 上 的 滚 动:
这 儿 是 源 代 码, 我 加 了 一 些 注 解:
<html>
<head>
<script language="JavaScript">
<!-- hide
// define the text of the scroller
var scrtxt = "This is JavaScript! " +
"This is JavaScript! " +
"This is JavaScript!";
var length = scrtxt.length;
var width = 100;
var pos = -(width + 2);
function scroll() {
// display the text at the right position and set a timeout
// move the position one step further
pos++;
// calculate the text which shall be displayed
var scroller = "";
if (pos == length) {
pos = -(width + 2);
}
// if the text hasn't reached the left side yet we have to
// add some spaces - otherwise we have to cut of the first
// part of the text (which moved already across the left border
if (pos < 0) {
for (var i = 1; i <= Math.abs(pos); i++) {
scroller = scroller + " ";}
scroller = scroller + scrtxt.substring(0, width - i + 1);
}
else {
scroller = scroller + scrtxt.substring(pos, width + pos);
}
// assign the text to the statusbar
window.status = scroller;
// call this function again after 100 milliseconds
setTimeout("scroll()", 100);
}
// -->
</script>
</head>
<body onLoad="scroll()">
Your HTML-page goes here.
</body>
</html>
scroll() 函 数 的 主 要 部 分 是 用 来 计 算 文 本 的 哪 一 部 分
将 要 显 示 出 来。 我 并 没 有 详 细 的 解 释 这 段 代 码, 你 只
需 了 解 滚 动 是 怎 么 工 作 的 就 可 以 了。
为 了 启 动 滚 动 我 们 在 <body> 标 记 符 中 使 用 了 onLoad 事
件 处 理 器。 这 意 味 着 scroll() 函 数 在 HTML 页 一 被 载 入 就 运
行 了。
我 们 通 过 onLoad 调 用 scroll() 函 数。 第 一 步 是 计 算 以 及 显 示
滚 动 的 文 字。 在 函 数 的 最 后 作 了 一 个 定 时 设 置。 这 会
使 scroll() 函 数 在 100 毫 秒 后 再 次 被 执 行, 文 字 向 左 移 动
了 一 点 同 时 另 一 个 定 时 设 置 启 动 了。 这 些 步 骤 不 停 的
被 执 行。
( 这 样 的 滚 动 在 Netscape Navigator 2.x 的 版 本 上 会 引 起 一 些 问
题。 它 会 引 起 一 个“Out of memort" 错 误。 人 们 一 般 认 为
这 是 因 为 函 数 scroll() 作 了 递 归 调 用 引 起 的, 最 后 引 起
内 存 溢 出。 但 这 是 不 正 确 的 这 并 不 是 一 个 递 归 调 用!
只 有 当 我 们 在 scroll() 函 数 中 调 用 scroll() 函 数 时 才 是 递 归
调 用。 我 们 并 没 有 这 样 做。 旧 的 函 数 设 置 的 定 时 在 新
的 函 数 运 行 前 已 经 结 束 了。 问 题 是 在 Javascript 中 字 符 串
并 没 有 真 的 改 变 如 果 你 要 继 续 做 下 去 的 话,Javascript 后
生 成 一 个 新 的 对 象, 并 没 有 移 去 旧 的, 这 才 是 充 满 内
存 的 东 西。)
滚 动 在 Internet 世 界 中 被 广 泛 的 使 用。 这 会 使 他 们 冒 不
受 欢 迎 的 危 险。 我 并 不 喜 欢 滚 动。 特 别 是 当 鼠 标 移 到
一 个 连 接 上, 这 会 使 本 来 显 示 在 状 态 条 上 的URL 不 可 阅
读。 这 可 以 通 过 使 用 当 MouseOver 对 象 发 生 时, 停 止 滚 动;
onMouseOut 事 件 发 生 时 继 续 滚 动 来 避 免。 如 果 你 要 使 用 滚
动, 那 不 要 使 用 普 通 的 滚 动, 试 着 加 入 一 些 好 的 效
果。 象 文 本 的 一 部 分 从 左 边 滚 过 来, 文 本 的 另 一 部 分
从 右 边 滚 过 来, 当 它 们 在 中 间 会 合 时 停 留 几 秒 钟。 有
一 些 想 象 力, 你 会 产 生 很 多 好 的 主 意。