移动端时间插件mobiscroll以及饼状进度图pie-loader

移动端时间插件mobiscroll

时间选择器插件需要引入需要的js和css

该插件基于 mobiscroll，需要的可以直接访问 https://docs.mobiscroll.com/2-17-2

<link href="../css/Company/mobiscroll/mobiscroll_002.css" rel="stylesheet" type="text/css">
<link href="../css/Company/mobiscroll/mobiscroll.css" rel="stylesheet" type="text/css">
<link href="../css/Company/mobiscroll/mobiscroll_003.css" rel="stylesheet" type="text/css">
<script src="js/Company/pieLoader/jquery-2.1.1.min.js"></script> //基于jq
<script src="js/Company/mobiscroll/mobiscroll_002.js" type="text/javascript"></script>
<script src="js/Company/mobiscroll/mobiscroll.js" type="text/javascript"></script>

//时间选择器
<div class="startTime">
            <label for="appDate">开始时间</label>
            <input value="选择时间" class="" readonly="readonly" name="appDate" id="startDate" type="text">
        </div>      
        <div class="endTime">
            <label for="appDate">结束时间</label>
            <input value="选择时间" class="" readonly="readonly" name="appDate" id="endDateTime" type="text">
        </div>

var currYear = (new Date()).getFullYear();
    var opt={};
    opt.date = {preset : 'date'};
    opt.default = {
        theme: 'android-ics light', //皮肤样式android-ics 
        display: 'modal', //显示方式 
        mode: 'scroller', //日期选择模式
        dateFormat: 'yyyy-mm-dd',
        lang: 'zh',
        showNow: true,
        nowText: "今天",
        startYear: currYear - 10, //开始年份
        endYear: currYear + 10 ,//结束年份
        onSelect: function (valueText, inst) {
            var id = $(this)[0].id;
            var validity = valueText.split("-");
            if (id === "startDate") {
               if (opt.default.maxDate) {
                  opt.default.maxDate = null;
               }
               opt.default.minDate = new Date(validity[0], +validity[1] - 1, +validity[2] + 1);
               $("#endDateTime").mobiscroll($.extend(opt['date'], opt['default']));
            }
         }
    };  
    $("#startDate").mobiscroll($.extend(opt['date'], opt['default'])); 
    $("#endDateTime").mobiscroll($.extend(opt['date'], opt['default']));  
    $("#startDate").change(function(){
        $("#startDate").css({'color':'#4E8BD8'})
    });
    $("#endDateTime").change(function(){
        $("#endDateTime").css({'color':'#4E8BD8'})
    })
    //阻止input访问手机键盘
   $("#startDate").focus(function(){
        document.activeElement.blur();
    });
    $("#endDateTime").focus(function(){
        document.activeElement.blur();
    });

饼状进度图pie-loader

<link href="../css/Company/pieLoader/zzsc-demo.css" rel="stylesheet" type="text/css">
<link href="../css/Company/pieLoader/jquery-pie-loader.css" rel="stylesheet" type="text/css">
<script src="js/Company/pieLoader/jquery-2.1.1.min.js"></script> //基于jq
<script src="js/Company/pieLoader/jquery-pie-loader.js" type="text/javascript"></script> 

<section class="zzsc-container">
    <figure id="pie" data-behavior="pie-chart"></figure>        
</section>

  //饼状图
   var rand = function() {
            var num = 52481.07
            return num; //该值为后台传过来的数据；js里面有两个相对应的值必须一致
        }
        $('*[data-behavior="pie-chart"]').each(function() {
        $(this).svgPie({
                    percentage: rand(),
                    dimension: 140    //容器的直径
        });
    }); 

jquery-pie-loader.js 源码

(function($) {

    'use strict';

    // Create the defaults once
    var pluginName = 'svgPie',
        defaults = {
            easing: 'easeOutCubic',
            dimension: 200,
            percentage: 50,
            duration: 2000,
            onStart: function() {},
            onComplete: function() {}
        };

    // The actual plugin constructor
    function Plugin(element, options) {
        this.element = element;
        this.settings = $.extend({}, defaults, options);
        this._defaults = defaults;
        this._name = pluginName;
        this.init();
    }

    // Custom easing function borrowed from jQuery-UI
    $.extend($.easing, {
        easeOutCubic: function(x, t, b, c, d) {
            return c * ((t = t / d - 1) * t * t + 1) + b;
        }
    });

    // Avoid Plugin.prototype conflicts
    $.extend(Plugin.prototype, {

        // Initialization logic
        init: function() {
            $(this.element).css({
                'width': this.settings.dimension + 'px',
                'height': this.settings.dimension + 'px'
            });
            this.createSvg();
            this.animateNumber();
            this.animateStrokeDasharray();
            $(this.element).addClass('rendered');
        },

        // SVG pie markup rendering
        createSvg: function() {
            var half = this.settings.dimension / 2;
            var quarter = this.settings.dimension / 4;
            var area = Math.PI * 2 * quarter;
            var svg =
                '<svg xmlns:svg="http://www.w3.org/2000/svg"' +
                'xmlns="http://www.w3.org/2000/svg"' +
                '>' +

                '<circle r="' + half +
                '" cx="' + half +
                '" cy="' + half +
                '"/>' +

                '<circle r="' + (quarter + 0.5) + // +0.5 to debug non-webkit based browsers
                '" cx="' + half +
                '" cy="' + half + '"' +
                'style="stroke-width:' + half + 'px;' +
                'stroke-dasharray:' + '0px' + ' ' + area + ';' +
                '"/>' +

                '</svg>' +

                '<div class="percentage"' +
                '></div>';

            $(this.element).prepend(svg);
        },

        // Number animation
        animateNumber: function() {
            var $target = $(this.element).find('.percentage');

            $({
                percentageValue: 0
            }).animate({
                percentageValue: this.settings.percentage
            }, {

                duration: this.settings.duration,

                easing: this.settings.easing,

                start: this.settings.onStart,

                step: function() {
                    // Update the element's text with rounded-up value:
                    $target.text(this.percentageValue.toFixed (2));
                },

                complete: this.settings.onComplete
            });
        },

        // Pie animation
        animateStrokeDasharray: function() {
            var debug = this.settings.percentage >= 51000.05 ? 1 : 0; // 这个值跟前台页面的数据必须一致
            var area = 2 * Math.PI * ((this.settings.dimension / 4) + 0.4); 
            var strokeEndValue = (this.settings.percentage + debug) * area / 51000.05;  //这个值跟前台页面的数据必须一致
            var $target = $(this.element).find('svg circle:nth-child(2)');

            $({
                strokeValue: 0
            }).animate({
                strokeValue: strokeEndValue
            }, {

                duration: this.settings.duration,

                easing: this.settings.easing,

                step: function() {
                    $target.css('stroke-dasharray', this.strokeValue + 'px' + ' ' + area + 'px');
                }
            });

        }

    });
    $.fn[pluginName] = function(options) {
        return this.each(function() {
            if (!$.data(this, 'plugin_' + pluginName)) {
                $.data(this, 'plugin_' + pluginName, new Plugin(this, options));
            }
        });
    };

})(jQuery);