在本章中，你将学会使用中继器和交互动作创建一个“每日一句”网站。
项目背景
在读书时期，看到优美的句子都会拿个本子记下来。那时候，真的摘抄了满满一本子的句子，也获得极大的满足感。现如今互联网发达了，也就渐渐开始不用笔写东西了，那种美好的时光也就成了回忆。
某个晚上突然想到，要是有个网站或者App能够在每天早上随机推送一个优美或励志的句子，那么这一天也将充满能量。
在网上找了找，发现倒是有不少这样的网站和应用，那我们也沿着这个思路，创建一个“每日一句”网站。
那么，我们开始吧。
项目搭建
首先，创建一个新项目，命名为OneSentence。
页面样式
页面样式部分，设置页面背景填充颜色为#F0F2F5。
拖入一个“矩形1”组件，命名为“card”。
设置位置为（40，40），设置大小为660*100，设置字号为17，线宽为0，圆角半径为8，左右边距为20，上下边距为10。
拖入一个“按钮”组件，设置位置为距离card矩形40的位置。
设置字号为14，线宽颜色为#DCDFE6，圆角半径为8。
以上，我们的基础样式就完成了。
逻辑分析
接下来，我们分析一下实现的逻辑。
首先我们需要准备示例数据列表，它包含我们需要的句子数据。然后每当我们点击“换一批”的按钮时，展示的Card卡片中的文字会随机从数据列表中取。
明白这两个核心逻辑后，我们看看如何实现它。
交互动作-中继器
示例数据部分，我们可以使用中继器作为数据载体。
拖入一个“中继器”组件，进入内页，删掉示例的矩形，将Card矩形剪切进去。
并在“交互”工具栏中，设置每项加载时的交互，选择“设置文本”，选择目标为“card”，设置文本为“[[item.Column0]]”。
然后在“样式”工具栏，除了放入一堆的示例数据，我们还需要设置分页，保证我们每次只展示一个卡片。
我们设置了分页，勾选“多页显示”，每页项数量设置为1，起始位1。
这样，我们中继器在遍历数据的时候，只会展示一条数据，这是因为它采用了分页，每一页只展示一张卡片。
交互动作-随机页
我们关闭中继器，接下来我们要实现点击“换一批”，中继器随机切换展示的页。
我们选中“换一批”按钮，在“交互”工具栏中新增一个“单击时”的交互，选择“设置当前显示页面”，目标为中继器，设置值为:
[[Math.ceil(10*Math.random())]]
科普一个知识点。
Math.random()：产生随机数
Math.ceil(x)：取整
我们使用这两个函数组合，获得了10以内的随机数。
项目预览
完成后，我们在浏览器中预览下效果。
哈哈哈，效果不错！
为了让这个项目能够公开访问，我们可以生成html文件，然后发布到gitHub或者gitee中，这样就可以将网站分享给朋友们了。
网址地址
“每日一句”网站： ricardowesley.gitee.io/onesentence
快来动手试试吧！
如果本专栏对你有帮助，不妨点赞、评论、关注～
