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

一、进度条的实现

前期制作代码如下:

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>
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、效果如下:

image

 

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、图形如下:

image

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

 

posted @ 2016-05-10 11:01  Fast Mover  阅读(...)  评论(...编辑  收藏
友情链接: 泡妞秘籍 | A4纸尺寸 | 卡通头像 | +申请友情链接