近期一個稱重設備微信端開發前端知識點，及使用插件遇到的常見問題

時間 2019-12-04

標籤近期一個稱重設備微信開發前端知識使用插件遇到常見問題简体版

原文原文鏈接

1、進度條的實現

前期製做代碼以下：css

一、整體效果以下圖：

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

三、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;
                            }
                        }
                    }

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

後期因爲須要變更：會出現三段的狀況，並要求指定第一段的顏色html

js代碼變更以下：jquery

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

2、使用Mobiscroll用做選擇

注意，這裏有個缺點，因爲Mobiscroll不支持關聯選擇，若是要實現要本身外掛編寫級聯。web

一、效果以下：

二、引入相應依賴文件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) {
                    //異步獲取數據
           
                }
            });

注意：bootstrap

後面遇到一個問題，就是當用戶點擊確認時要綁定相應的事件，此插件沒提供相應的API。數組

解決辦法：是給input框額外綁定一個onchange事件ssh

3、使用Highcharts展現線狀圖

一、圖形以下：

二、引用依賴文件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//定義好點的大小，防止會出現不顯示問題
                        }
                    }
                }
            });

4、使用bootstrap-datepicker用做日期選擇

一、圖形以下：

二、引用依賴文件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());
                //改變年份就觸發異步獲取特定年份的數據
            });
        });

三、擴展

把下拉框寬度調成100%；把「清除」改成關閉；底層增長遮罩ide

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。