通常对购买的商品进行评级。你如何实现点击星星评级的原型效果？

当我们在淘宝网或公众评论中订购食品时，我们经常需要评估商家的服务。那你如何实现点击星星得分的原型效果呢？本文将分享制作此类原型效果的实现过程。

准备组件并设置交互式样式

将矩形拖到设计区域，将宽度和高度设置为50，将其转换为五角星形状。四颗相同的五角星连续复制并水平等距分布，五颗星分别命名为1,2,3,4和5。拖动五颗星下方的文本框，输入文字< ;;点击星标，评价商家“，文本框被命名为”得分结果“。

为这五颗星设置所选效果，选择后用红色填充，线段颜色为无色。

设置互动活动

在设置交互效果之前，您需要添加一个全局变量分数以用作分数的定义。首先，要分析相互作用，不难看出以下三种相互作用：鼠标点击，鼠标移入和鼠标移出。

让我们逐个配置这些交互用例中的操作：

1.鼠标单击事件

第一个星：设置变量得分=1，选择第一个星，最后四个星没有被选中，文本框的内容是“1点，非常不满意”;

第二颗星：设置变量得分=2，前两颗星被选中，最后三颗星未被选中，文本框内容为“2分，不满意”;

第三个星：设置变量得分=3，选择前三个星，最后两个星没有被选中，文本框的内容是“3点，一般”;

第四颗星：设置变量得分=4，前四颗星被选中，最后一颗星未选中，文本框内容为“4分，满意”;

第五颗星：设置变量得分=5，选中所有五颗星，文本框内容为“5分，非常满意”。

2.鼠标进入事件

第一颗星：第一颗星被选中，最后四颗星未经检查，文本框内容为“1分，非常不满意”;

第二颗星：前两颗星被选中，最后三颗星未被选中，文字框内容为“2分，不满意”;

第三颗星：前三颗星被选中，最后两颗星未被选中，文字框内容为“一般三分”;

第四颗星：前四颗星被选中，最后一颗星被取消选中，文字框内容为“4分，满意”;

第五颗星：全部五颗星被选中，文字框的内容为“5分，非常满意”。

3.将鼠标移出事件

每颗星的动作设置都相同，设置如下：

案例1：如果变量得分=1，则选择第一个星，未选择最后四个星，文本框的内容为“1点，非常不满意”;

案例2：如果变量得分=2，则选择前两颗星，未选择最后三颗星，文本框内容为“2分，不满意”;

情况3：如果变量得分=3，则不选择最后两颗星，文本框的内容为“通常为3分”;

案例4：如果变量得分=4，则选择前四个星，取消选中最后一个星，并且文本框的内容为“4分，满意”;

案例5：如果变量得分=5，则选择所有五个星，文本框的内容为“5分，非常满意”。

此时，配置所有交互，预览原型效果，最后共享每个人的源文件

链接:https://pan.baidu.com/s/1nwDc3cl密码: sjfx

本文最初由@kevin出版。未经许可，禁止复制

标题图由作者提供

« 2018年微信运营专员福利：鱼池软件吸粉有一个妙招 | HTTP状态代码比较表 »