近期一个称重设备微信端开发前端知识点，及使用插件遇到的常见问题

一、进度条的实现

前期制作代码如下：

1、总体效果如下图：

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

View Code

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