JavaScript学习 第 四 章

原创 2004年08月20日 15:50:00


第四集




这章我将告诉您如何在状态列 (statusbar) (也就是您浏览器最下方显示 URLs 的那一行) 显示文 字,并且将教您 '跑马灯' (以下简称 scroller ) 的工作原理。虽然以 JavaScript 完成的 scroller 目前 仍有些问题 (稍後会提到问题在哪儿?),但我还是告诉您它是如何写成的。

首先,如何将文字填入 statusbar 呢?下述语法将告诉您如何做到这项功能: (按下按钮後请注视 statusbar 的变化)

很新奇吧! 请看看原始码 :

<html>
<head>
<script language="JavaScript">
<!-- Hide
function statbar(txt) {
   window.status = txt;
}
// -->
</script>
</head>
<body>
<form>
<input type="button" name="look" value="写入文字" onclick="statbar('嗨 ! 这就是状态
列 (statusbar) !');">
<input type="button" name="erase" value="清除文字" onclick="statbar('');">
</form>
</body>
</html>

我制作了两个都会呼叫 statbar(txt) 函式 (function) 的按钮。当此函式被呼叫後,字串经由括弧中 的变数 txt 传给 statbar(txt)。 (不一定要用 txt,用别的变数名也可以)。当电脑执行到 <form> tag 时, 一旦按下按钮就会呼叫 statbar(txt)。但是电脑并没有马上将 txt 的内容写在 statusbar,只是 将欲显示的字串存入 txt。换句话说,藉由呼叫函式,只是让变数 txt 得到一个值。因此当您按 下 '写入文字' 这个按钮後,会呼叫 statbar(txt) 而且 '嗨 ! 这就是状态列 (statusbar) !' 这个字串会 存入 txt 中。咻 ! 讲了这麽多只是想告诉您这种写法可预留一些弹性。什麽弹性呢?就是您可重 复使用 txt 这个变数。您看看第二个按钮,它也是呼叫相同的函式。若您不利用一个变数来传递 字串的话,就必须写两个不同的函式了。

那麽 statbar(txt) 到底做了些什麽?其实没什麽,只是将 txt 的内容写入变数 window.status中。这 是由 window.status = txt; 做的。另外若想消除文字,只需送一个空字串 ('') 给 statusbar。请注 意,因为在 onClick 中我们已经使用双引号 " ,所以这里必须用单引号 ' 。这是为了让浏览器辨 认哪两个引号是一对的,因此您必需双引号和单引号交替使用。

由此份简介文件第二章您已学过 onMouseOver 的特性了 :
<a href="tpage.html" onMouseOver="window.status='Just another stupid link...'; return true">
您可能会对一件事感到厌烦。那就是当 mouse 的指标已从 link 移开了,但是 statusbar 中的文字 还留在那 !没关系,我教您一个解决的办法。利用上面教您如何消除 statusbar 中文字的方法, 我们来写一个小函式。但是如何侦测出 mouse 的指标已从 link 移开并进而呼叫消除文字的函式 呢?侦测 mouse指标是否已从 link 移出的功能目前还无法达到,但可用 "计时器" 来暂时解决此 问题。

试试将 mouse 移到此 link 上看看 statusbar 的变化,但请不要按它。

怎麽样?很棒吧!看看下面的原始码您就知到这东西很简单。

<html>
<head>
<script language="JavaScript">
<!-- Hide
function moveover(txt) {
   window.status = txt;
   setTimeout("erase()",1000);
}
function erase() {
   window.status="";
}
// -->
</script>
</head>
<body>
<a href="dontclck.html" onMouseOver="moveover('瞬间即逝 !');return true;">
link</a>
</body>
</html>

这 script 的许多部份相信您已了解。 moveover(txt) 其实和先前的 statbar(txt) 差不多。erase()也和 先前所讨论的相同。在 HTML 网页中的 <body> tag 里我们加入一个具有 onMouseOver 功能之 link。当 mouse 指标移至 "link" 上就会呼叫 moveover(txt),并且利用 txt 变数传递字串 '瞬间即逝 !'。接下来的步骤就和 statbar(txt) 一样, window.status 收到 txt 的值後将之显示在 statusbar 上。 而 setTimeout(...)这项新函式是用来作为一个 "定时器"。setTimeout(...)能作些什麽事呢?它的主 要特性是当某段设定的时间 "跑" 完了之後,便执行某函式。在这个例子中,於 1000 毫秒後 (也 就是 1 秒後) 就会执行 erase()。换句话说,当 1 秒结束後 moveover(txt) 的功能就会因 erase()的 自动执行而停止。
虽然规定时间 "跑" 完後定时器并不会重新启动,但您可以在 erase() 中再用一次setTimeout(...) ,使其循还不断,看起来就像一个跑马灯 (scroller)。


您已学到了 setTimeout 的功能和如何在 statusbar 中显示文字,接下我将教您如何制作一个在 statusbar 显示的 "跑马灯" (scroller)。

请按下方的按钮看看我做的 scroller。由於 script 需由 server 载入到您的电脑中,因此这要花一 点时间,请耐心等一下。

以下是原始码 :

