近期一个称重设备微信端开发前端知识点，及使用插件遇到的常见问题
一、进度条的实现
前期制作代码如下：
1、总体效果如下图：
2、html代码如下：
<div class="data_list" id="data_list"> <div class="item clearfix"> <div class="left_mod"> <span class="value">66.3</span><br /> <span class="name">体重(kg)</span> </div> <div class="right_mod"> <div class="level"> <ul class="clearfix"><li>偏低</li><li>标准</li><li>偏重</li><li>肥胖</li></ul> </div> <div class="progress" data-val="20"> <div class="progress_bar"> <div class="color_bar"> </div> </div> <div class="progress_bar_cover"><i class="circle"></i></div> </div> <div class="interval_line"><ul class="clearfix"><li></li><li></li><li></li><li></li></ul></div> <div class="interval"> <ul class="clearfix"> <li>12.5</li> <li>23.5</li> <li>29.5</li> </ul> </div> </div> </div> <div class="item clearfix"> <div class="left_mod"> <span class="value">66.3</span><br /> <span class="name">脂肪率(%)</span> </div> <div class="right_mod type3 type3_1"> <div class="level"> <ul class="clearfix"><li>偏低</li><li>标准</li><li>偏重</li></ul> </div> <div class="progress" data-val="80"> <div class="progress_bar"> <div class="color_bar"> </div> </div> <div class="progress_bar_cover"><i class="circle"></i></div> </div> <div class="interval_line"><ul class="clearfix"><li></li><li></li><li></li></ul></div> <div class="interval"> <ul class="clearfix"> <li>12.5</li> <li>23.5</li> </ul> </div> </div> </div> <div class="item clearfix"> <div class="left_mod"> <span class="value">66.3</span><br /> <span class="name">脂肪率(%)</span> </div> <div class="right_mod type3"> <div class="level"> <ul class="clearfix"><li>偏低</li><li>标准</li><li>偏重</li></ul> </div> <div class="progress" data-val="80"> <div class="progress_bar"> <div class="color_bar"> </div> </div> <div class="progress_bar_cover"><i class="circle"></i></div> </div> <div class="interval_line"><ul class="clearfix"><li></li><li></li><li></li></ul></div> <div class="interval"> <ul class="clearfix"> <li>12.5</li> <li>23.5</li> </ul> </div> </div> </div> </div>
3、SCSS样式代码如下：
@at-root .progress { position: relative; height: r(30); overflow-x: hidden; border-bottom-right-radius: r(15); border-top-right-radius: r(15); } @at-root .progress_bar { height: r(15); width: 100%; border-radius: r(7.5); overflow-x: hidden; margin-top: r(7); .color_bar { width: 100%; height: 100%; } @each $color,$start_value,$end_value in (blue,$blue_2,$blue_1),(green,$green_2,$green_1 ),(red,$red_1,$red_2),(yellow,$yellow_1,$yellow_2) { &.#{$color} { .color_bar { background: -o-linear-gradient(right, $start_value, $end_value); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(right, $start_value, $end_value); /* Firefox 3.6 - 15 */ background: linear-gradient(to right, $start_value, $end_value); /* 标准的语法（必须放在最后） */ background: -webkit-linear-gradient(left, $start_value, $end_value); /* Safari 5.1 - 6.0 */ } } } } @at-root .progress_bar_cover { position: absolute; width: 100%; height: r(15); background-color: $grey_1; -webkit-transition: left 1s ease-in 0.1s; left: 1%; top: r(7); /*margin-top: r(7);*/ .circle { display: block; position: absolute; width: r(10); height: r(10); background-color: $blue_3; border: r(8) solid $white; top: r(-6); left: r(-4); border-radius: 50%; box-shadow: 1px 1px 1px $grey_2; -webkit-box-shadow: 1px 1px 1px $grey_2; &.blue{ background-color:$blue_3; } &.green{ background-color:$green_1; } &.red{ background-color:$red_3; } &.yellow{ background-color:$yellow_3; } } }
4、jQuery代码如下：
$(function () { $("#data_list .progress").each(function () { var This = $(this), val = This.attr("data-val") ? parseFloat(This.attr("data-val")) : 0; if (val >= 0 && val < 25){ This.find(".progress_bar").addClass("blue"); This.find(".progress_bar_cover>.circle").addClass("blue"); } else if (val >= 25 && val < 50){ This.find(".progress_bar").addClass("green"); This.find(".progress_bar_cover>.circle").addClass("green"); } else if (val >= 50 && val < 75){ This.find(".progress_bar").addClass("yellow"); This.find(".progress_bar_cover>.circle").addClass("yellow"); } else if (val >= 75 && val <= 100){ This.find(".progress_bar").addClass("red"); This.find(".progress_bar_cover>.circle").addClass("red"); }else{ val = 0; } if (val <= 1) { val = 1; } else if (val >= 94.5) { val = 94.5; } else if (val > 5 && val < 95) { val -= 2; } setTimeout(function () { This.find(".progress_bar_cover").css("left", val + "%"); }, 100); }); });
后期由于需要变动：会出现三段的情况，并要求指定第一段的颜色
js代码变动如下：
$(function () { $("#data_list .progress").each(function () { var This = $(this), isType3 = This.parent().hasClass("type3"), isType3_1 = This.parent().hasClass("type3_1"), val = This.attr("data-val") ? parseFloat(This.attr("data-val")) : 0, color = "blue"; if (!isType3) { if (val >= 0 && val < 25) { color = "blue"; } else if (val >= 25 && val < 50) { color = "green"; } else if (val >= 50 && val < 75) { color = "yellow"; } else if (val >= 75 && val <= 100) { color = "red"; } else { val = 0; } } else { if (val >= 0 && val < 33.33) { color = !isType3_1 ? "blue" : "green"; } else if (val >= 33.33 && val < 66.66) { color = !isType3_1 ? "green" : "yellow"; } else if (val >= 66.66 && val <= 100) { color = !isType3_1 ? "yellow" : "red"; } else { val = 0; } } This.find(".progress_bar").addClass(color); This.find(".progress_bar_cover>.circle").addClass(color); if (val <= 1) { val = 1; } else if (val >= 94.5) { val = 94.5; } else if (val > 5 && val < 95) { val -= 2; } setTimeout(function () { This.find(".progress_bar_cover").css("left", val + "%"); }, 100); }); });
二、使用Mobiscroll用作选择
注意，这里有个缺点，由于Mobiscroll不支持关联选择，如果要实现要自己外挂编写级联。
1、效果如下：
2、引入相应依赖文件jquery,mobicroll.js,mobicroll.css文件后，添加js代码如下：
//选择器按周 var defaultWeekWeels = [[{ keys: ['2010年', '2011年', '2012年', '2013年', '2014年', '2015年', '2016年', '2017年', '2018年', '2019年', '2020年'], values: ['2010年', '2011年', '2012年', '2013年', '2014年', '2015年', '2016年', '2017年', '2018年', '2019年', '2020年'] }, { keys: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'], values: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'] }, { keys: ['第1周', '第2周', '第3周', '第4周', '第5周'], values: ['第1周', '第2周', '第3周', '第4周', '第5周'] } ]];
var weekScroller = $("#weekl").mobiscroll().scroller({ theme: 'mobiscroll', display: 'bottom', mode: 'scroller', wheels: defaultWeekWeels, lang: 'zh', showLabel: false, onClose: function (v, e) { //异步获取数据 } });
注意：
后面遇到一个问题，就是当用户点击确认时要绑定相应的事件，此插件没提供相应的API。
解决办法：是给input框额外绑定一个onchange事件
三、使用Highcharts展示线状图
1、图形如下：
2、引用依赖文件highcharts.js后，添加js代码如下：
var wOptions = { categories: ['一', '二', '三', '四', '五', '六', '日'], unit: '斤', weight_data: [7.0, 6.9, 9.5, 14.5, 18.3, 13.9, 9.6], fat_data: [4.2, 5.7, 8.5, 14.2, 10.3, 6.6, 4.8] }; $("#week_chart").highcharts({ chart: { type: 'spline', margin: [60, 60, 60, 60] }, title: { text: null }, xAxis: { categories: wOptions.categories, gridLineWidth:1 }, legend: { align: "center", verticalAlign: "top", x: 0, y: 20 }, yAxis: [{ title: { text: '体重', align: 'high', margin: 5 }, labels: { formatter: function () { return this.value + wOptions.unit; }, distance: 0, padding:0 }, gridLineWidth:0 }, { title: { text: '体脂率', align: 'high', margin: 5 }, labels: { formatter: function () { return this.value + '%'; } }, opposite: true, gridLineWidth:0 }], tooltip: { crosshairs: true, shared: true }, series: [{ name: '体重', yAxis: 0, data: wOptions.weight_data, lineColor: '#ef6865', color: '#ef6865', lineWidth:1.5 }, { name: '体脂率', yAxis: 1, data: wOptions.fat_data, lineColor: '#ffd55c', color: '#ffd55c', lineWidth: 1.5 }], credits: { enabled: false } });
使用过程中也遇到了一些问题，然后代码改成如下：
$("#week_chart").highcharts({
chart: {
type: 'spline',
margin: [60, 70, 60, 70]//重新设备好margin位，因为有些手机不兼容会出现边距文字隐藏
},
title: {
text: null
},
xAxis: {
categories: wOptions.categories,
gridLineWidth:1
},
legend: {
align: "center",
verticalAlign: "top",
x: 0,
y: 20
},
yAxis: [{
title: {
text: '体重',
align: 'high',
margin: 5
},
labels: {
formatter: function () {
return this.value + wOptions.unit;
},
distance: 0,
padding:0
},
gridLineWidth: 0,//隐藏横线
minRange: 1,//防止出现点位贴到x轴上
allowDecimals: false
},
{
title: {
text: '体脂率',
align: 'high',
margin: 5
},
labels: {
formatter: function () {
return this.value + '%';//自定义文字显示
}
},
opposite: true,
gridLineWidth: 0,
minRange: 1,
allowDecimals: false
}],
tooltip: {
crosshairs: true,
shared: true
},
series: [{//定义样式
name: '体重',
yAxis: 0,
data: wOptions.weight_data,
lineColor: '#ef6865',
color: '#ef6865',
lineWidth:1.5
}, {
name: '体脂率',
yAxis: 1,
data: wOptions.fat_data,
lineColor: '#ffd55c',
color: '#ffd55c',
lineWidth: 1.5
}],
credits: {
enabled: false
},
plotOptions: {
spline: {
marker: {
enabled: true,
radius: 3//定义好点的大小，防止会出现不显示问题
}
}
}
});
四、使用bootstrap-datepicker用作日期选择
1、图形如下：
2、引用依赖文件bootstrap-datepicker3.standalone.min.css、bootstrap-datepicker.min.js和bootstrap-datepicker.zh-CN.min.js后，添加js代码如下：
Date.prototype.format = function (fmt) { var o = { "M+": this.getMonth() + 1, "d+": this.getDate(), "h+": this.getHours(), "m+": this.getMinutes(), "s+": this.getSeconds(), "q+": Math.floor((this.getMonth() + 3) / 3), "S": this.getMilliseconds() }; if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length)); for (var k in o) if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length))); return fmt; } $(function () { var myDp = $('#date_val').datepicker({ autoclose: true, clearBtn: true, language: "zh-CN", beforeShowDay: function (date) { //有数据的日期定义成一个数组先传进来，如果日期在数组里就标成marked if (date.format('yyyy-MM-dd') == '2016-04-28') { return "marked"; } }, beforeShowMonth: function (date) { //有数据的月份定义成一个数组先传进来，如果日期在数据就标成marked if (date.format('yyyy-MM') == '2016-04') { return "marked"; } }, beforeShowYear: function (date) { //有数据的年份定义成一个数组先传进来，如果日期在数据就标成marked if (date.getFullYear() == 2016) { return "marked"; } } }); myDp.on('changeDate', function (e) { console.log(e.date.format('yyyy-MM-dd')); //改变日就触发异步获取特定日的数据 }).on('changeMonth', function (e) { console.log(e.date.format('yyyy-MM')); //改变月份就触发异步获取特定月份的数据 }).on('changeYear', function (e) { console.log(e.date.getFullYear()); //改变年份就触发异步获取特定年份的数据 }); });
3、扩展
把下拉框宽度调成100%；把“清除”改为关闭；底层增加遮罩
.datepicker table { width: 100%; }
//额外绑定dp点击事件 $('#date_val').click(function () { setTimeout(function () { if ($(".datepicker")) { $("#dp_mask").show(); } else { $("#dp_mask").hide(); } }, 50); }); $(".r_arrow").click(function () { $("#dp_mask").hide(); }); $("#dp_mask").on("touchstart", function (e) { e.preventDefault(); }); $(document).on("touchstart", ".clear", function (e) { var temp = $("#date_val").val(); setTimeout(function () { $("#date_val").val(temp); $("#dp_mask").hide(); }, 200); });
