从进度脚本中删除“百分比”符号

时间:2013-08-20 10:01:23

标签: jquery animation progress

可能是一个简单的!我有一个工作循环进度条,中间的百分比达到100。我想要的是删除数字后面的'%'符号。我确信它很简单,就是找不到它。对不起,我没有在线工作示例。

(function( $ ){

$.fn.pietimer = function( method ) {
    // Method calling logic
    if ( methods[method] ) {
        return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ));
    } else if ( typeof method === 'object' || ! method ) {
        return methods.init.apply( this, arguments );
    } else {
        $.error( 'Method ' +  method + ' does not exist on jQuery.pietimer' );
    }
};

var methods = {
    init : function( options ) {
        var state = {
            timer: null,
            timerSeconds: 10,
            callback: function () {},
            timerCurrent: 0,
            showPercentage: false,
            fill: false,
            color: '#CCC'
        };

        state = $.extend(state, options);

        return this.each(function() {

            var $this = $(this);
            var data = $this.data('pietimer');
            if ( ! data ) {
                $this.addClass('pietimer');
                $this.css({fontSize: $this.width()});
                $this.data('pietimer', state);
                if (state.showPercentage) {
                    $this.find('.percent').show();
                }
                if (state.fill) {
                    $this.addClass('fill');
                }
                $this.pietimer('start');
            }
        });
    },

    stopWatch : function() {
        var data = $(this).data('pietimer');
        if ( data ) {
            var seconds = (data.timerFinish-(new Date().getTime()))/1000;
            if (seconds <= 0) {
                clearInterval(data.timer);
                $(this).pietimer('drawTimer', 100);
                data.callback();
            } else {
                var percent = 100-((seconds/(data.timerSeconds))*100);
                $(this).pietimer('drawTimer', percent);
            }
        }
    },

    drawTimer : function (percent) {
        $this = $(this);
        var data = $this.data('pietimer');
        if (data) {
            $this.html('<div class="percent"></div><div class="slice'+(percent > 50?' gt50"':'"')+'><div class="pie"></div>'+(percent > 50?'<div class="pie fill"></div>':'')+'</div>');
            var deg = 360/100*percent;
            $this.find('.slice .pie').css({
                '-moz-transform':'rotate('+deg+'deg)',
                '-webkit-transform':'rotate('+deg+'deg)',
                '-o-transform':'rotate('+deg+'deg)',
                'transform':'rotate('+deg+'deg)'
            });
            $this.find('.percent').html(Math.round(percent)+'%');
            if (data.showPercentage) {
                $this.find('.percent').show();
            }
            if ($this.hasClass('fill')) {
                $this.find('.slice .pie').css({backgroundColor: data.color});
            }
            else {
                $this.find('.slice .pie').css({borderColor: data.color});
            }
        }
    },

    start : function () {
        var data = $(this).data('pietimer');
        if (data) {
            data.timerFinish = new Date().getTime()+(data.timerSeconds*1000);
            $(this).pietimer('drawTimer', 0);
            data.timer = setInterval("$this.pietimer('stopWatch')", 50);
        }
    },

    reset : function () {
        var data = $(this).data('pietimer');
        if (data) {
            clearInterval(data.timer);
            $(this).pietimer('drawTimer', 0);
        }
    }

};
})(jQuery);


$(document).ready(function() {
$('#timer').pietimer({
    timerSeconds: 7,
    color: '#234',
    fill: false,
    showPercentage: true,
});
});

1 个答案:

答案 0 :(得分:0)

你在找这个吗?

$this.find('.percent').html(Math.round(percent)+'%');

只需删除+'%'

即可