背景分段式样式效果

<html lang="zh-cn">
<head>
    <title>背景分段式效果</title>
    <style type="text/css">
        .img-box {
            width: 100%;
            border-bottom: 1px solid gray;
            margin-bottom: 10px;
        }

        .img-val {
            display: flex;
            line-height: 24px;
            justify-content: space-between;
        }

        .img-val-item {
            width: 100%;
            text-align: center;
            justify-content: center;
            /*border:1px solid #000000;*/
        }

        .img-photo {
            display: flex;
            line-height: 24px;
            color: #1a1a1a;
            /*padding-left: 30px;
            padding-right: 30px;*/
        }

        .img-photo-item {
            width: 100%;
            text-align: center;
            justify-content: center;
        }

        .img-photo-item-line {
            margin-left: 5px;
            margin-right: 5px;
            height: 10px;
            border-radius: 10px;
        }

        .img-text {
            display: flex;
            line-height: 24px;
            color: #1a1a1a;
        }

        .img-text-item {
            width: 100%;
            text-align: center;
            justify-content: center;
        }

        .backgroundcolor_gray {
            background-color:gray;
        }
        .backgroundcolor_green {
            background-color: #00cc66;
        }
        .backgroundcolor_red {
            background-color: #ff0000;
        }
        .color_green {
            color: #00cc66;
        }
        .color_red {
            color: #ff0000;
        }
    </style>
</head>
<body>
    <div class="img-box">
        <div class="img-val" id="img-val">
            <!--<div class="img-val-item">18.5</div>
            <div class="img-val-item">23.9</div>
            <div class="img-val-item">27.9</div>-->
        </div>
        <div class="img-photo" id="img-photo">
            <!--<div class="img-photo-item"><div class="img-photo-item-line" style="background-color:gray;"></div></div>
            <div class="img-photo-item"><div class="img-photo-item-line" style="background-color:#00cc66;"></div></div>
            <div class="img-photo-item"><div class="img-photo-item-line" style="background-color:gray;"></div></div>
            <div class="img-photo-item"><div class="img-photo-item-line" style="background-color:gray;"></div></div>-->
        </div>
        <view class="img-text" id="img-text">
            <!--<view class="img-text-item">偏瘦</view>
            <view class="img-text-item">正常</view>
            <view class="img-text-item">偏胖</view>
            <view class="img-text-item">肥胖</view>-->
        </view>
    </div>
    <script type="text/javascript">

        var dataItem = {
            label: "BMI", labelValue: 20.8, labelLevelName: "理想",
            levelIntervalList: [
                { levelIntervalName: "偏瘦", endValue: 18.5 },
                { levelIntervalName: "理想", startValue: 18.5, endValue: 24 },
                { levelIntervalName: "偏胖", startValue: 24, endValue: 28 },
                { levelIntervalName: "肥胖", startValue: 28 }
            ]
        }
        let el_val = document.getElementById("img-val");
        let el_img = document.getElementById("img-photo");
        let el_text = document.getElementById("img-text");

        let valueHtml = "";
        let imageHtml = "";
        let textHtml = "";
        var num = dataItem.levelIntervalList.length;
        var paddingWidth = 100 / num / 2;
        el_val.style.paddingLeft = paddingWidth + '%';
        el_val.style.paddingRight = paddingWidth + '%';

        var isDaBiao = false;
        if (dataItem.labelLevelName == "理想")
        {
            isDaBiao = true;
        }

        dataItem.levelIntervalList.forEach(function myFunction(item, index) {

            if (item.endValue) {
                valueHtml += "<div class=\"img-val-item\">" + item.endValue + "</div>";
            }
            imageHtml += "<div class=\"img-photo-item\"><div class=\"img-photo-item-line";
            textHtml += "<view class=\"img-text-item";
            if (item.levelIntervalName == dataItem.labelLevelName) {
                if (isDaBiao) {
                    imageHtml += " backgroundcolor_green";
                    textHtml += " color_green";
                }
                else {
                    imageHtml += " backgroundcolor_red";
                    textHtml += " color_red";
                }
            }
            else
            {
                imageHtml += " backgroundcolor_gray";
            }
            imageHtml += "\"></div></div>";
            textHtml += "\">" + item.levelIntervalName + "</view>";
        });

        el_val.innerHTML = valueHtml;
        el_img.innerHTML = imageHtml;
        el_text.innerHTML = textHtml;
    </script>
</body>
</html>
posted on 2023-08-03 16:41 ￡冷☆月№ 阅读(20) 评论(0) 收藏举报