YellowTulipShow-FiveStarScore
/
index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <link rel="stylesheet" type="text/css" href="src/style.css">

    <script type="text/javascript" src="src/jquery-2.2.4.js"></script>
    <script type="text/javascript" src="src/svg-inject.js"></script>
    <script type="text/javascript" src="src/use.js"></script>

    <!-- 测试定义使用的大小尺寸 -->
    <style type="text/css">
        .fiveStarRegion {
            font-size: 33px;
        }
    </style>

    <h3>程序生成的星星:</h3>
    <div id="IDHTML_ContainerContent" class="containerContent"></div>
    <script type="text/javascript">
        (function() {
            var html = _plusFiveStar.Init({
                // 星星评分的数值
                number: 3.5,
                // 总共有几颗星星
                count: 5,
                // 星星的矢量图地址
                star_svg_path: 'src/star-solid.svg',
                // 是否开启编辑功能
                isedit: true,
                // 开启编辑功能所需的参数定义
                edit: {
                    // 编辑时数值的颗粒度设置, 范围在 (0<n<1)
                    particle_size: 0.5,
                    // 编辑需要的事件定义, 值为: ( mousemove | click )
                    event: 'click',
                    // 数值修改触发的更改事件
                    onchange: function (number) {
                        // 在这里写入您的自定义赋值代码
                        console.log('星星评分数值更改为: ', number);
                    },
                },
            });
            $('#IDHTML_ContainerContent').append(html);
        })();
    </script>
</body>
</html>