Protopie进阶教程--动态时钟（中）

Posted 2023-04-11

参考技术A ○  触发：监听、单击

○  反应：赋值、文本、停止、颜色、透明度、大小、滚页

○  变量：数字变量及其计算表达

对于基础时间的计算方式与时钟教程中的计算方式类似，差异在于，秒表的时间精度更小为百分之一秒，且仅显示到分钟数。微秒（百分之一秒）每0.01秒+1，每1秒归零一次；秒每秒+1，每60秒归零一次；分每60秒+1。数字表达同样需要在个位数字前面添加一个“0”，以保证数秒表以00:00.00六位的形式显示。

○  秒表与时钟的差异在于时钟在自动加载时就开始循环计时，但秒表需要在用户做点击操作时进行，同时需要支持暂停和继续的操作，暂停的操作可以利用protopie中的“停止”暂停时间计算。

○  继续操作时需要注意微秒、秒和分的计算都是在停止时的计数基础上进行计数的，所以对于“+1”和归零的操作需要基于停止数来做延迟开始的设置。举例来说，当要从02:44.07的时间点重新开始时间计算时，微秒归零和秒钟+1的时间需要等待（1-0.07）秒的时间；而秒钟归零和分钟+1的时间需要等待（60-44.07）秒的时间。

○  复位的操作是需要增加一个将微秒、秒、分钟的值手动恢复至0的设置。

秒表的页面中间为操作区域，放置两个按钮，秒表未启动时左右按钮分别为“计次”和“启动”，其中“计次”按钮不可用；当开始计时后“计次”按钮可用，同时“启动”按钮变为“停止”；当用户点击“停止”按钮，左侧“计次”按钮变为“复位”，“停止”也重新变为“启动”；用户点击“复位”，回到最初未启动的按钮状态。当然可以使用四个不同图层进行透明度设置来实现效果。同样也可以仅使用两个文本图层添加对文本内容的判断进行区分。

秒表中涉及到的计次功能，需要记录当前具体计次的次数，本次计次的时间，以及本次与上次计次的时间差。所以需要新增加三个变量，分别记录计次数、上次计次时间以及两次计次时间差的值。每次用户点击“计次”按钮后，先将当前时间减去上次计次时间获得两次时间差后，将上次计次时间更新为当前时间，再在计次数上+1（不可改变顺序）。

由于可以多次计次，每次记录都需要做换行显示，这里涉及一个文本换行 \n 用法。

同时多次计时会出现次数显示超出单屏的显示，这时在计次的同时需要随着计次的增加不断增加文本的显示区域并利用滚页容器层和滚页反应使其最后一条可以显示出来。

新建Protopie文件，实现基本视效。

除切换tab之外，界面中操作按钮、秒表数字表达、计次记录显示均使用文本图层。

○  操作按钮默认文本使用“启动”和“计次”，其中计次按钮不可用所以透明度使用26%。

○  秒表的时间数字使用分开的三个文本图层，默认显示为00:00.00。（与时钟案例类似）

○  建立计次标题、具体计次时间和时间变化值的三个空文本图层，图层高度设为单行文本可以显示的高度，并一起放入计次记录的滚页容器层中，使滚页容器支持竖向滚动。

建立操作按钮之间的关系

根据前面梳理的按钮逻辑对“启动”文本图层添加“点击”触发：

○  当“启动”的文本为“启动”时，将“启动”文本变为“停止”；将“启动”图层的颜色调整为红色；将“计次”图层透明度变为100%，代表可用状态；同时考虑到暂停后再次启动的情况，将“计次”文本设为“计次”。

○  当“启动”的文本为“停止”时，将“计次”文本变为“复位”；将“停止”文本变为“启动”；将“启动”图层的颜色重新设为为绿色。

对“计次”文本图层同样添加“点击”触发：

○  当“计次”文本内容为“计次”，同时透明度为100时，计次按钮操作有效，具体反应设置之后再添加。

○  当“计次”文本内容为“复位”时，将“计次”文本重新设为“计次”，并将其透明度设为30%。

建立六个变量分别命名为 ss 、 s 、 m 、 count 、 lasttime 、 addedtime ，分别对应微秒数、秒数、分钟数、计次次数、上次计次时间、最近两次计次的时间差。（仅适用于当前场景的变量即可）所有变量均为数字变量，除了计次次数默认值为1之外，其他所有变量的初始默认值均为0。

在对“启动“文本的点击触发下，添加对变量 ss 、 s 、 m 的赋值和停止操作

当“启动”的文本为“启动”时，对变量 ss 、 s 、 m 进行赋值设置：

○  变量ss代表微秒数，需要对其赋值2次，一次使其每0.01秒增加1；一次使其每1秒做一次归零赋值，同时＋1的设置需要延迟0.01秒开始，而考虑其支持停止和启动的操作，所以归零增加操作延迟，具体表达式： 1-(ss/100)

○  变量 s 代表秒数，同样对其赋值2次，一次使其每1秒增加1；每60秒做一次归零赋值。同样由于停止和启动的用户可操作性，每秒增加1的延迟开始需要与微秒数归零延迟的时间一致，使用表达式： 1-(ss/100) ；而归零赋值的延迟开始使用表达式： 60-s-(ss/100)

○  变量 m 代表分钟数，使其每60秒增加1，延迟开始时间使用表达式： 60-s-(ss/100) ，与秒数归零延迟的时间一致

当“启动”的文本为“停止”时，对变量 ss 、 s 、 m 添加停止设置，使得点击停止文本时对变量 ss 、 s 、 m 的赋值计算停止保持不变。

整体对“启动“文本的点击触发，即对界面中右侧按钮对设置如下图所示：

