现在，外卖也好，购物也好，打车也好，点评打分是网站常见的用户互动的功能，一般都是1~5分之间评分，分值对应几颗星或者几颗心，当用户点击确定之后打分就完成了。下面我就以大众点评网为例，制作了打分效果。
做之前，我们先来分析一下，点评共涉及到6个状态：没有打分的时候、一颗星的时候、二颗星的时候、三颗星的时候、四颗星的时候、五颗星的时候。
根据之前的学习，知道点评区域是一个动态面板，这个动态面板有六个状态，当鼠标分别悬停时，切换出不同的状态。
我们先准备好6个星星的图片。
一、index页面，拖一个动态面板到页面区域。
二、为动态面板添加6个状态，分别命名：zero、one、two、three、four、five
三、编辑动态面板的状态，我们先编辑zero状态，双击zero状态，进入编辑状态
1、先拖一个矩形部件作为打分区域的背景，属性如下
2、再拖一个图片部件，命名zeroimg，双击选择准备好的未打分的图片
3、接下来拖入一个热点部件，第一个部件盖住左侧第一个星星，将第一个部件命名为star1
4、需要为star1添加“鼠标移入时” “鼠标点击时” “鼠标移出时”
鼠标移入时，动态面板变为一颗星星亮了，状态选择one
鼠标点击时，需要记住打了几分，一颗星对应1分，两颗星对应两分，这里就需要新建一个变量分数，命名为score
这里需要注意的是，要先新建变量（点击fx就行），不然添加用例的时候是没有score这个选择的。
鼠标移出时，需要用到用例编辑里的条件功能，这里是当分数是0的时候，设置动态面板状态为zero状态，当分数是1的时候状态为one，以此类推。
5、拖入一个矩形，无填充无边框，输入文字“点击星星为商户打分”
四、将star1复制4份，分别命名为star2、star3、star4、star5，大小不变，Y坐标不变，X坐标依次是23、40、57、74
将每个star涉及到“鼠标移入时” “鼠标点击时”事件修改对应的状态与分数，“鼠标移出时”不用修改
五、将zero状态中所有的元素都复制到one、two、three、four、five状态中，图片也对应修改为一颗星、两颗星、三颗星、四颗星、五颗星，文字“点击星星为商户打分”也对应修改为：很差、差、较好、好、很好
六、给index页面添加“页面载入时”事件，页面初始化的时候，将score设置为0，这样打开页面的时候就是等待打分的状态了
到这里，就可以预览一下看看，跟真的一样。
原创文章，作者：交互精选，如若转载，请注明出处：https://www.iamue.com/36757/
