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

来源：互联网发布：数据分析师报名时间编辑：程序博客网时间：2024/06/05 12:34

移动端时间插件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);

阅读全文

0 0