<html>
<head>
<script language="JavaScript">
<!-- Hide
var scrtxt="怎麽样 ! 很酷吧 ! 您也可以试试."+"Here goes your message the visitors 
to your page will "+
"look at for hours in pure fascination...";
var lentxt=scrtxt.length;
var width=100;
var pos=1-width;
function scroll() {
  pos++;
  var scroller="";
  if (pos==lentxt) {
    pos=1-width;
  }
  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);
  }
  window.status = scroller;
  setTimeout("scroll()",150);
  }
//-->
</script>
</head>
<body onLoad="scroll();return true;">
这里可显示您的网页 !
</body>
</html>

上面 script 用的语法相信大部份您已经懂了。 setTimeout(...) "告诉" 计时器当时间到了就呼叫 scroll()。 如此一来 scroller便会向前移动一步。在 script 的开头有许多计算式,那是用来决定文 字开始显示的位置,了不了解并不重要。一旦决定了文字的启始位置,就必需加些空格 (space) 以使文字能显示在正确位置。

在此章一开始我曾提到,此种 scroller 并不是很受欢迎。即使是,也不会持续很久。为什麽呢? 下面我列出几个主要原因:
当第一次看到 scroller 或许您会觉得很新奇,但久而久之便会觉得索然无味。当然,这是所有 "酷玩意儿" (cool trick) 皆有的现象。
其实这还不是主要原因,更严重的问题还在後头呢 ! 当您移动 mouse 时,您可以发现 scroller 的 速度改变了 (至少在我的机器上是如此)。尤其当您更改 setTimeout 的值为使 scroller 跑快一点时 ,这种情况更严重。不过这问题或许还有解决方法。更糟的是若让 scroller 跑久一点,会出现 Out of memory error的问题 ! 天呀 ! 这是 Netscape Navigator 2.0 的一个 "臭虫" (bug)。我们期待 新的版本能更正此 bug (译按 : Netscape Navigator Atlas Preview Release 已更正此 bug)。

在网路上有许多这方面的应用,您可以试着找找。我曾经看过有人将 scroller 放在 Homepage 中, 这应该不会太难。(译按 : 有兴趣的人可叁考目录中本人所制做的 scroller)


《机器学习》周志华第四章笔记

自己对决策树的一些理解,不一定对,权当加深印象。4.1基本流程组成:一个根节点、若干内部节点和若干叶节点;叶节点对应了不同的预测结果,我们的目的是从包含样本全集的根节点找到它到每个叶节点的路径对应一个...
  • sysu_cis
  • sysu_cis
  • 2016年07月01日 21:23
  • 1115

学习openCV第四章答案

第一题: #include "cv.h" #include "highgui.h" #pragma comment(lib,"cv.lib") #pragma comment(lib,"cxcor...
  • LJH0600301217
  • LJH0600301217
  • 2013年03月08日 09:16
  • 1460

机器学习(周志华) 参考答案 第四章 决策树 4.4

机器学习(周志华) 参考答案 第四章 决策树 4.4机器学习(周志华西瓜书) 参考答案 总目录 http://blog.csdn.net/icefire_tyh/article/details/5...
  • icefire_tyh
  • icefire_tyh
  • 2016年07月31日 23:54
  • 2220

JavaScript学习要点(四)

function hasPrototypeProperty(object, name){      return !object.hasOwnProperty(name)&&(name in o...
  • NSNirvana
  • NSNirvana
  • 2015年07月20日 15:34
  • 423

全栈JavaScript之路(四)学习 `document ` 节点

/** (一) document 的子节点 **/ document.doctype //document Type document.documentElement //html ...
  • hatmore
  • hatmore
  • 2014年06月27日 17:27
  • 910

JavaScript学习总结(四)——逻辑OR运算符详解

在JavaScript中,逻辑OR运算符用||表示 1 var bTrue = true; 2 var bFalse = false; 3 var bResult = bTrue || bF...
  • jiangeeq
  • jiangeeq
  • 2017年04月12日 16:02
  • 98

JavaScript学习之路<四>

JS 数据类型转换JS 数据类型转换 方法主要有三种 转换函数、强制类型转换、利用js变量弱类型转换。1. 转换函数: js提供了parseInt()和parseFloat()两个转换函数。前者把值转...
  • weixin_38437243
  • weixin_38437243
  • 2017年07月13日 16:34
  • 48

JavaScript的学习整理(四)

目录: 1、类型转换 2、全局变量 3、命名规范 4、运算符(%)的使用 1、类型转化(强制类型转换) var a='12'; parseInt(a); //a=12(字符串转...
  • honey_1234567890
  • honey_1234567890
  • 2016年01月30日 19:52
  • 172

JavaScript学习总结(四)function函数部分

概念 函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。 js 支持两种函数:一类是语言内部的函数(如eval() ),另一类是自己创建的。 在 JavaScript ...
  • bfboys
  • bfboys
  • 2017年01月10日 22:15
  • 157

学习javascript数据结构(四)——树

前言总括: 本文讲解了数据结构中的[树]的概念,尽可能通俗易懂的解释树这种数据结构的概念,使用javascript实现了树,如有纰漏,欢迎批评指正。 原文博客地址:学习javascript数据结构(四...
  • Jizhen_Tan
  • Jizhen_Tan
  • 2017年01月16日 21:31
  • 464
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JavaScript学习 第 四 章
举报原因:
原因补充:

(最多只允许输入30个字)