编程练习，人人网评论功能教程-慕课网

7-3 编程练习

本节编程练习不计算学习进度，请电脑登录imooc.com操作

编程练习

小伙伴们，根据所学知识，实现网页加星功能，点击相应的星星，实时显示加星结果。

温馨提示:完成任务后，请验证是否与实践描述效果一致，如一致，恭喜您，你已经掌握此技能，否则，请重复学习此节内容。

任务

一、定义getStar函数，显示对应的星星

  提示:

  1. getStar函数接受一个参数n，即选择了几星；

  2. 遍历5个星星的节点，如果索引小于等于n-1，改变其color为‘red’；

  3. 否则改变其color为 ''；

  4.把n写入显示结果的节点的innerHTML；

二、遍历星星节点，添加点击事件

  提示:

  1. 取得自身的star属性；

  2. 调用getStar函数，传入自身的star属性值；

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        span {
            cursor: pointer;
        }
    </style>
    <script type="text/javascript">
        window.onload = function () {
            // 获取元素
            var stars = document.getElementById('stars').getElementsByTagName('span');
            var ret = document.getElementById('ret');
 
            //定义getStar函数
 
 
            // 每个星星节点的点击事件
 
        }
    </script>
</head>
<body>
<div id="stars">
    <span star="1">★</span>
    <span star="2">★</span>
    <span star="3">★</span>
    <span star="4">★</span>
    <span star="5">★</span>
</div>
<div id="ret"></div>
</body>
</html>