添加触发“监听”，监听不断变化的变量ss，将秒表数字显示的文本与变量 ss 、 s 、 m 的关系建立起来。对于微秒数、秒数及分钟数增加条件判断，当数值小于10时使用表达式 “0”+ss 、 “0”+s 和 “0”+m ；当数值大于等于10时直接使用变量 ss 、 s 、 m 的值。

在对“计次“文本的点击触发下，添加对变量 count 、 lasttime 、 addedtime 的赋值。考虑到首次的计时的 lasttime 与 addedtime 值一致，同时在显示计时记录显示时首行不涉及换行操作，这里将 count=1 与 count>1 的场景作区分。

当“计次“文本为“计次“透明度为100%，同时 count=1 时：

○  对先对变量 lasttime 赋值  m*60+s+ss/100 记录下第一次计次时秒表走过的时间；

○  再对变量 count 做  count +1  的赋值。

当“计次“文本为“计次“透明度为100%，但 count>1 时：

○  先利用变量lasttime和当前变量 ss 、 s 、 m 的值进行计算，得到其与之前一次计次的时间差赋值给变量 addedtime ，表达式为： (m*60+s+ss/100)-lasttime ；

○  再对变量 lasttime 赋值  m*60+s+ss/100 ；

○  最后对变量 count 做  count +1  的设置。 （这里的赋值设置需要注意先后关系）

将计次记录中计次标题、具体时间、变化值的文本与变量 count 、 lasttime 、 addedtime 的关系建立起来。同时考虑文本显示，将文本的高度与变量 count 也建立关联，使其每次高度都可以增加一行显示。

当“计次“文本为“计次“透明度为100%，同时 count=1 时：

○  对“计次标题“添加文本设置，文本内容使用表达式 "计次"+count  。

○  对“具体时间“同样添加文本设置，内容为表达式 `分`.text+":"+`秒`.text+"."+`百分之一秒`.text  ，即显示当前秒表数字显示对文本内容。

○  对“变化值“添加文本设置，内容为表达式 "+"+format(lasttime, "#.00") ，这里由于是首次计次，所以计次时间变化量就为当前变量 lasttime 的值，在数字前增加一个“+“表示时间增量。这里还涉及一个在Protopie中将数字转换为文本格式时，可以指定数字显示格式的表达式。 format(lasttime, "#.00") 表示将 lasttime 作为文本显示，同时数值上需要保留至小数点后两位。

当“计次“文本为“计次“透明度为100%，同时 count>1 时，在变量 count+1 赋值之前增加设置：

○  先对“计次标题“、“具体时间“、“变化值“三个文本对高度进行调整，使其高度等于 count*32 ，32表示每行文本的显示高度（文字大小为16，行距为2）

○  对“计次标题“添加文本设置，文本内容使用表达式 `计次标题`.text+"\n"+"计次"+count  。表示在原有的“计次标题“文本内容的基础上，换行后显示本次的计次数。

○  同理将“具体时间“对文本内容设置为 `具体时间`.text+"\n"+`分`.text+":"+`秒`.text+"."+`百分之一秒`.text  ；将“变化值“对文本内容设置为 `变化值`.text+"\n"+"+"+format(addedtime, "#.00")

当计次显示操作一屏时，按照本案例的设定，单屏只能显示8条计次记录，当第9次记录出现时，即 count>8 时，增加滚页设置，使其自动向下滚动一行。使用表达式： (count-9)*32 这里表达式中需要将变量 count-9 是由于，整个条件 count>8 是放置在 count+1 赋值之后的，所以当执行滚页操作时，当前的变量 count 已经增加1了。

当界面左侧按钮显示计次文本时的单击触发设置如下图所示：

对当左侧按钮文本值为”复位“时，对所有的变量、文本值、文本高度、滚页做恢复到初始值的设置

○  对变量 ss 、 s 、 m 、 count 的值重新设置到初始值。由于变量 lasttime 和 addedtime 是通过其他变量计算得到的所以不用做特别设置。

○  将“计次标题“、“具体时间“、“变化值“三个文本的内容都设置为 ““ ，表示空文本无内容。

○  将“计次记录“的滚页容器层重新滚页值初始的0的位置。

大功告成！！！可以直接在预览窗中查看效果~~

https://cloud.protopie.io/p/ada86850ea

（源文件中有三个不同场景，对应“时钟”、“秒表”、“计时器”）

相关教程：Protopie进阶教程--动态时钟（上）

动态时钟的实现

下面是动态时钟的效果图（ps:不过好像看不出动态效果来）：

下面是具体的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>动态时钟</title>
<script type="text/javascript">
//在网页上输出：今天的日期、星期、现在的时间（动态时钟）
function start()
{
	var today=new Date();
	var year=today.getFullYear();
	var month=today.getMonth()+1;
	var day=today.getDate();
	var hours=today.getHours();
	var minutes=today.getMinutes();
	var seconds=today.getSeconds();
	//如果是单位数字，前面补0
	month=month<10? "0"+month :month;
	day=day<10? "0"+day :day;
	hours=hours<10? "0"+hours :hours;
	minutes=minutes<10? "0"+minutes :minutes;
	seconds=seconds<10? "0"+seconds :seconds;
	//时间信息连成字符串
	var str="今天是"+year+"年"+month+"月"+day+"日 "+hours+":"+minutes+":"+seconds;
	//获取id=result的内容
	var obj=document.getElementById("result");
	obj.innerHTML=str;
	//延时器
	window.setTimeout("start()",1000);
}
</script>
</head>

<body onload="start()">
<div id="result"></div>
</body>
</html>