制作计数器
在一些网站的主页中,通过计数器显示有多少访客访问了此页面,以此来判别网站的受欢迎程度。我们如何通过《网站搭建者》来实现网页浏览计数器呢?
实际上非常简单,网站搭建者为此提供了专门的计数器构件,用于网页浏览、软件下载等的数字统计。
计数器的设置步骤:
1、拖放“计数器”构件到数据模块页。拖放“标签”构件(用于显示统计结果)到页面1中
2、设置其“计数对象名”属性为“页面1”。
3、在本项目的“WebRun.ini”配置文件中,新增一个段。段名称与项目名称,用于存放计数的结果。如图1所示。

此主题相关图片如下:

图1
4、在“页面1”页面建立时,执行计数器的方法“得到当前计数”赋给标签的标题属性。
当页面建立时,首先会向“WebRun.ini”的“ClickCounter”段的“页面1”项中,累加1,同时得到结果,赋给页面1的标签标题属性。
但是我们平时看到的“计数器”不是这种简简单单标签显示的文本,而是个性鲜明图像,甚到Flash动画。那么我们如何实现图像化的计数器呢?下面我们以静态的GIF文件说明。
图像文件计数器的预备工作,首先准备十张数字GIF文件存放在当前项目的“gif”目录下。要求每张图片的大小都是一样的。文件名称与所代表的数字完全一致。如图2所示。

此主题相关图片如下:

图2
以5位的计数器为例,我们在“得到当前计数”时,可以把当前的统计结果分解成5段,每一段对应一个图像文件进行显示。由于在前文中,已经讲过“计数器”的用法,因此现在的重点是如何把统计结果,分成5段由5幅位图显示。
所需构件:拖放5个图像文件构件置于页面1中,并把它们紧密的排列好;拖放计数器、条件选择、字符串操作、计数循环、变量组、公用事件于数据模块1中。
关键的属性设置,如表1所示
构件 属性 属性值
计数器1 计数对象名 页面1
条件选择1 条件1 1
条件2 2
条件3 3
条件4 4
条件5 5
字符串操作1 多段分解参数——标记字符串 -,-
计数循环1 开始值 1
表1
事件设置:
当页面1“页面建立”时,事件设置如图3所示

此主题相关图片如下:

图3
解释:首先得到统计结果,再判断该结果的字符长度,以便分解成5段,调用相应的图片。用变量X作为统计结果,是由于下面的事件中,还要用到“得到当前计数”方法,而使用一次,系统会自动为统计结果加1,这样就会造成,浏览一次页面,进行了多次累加,因此下面事件中,用变量X应视为统计结果。
当等于条件1时(即统计结果为一位数时)事件设置,如图4所示

此主题相关图片如下:

图4
解释:由于统计结果只有一位数,因此统计结果前要补充四个“0”,而为了分解需要,在每个数字间用“短横杠”作为分隔符。由于甲事件的设置,在其余四个“等于条件X”事件,都有用到,因此设为公用事件。
甲事件的事件设置,如图5所示

此主题相关图片如下:

图5
解释:由于命令比较多,只截取了部分命令设置。但截取每一位数的设置基本相同,截取三、四、五位的命令,不再赘述。
当等于条件2时(即统计结果为二位数时)事件设置,如图6所示

此主题相关图片如下:

图6
解释:整个事件分为三个部分说明。第二、三部分我们已经熟悉,不再讲述。第一部分,用于将统计结果分隔开。例如数字“28”分隔成字符“2-8”效果。因为是两位数,所以循环两次。注意,属性设置中“计数循环1”的开始值为“1”。
当计数循环1“开始循环”时,事件设置,如图7所示

此主题相关图片如下:

图7
解释:虽然有多条命令,但整个事件设置,只做了一件事,那就是把统计结果用“短横杠”分隔后,重新连接成一个字符串,赋给变量Y。例如数字“28”,第一次循环,Y为“空”,当前值为“1”,所以截取出数字“2”,这样“空”+“2”+“-”连接后赋给Y,那么在第一次循环后,变量Y的值为“2-”;第二次循环,当前值为“2”,所以截取出数字“8”,这样“2-”+“8”+“-”连接后,变理Y的值为“2-8-”。循环结束后,返回到图6所示命令设置第二部分,把“0-0-0”+“2-8-”连接后赋给多段分解初始字符串。注意,由于8后多了一个“短横杠”,导致分解的段数为“6”段,但是不影响现在的结果。
当等于条件3时(即统计结果为三位数时)事件设置,如图8所示

此主题相关图片如下:

图8
当等于条件4时(即统计结果为四位数时)事件设置,如图9所示

此主题相关图片如下:

图9
当等于条件5时(即统计结果为五位数时)事件设置,如图10所示

此主题相关图片如下:

图10
[此贴子已经被作者于2005-9-20 16:23:04编辑过]
单单统计“浏览页面次数”那么直接用计数器构件,是很简单的。现在的例子,难点在用图片来显示统计结果。