在本章中，你将学会如何使用动态面板和时间函数创建一个WebClock在线时钟网站。
在日常工作中，我们常常需要专注于某件事情，于是市场上出现了很多类似番茄工作法的App，它通过倒计时的方式，记录人们工作的时长。
当我们完成一项工作时，看看时钟的时间，心里会不由地心生满足：啊！又工作了那么久。
那么本章，我们就来学习下如何创建一个WebClock在线时钟网站。
项目创建
首先，创建一个新项目，命名为WebClock。
基础样式
首先，我们给整个页面背景加个填充颜色。
我们在“样式”工具栏中设置背景颜色为#1A1B1C。
拖入一个动态面板，设置它的尺寸为1366*60，滚动模式为“从不滚动”，勾选100%宽度。
动态面板勾选100%宽度后，在浏览器预览时，将根据分辨率的大小自动调整宽度。目前我们设置的动态面板的宽度为1366，当我们屏幕预览分辨率宽度为1920时，动态面板的宽度将自动调整为1920。
接下来，拖入三个文本标签，分别设置它们的大小：
Designed by RicardoWesley：三级标题组件，17号字体，加粗，颜色为#F2F2F2；
2021年12月27日 周一：三级标题组件，命名为“日期”，随便写个日期（后期动态更新文字），17号字体，加粗，颜色为#F2F2F2；
10:53:00：一级标题组件，命名为“时间”，随便写个时间（后期动态更新文字），240号字体，加粗，颜色为#F2F2F2；
这样，我们就完成了基础页面的绘制。
交互动作
首先是日期，我们需要日期的文本文字获取当前的时间。
我们选中“日期”，在“交互”工具栏中新建交互，选择“载入时”，选择“设置文本”，目标为“日期”，设置为“文本”。
值为“[[Now.getFullYear()]]年[[Now.getMonth()]]月[[Now.getUTCDate()]]日 星期[["日一二三四五六".charAt(Now.getUTCDay())]]”。
我们设置的日期格式为XXXX年XX月XX日 星期X，Axure提供的时间函数是获取当前的年月日方式，我们调用时间函数，并将结果赋值给“日期”。
这样，我们就完成了日期的获取。
同理，我们选中“时间”，在“交互”工具栏中新建交互，选择“载入时”，选择“设置文本”，目标为“时间”，设置为“文本”。
值为“[[Now.toLocaleTimeString(“en-GB”)]]”。
这是Axure获取当前时间的方法。
我们通过Axure的函数获得了日期和时间。
但这里出现了一个问题，我们时间只停留在获取那一刻的时间，并没有实时更新，我们的逻辑还需要优化下。
逻辑优化
和上一章的逻辑一样，我们可以将顶栏的动态面板设置2个状态，然后让每1秒动态面板切换一次，这样我们就获得了一个计时器。
然后在动态面板改变时，再更新“时间”的文字。
我们给动态面板设置2个状态，然后让它载入时不断“循环”。
双击进入动态面板，在动态面板状态一栏中添加1个状态，这样我们动态面板就有2个状态：State1、State2。
然后，我们在右侧“交互”工具栏，点击“新建交互”，选择“载入时”，目标选择“动态面板”，状态选择“下一项”，勾选“向后循环”。
点击“更多选项”，我们勾选“循环间隔”，设置为1000毫秒，并勾选“首个状态延时1000毫秒后切换”。
然后在“交互”工具栏中新建交互，选择“状态改变时”，选择“设置文本”，目标为“时间”，设置为“文本”。
值为“[[Now.toLocaleTimeString(“en-GB”)]]”。
这样，我们就完成了整个WebClock在线时钟的逻辑！
我们在浏览器中预览下效果。
哈哈哈，效果不错！
为了让这个网站能够公开访问，我们可以生成html文件，然后发布到gitHub或者gitee中，这样就可以将网站分享给朋友们了。
网站地址
WebClock在线时钟： ricardowesley.gitee.io/countdown
快来动手试试吧！
