移动端jquery-pie-loader动态饼状图以及mobiscroll时间控件(最新版)

效果图如下：

1.动态饼状图

1.jquery-pie-loader的插件需要的css和js网上下载即可

<!-- 饼状图  --><link href="zzsc-demo.css" rel="stylesheet" type="text/css"><link href="jquery-pie-loader.css" rel="stylesheet" type="text/css"><script src="jquery-pie-loader.js" type="text/javascript"></script> 

2.html页面需要的标签必写

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

3.js的渲染

/* 饼状图页面初始化 ，参数是直接放在input里面保留的*/<input type='hidden' value='${profit}' class='num'> //后台传过来的初始化参数    var num = '';    var rand = function() {            num = $('.num').val();            return num;     //该值为后台传过来的数据；js里面有两个相对应的值必须一致    }      $('*[data-behavior="pie-chart"]').each(function() {        $(this).svgPie({                    percentage: rand(),                    dimension: 150        });    });  /* 点击查询时候的重新绘制，需把初次绘制的$('#pie')标签删除再插入绘制 */ $('.btnsubmit').on('click',function(){        var startDate = $("#startDate").val();        var endDateTime = $("#endDateTime").val();           $.post("#",{startDate:startDate,endDateTime:endDateTime},function(data){            $('.num').val('');             $('.num').val(data.profit);                                    num = parseFloat($('.num').val());             $('#pie').remove();            $('.zzsc-container').html('<figure id="pie" data-behavior="pie-chart"></figure>')            $('*[data-behavior="pie-chart"]').each(function() {                $(this).svgPie({                            percentage: rand(),                            dimension: 150                });            });          });             }) 

mobiscroll时间控件

1.需要的css和js官方都可以下载，我是用的网上做好的demo

<!-- 时间插件 --><link href="mobiscroll/mobiscroll_002.css" rel="stylesheet" type="text/css"><link href="mobiscroll/mobiscroll.css" rel="stylesheet" type="text/css"><link href="mobiscroll/mobiscroll_003.css" rel="stylesheet" type="text/css"><script src="mobiscroll/mobiscroll_002.js" type="text/javascript"></script><script src="mobiscroll/mobiscroll.js" type="text/javascript"></script>

2.html页面

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

3.js部分

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, //开始年份        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"]));      //默认为当前时间,控制起始时间为当前日期    var date = new Date();    $("#startDate").val( date.getFullYear()+'-'+(date.getMonth()+1)+'-'+date.getDate())    $("#endDateTime").val( date.getFullYear()+'-'+(date.getMonth()+1)+'-'+date.getDate())    //阻止input访问手机键盘    $("#startDate").focus(function(){            document.activeElement.blur();    });    $("#endDateTime").focus(function(){            document.activeElement.blur();    });