five-stars

自由定制一个五角星。

by weiming le

HTML

<div class="form">
    <label for="mod-name">模块名</label>:
    <input id="mod-name" type="text" />
    <label for="t">宽度：</label>
    <input id="t" class="text" class="text" type="text" style="position:relative;z-index:2;" /><span>px</span>

    <button id="make" type="button">make it</button>
    <div style="margin-top:20px;">
        <textarea id="code" style="width: 400px;height:400px;">.five-star {position: relative;width: 0;height: 0;border-style: solid;border-color: red transparent transparent transparent;} .five-star:before {border-color: transparent transparent red transparent;} .five-star:after {border-color: transparent transparent #fff transparent;} .five-star:before,.five-star:after {position: absolute;left: 50%;display: block;content:'';width: 0;height: 0;border-style: solid;overflow: hidden;}</textarea>
    </div>
</div>
</div>

JavaScript

var $t = $('#t');
         // 计算正弦函数
        var sinVal = function(x) {
            return Math.sin(x * Math.PI / 180);
        };
         // 获取三个三角形盒子信息
        var getParams = function(v) {
            v = parseInt(v);
            var h1 = v * 0.5 * sinVal(36) / sinVal(54),
                h2 = v * sinVal(72),
                ft = v * sinVal(18) * 2,
                h3 = v * sinVal(18) * sinVal(36) / sinVal(54),
                top = h2 - (h1 + h3);

            // 
            return {
                0: {
                    h: Math.round(h1),
                    w: Math.round(v * 0.5),
                    ml: 0,
                    top: Math.round(h1)
                },
                1: {
                    h: Math.round(h2),
                    w: Math.round(ft * 0.5),
                    ml: -Math.round(ft * 0.5),
                    top: Math.round(h3) - Math.round(h2) * 2
                },
                2: {
                    h: Math.round(h3),
                    w: Math.round(ft * 0.5),
                    ml: -Math.round(ft * 0.5),
                    top: -Math.round(h3)
                }
            }
        };

        var initCodeStr = $('#code').text().split('}').join('}\n'); //预先缓存五角星模块代码

        $('#make').on('click', function() {
            var val = $t.val(),
                getInfo = getParams(val);

            var str = '',
                arr = ['', ':before', ':after'],
                cName = $.trim($('#mod-name').val()),
                cacheObj;

            for (var key in getInfo) {
                cacheObj = getInfo[key];
                str += '.' + cName + arr[key] + '{top:' + cacheObj.top + 'px;margin-left:' + cacheObj.ml + 'px;border-width:' + cacheObj.h + 'px ' + cacheObj.w + 'px;}' + '\n';
            }
            // console.table(getInfo);
            $('#code').text(initCodeStr + '\n' + str);
            $('body').append('<div style="width:' + getInfo[0].w * 2 + 'px;height:' + getInfo[1].h +...