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

移动端时间插件mobiscroll

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

<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);