Tạo mức tăng/đo mức năng động bằng cách sử dụng html và css

Question

Tôi hiện đang gặp sự cố khi tạo 'hệ thống đo bể chứa' trong dự án của mình. Tôi đang sử dụng MVC và bằng cách sử dụng đánh dấu sau, tôi đã đạt được điều này:

bằng cách sử dụng:

#container { 
    position:absolute; 
    margin:0; 
    margin-top:-50px;  
    width:100%; 
    padding:0;  
    -moz-perspective: 1000px; /*required to make cylinder shape*/ 
    -webkit-perspective: 1000px; 
} 
#frame { 
    -moz-transform-style: preserve-3d; 
    -webkit-transform-style: preserve-3d; 
    margin-left:5%; 
    -moz-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate3d(40%, 60px, 175px); 
    -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate3d(40%, 60px, 175px); 

} 
.strip { 
    -moz-transform-style: preserve-3d; 
    -webkit-transform-style: preserve-3d 
} 
.strip div { 
    position: fixed; 
    background-repeat:repeat; 
    border-width: thin 10px; 
    color:#ececec; 
    vertical-align:central; 
    height:130px; /*height and width of tank display*/ 
    width:12%; 
    background-color:rgba(128,128,128,0.99); 
    -webkit-border-bottom-right-radius: 2px; 
-webkit-border-bottom-left-radius: 2px; 
-moz-border-radius-bottomright: 2px; 
-moz-border-radius-bottomleft: 2px; 
border-bottom-right-radius: 2px; 
border-bottom-left-radius: 2px; 

-webkit-box-shadow: inset 0px -35px 20px -37px rgba(0,0,0,0.96); 
-moz-box-shadow: inset 0px -35px 20px -37px rgba(0,0,0,0.96); 
box-shadow: inset 0px -35px 20px -37px rgba(0,0,0,0.96); 
} 
.strip div:before { 
    content:""; 
    position: absolute; 
    z-index: -1; 
    /*Make this lower so any text appears in front*/ 

    top: 0; 
    right: 0; 
    bottom: 50%; /*used for tank level setting*/ 
    left: 0; 
    background: rgba(56,56,56,0.8); 



} 
.strip .a { 


    border-top:1px solid black; 
    -moz-transform: rotateY(0deg) translateZ(124px); 
    -webkit-transform: rotateY(0deg) translateZ(124px) 
} 
.strip .b { 
    border-top:1px solid black; 
    -moz-transform: rotateY(15deg) translateZ(124px); 
    -webkit-transform: rotateY(15deg) translateZ(124px) 
} 
.strip .c { 
    border-top:1px solid black; 
    -moz-transform: rotateY(30deg) translateZ(124px); 
    -webkit-transform: rotateY(30deg) translateZ(124px); 
} 

.strip .c { 
    background: rgb(0,0,0) !important; /* Old browsers */ 
background: -moz-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(128,128,128,1) 1%, rgba(128,128,128,1) 9%, rgba(0,0,0,1) 10%, rgba(128,128,128,1) 11%, rgba(128,128,128,1) 19%, rgba(0,0,0,1) 20%, rgba(128,128,128,1) 21%, rgba(128,128,128,1) 29%, rgba(0,0,0,1) 30%, rgba(128,128,128,1) 31%, rgba(128,128,128,1) 39%, rgba(0,0,0,1) 40%, rgba(128,128,128,1) 41%, rgba(128,128,128,1) 49%, rgba(0,0,0,1) 50%, rgba(128,128,128,1) 51%, rgba(128,128,128,1) 59%, rgba(0,0,0,1) 60%, rgba(0,0,0,1) 60%, rgba(128,128,128,1) 61%, rgba(128,128,128,1) 69%, rgba(0,0,0,1) 70%, rgba(128,128,128,1) 71%, rgba(128,128,128,1) 79%, rgba(0,0,0,1) 80%, rgba(128,128,128,1) 81%, rgba(128,128,128,1) 89%, rgba(0,0,0,1) 90%, rgba(128,128,128,1) 91%, rgba(128,128,128,1) 99%, rgba(0,0,0,1) 100%)!important; /* FF3.6+ */ 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,1)), color-stop(1%,rgba(128,128,128,1)), color-stop(9%,rgba(128,128,128,1)), color-stop(10%,rgba(0,0,0,1)), color-stop(11%,rgba(128,128,128,1)), color-stop(19%,rgba(128,128,128,1)), color-stop(20%,rgba(0,0,0,1)), color-stop(21%,rgba(128,128,128,1)), color-stop(29%,rgba(128,128,128,1)), color-stop(30%,rgba(0,0,0,1)), color-stop(31%,rgba(128,128,128,1)), color-stop(39%,rgba(128,128,128,1)), color-stop(40%,rgba(0,0,0,1)), color-stop(41%,rgba(128,128,128,1)), color-stop(49%,rgba(128,128,128,1)), color-stop(50%,rgba(0,0,0,1)), color-stop(51%,rgba(128,128,128,1)), color-stop(59%,rgba(128,128,128,1)), color-stop(60%,rgba(0,0,0,1)), color-stop(60%,rgba(0,0,0,1)), color-stop(61%,rgba(128,128,128,1)), color-stop(69%,rgba(128,128,128,1)), color-stop(70%,rgba(0,0,0,1)), color-stop(71%,rgba(128,128,128,1)), color-stop(79%,rgba(128,128,128,1)), color-stop(80%,rgba(0,0,0,1)), color-stop(81%,rgba(128,128,128,1)), color-stop(89%,rgba(128,128,128,1)), color-stop(90%,rgba(0,0,0,1)), color-stop(91%,rgba(128,128,128,1)), color-stop(99%,rgba(128,128,128,1)), color-stop(100%,rgba(0,0,0,1)))!important; /* Chrome,Safari4+ */ 
background: -webkit-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(128,128,128,1) 1%,rgba(128,128,128,1) 9%,rgba(0,0,0,1) 10%,rgba(128,128,128,1) 11%,rgba(128,128,128,1) 19%,rgba(0,0,0,1) 20%,rgba(128,128,128,1) 21%,rgba(128,128,128,1) 29%,rgba(0,0,0,1) 30%,rgba(128,128,128,1) 31%,rgba(128,128,128,1) 39%,rgba(0,0,0,1) 40%,rgba(128,128,128,1) 41%,rgba(128,128,128,1) 49%,rgba(0,0,0,1) 50%,rgba(128,128,128,1) 51%,rgba(128,128,128,1) 59%,rgba(0,0,0,1) 60%,rgba(0,0,0,1) 60%,rgba(128,128,128,1) 61%,rgba(128,128,128,1) 69%,rgba(0,0,0,1) 70%,rgba(128,128,128,1) 71%,rgba(128,128,128,1) 79%,rgba(0,0,0,1) 80%,rgba(128,128,128,1) 81%,rgba(128,128,128,1) 89%,rgba(0,0,0,1) 90%,rgba(128,128,128,1) 91%,rgba(128,128,128,1) 99%,rgba(0,0,0,1) 100%)!important; /* Chrome10+,Safari5.1+ */ 
background: -o-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(128,128,128,1) 1%,rgba(128,128,128,1) 9%,rgba(0,0,0,1) 10%,rgba(128,128,128,1) 11%,rgba(128,128,128,1) 19%,rgba(0,0,0,1) 20%,rgba(128,128,128,1) 21%,rgba(128,128,128,1) 29%,rgba(0,0,0,1) 30%,rgba(128,128,128,1) 31%,rgba(128,128,128,1) 39%,rgba(0,0,0,1) 40%,rgba(128,128,128,1) 41%,rgba(128,128,128,1) 49%,rgba(0,0,0,1) 50%,rgba(128,128,128,1) 51%,rgba(128,128,128,1) 59%,rgba(0,0,0,1) 60%,rgba(0,0,0,1) 60%,rgba(128,128,128,1) 61%,rgba(128,128,128,1) 69%,rgba(0,0,0,1) 70%,rgba(128,128,128,1) 71%,rgba(128,128,128,1) 79%,rgba(0,0,0,1) 80%,rgba(128,128,128,1) 81%,rgba(128,128,128,1) 89%,rgba(0,0,0,1) 90%,rgba(128,128,128,1) 91%,rgba(128,128,128,1) 99%,rgba(0,0,0,1) 100%)!important; /* Opera 11.10+ */ 
background: -ms-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(128,128,128,1) 1%,rgba(128,128,128,1) 9%,rgba(0,0,0,1) 10%,rgba(128,128,128,1) 11%,rgba(128,128,128,1) 19%,rgba(0,0,0,1) 20%,rgba(128,128,128,1) 21%,rgba(128,128,128,1) 29%,rgba(0,0,0,1) 30%,rgba(128,128,128,1) 31%,rgba(128,128,128,1) 39%,rgba(0,0,0,1) 40%,rgba(128,128,128,1) 41%,rgba(128,128,128,1) 49%,rgba(0,0,0,1) 50%,rgba(128,128,128,1) 51%,rgba(128,128,128,1) 59%,rgba(0,0,0,1) 60%,rgba(0,0,0,1) 60%,rgba(128,128,128,1) 61%,rgba(128,128,128,1) 69%,rgba(0,0,0,1) 70%,rgba(128,128,128,1) 71%,rgba(128,128,128,1) 79%,rgba(0,0,0,1) 80%,rgba(128,128,128,1) 81%,rgba(128,128,128,1) 89%,rgba(0,0,0,1) 90%,rgba(128,128,128,1) 91%,rgba(128,128,128,1) 99%,rgba(0,0,0,1) 100%)!important; /* IE10+ */ 
background: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(128,128,128,1) 1%,rgba(128,128,128,1) 9%,rgba(0,0,0,1) 10%,rgba(128,128,128,1) 11%,rgba(128,128,128,1) 19%,rgba(0,0,0,1) 20%,rgba(128,128,128,1) 21%,rgba(128,128,128,1) 29%,rgba(0,0,0,1) 30%,rgba(128,128,128,1) 31%,rgba(128,128,128,1) 39%,rgba(0,0,0,1) 40%,rgba(128,128,128,1) 41%,rgba(128,128,128,1) 49%,rgba(0,0,0,1) 50%,rgba(128,128,128,1) 51%,rgba(128,128,128,1) 59%,rgba(0,0,0,1) 60%,rgba(0,0,0,1) 60%,rgba(128,128,128,1) 61%,rgba(128,128,128,1) 69%,rgba(0,0,0,1) 70%,rgba(128,128,128,1) 71%,rgba(128,128,128,1) 79%,rgba(0,0,0,1) 80%,rgba(128,128,128,1) 81%,rgba(128,128,128,1) 89%,rgba(0,0,0,1) 90%,rgba(128,128,128,1) 91%,rgba(128,128,128,1) 99%,rgba(0,0,0,1) 100%)!important; /* W3C */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#000000',GradientType=0); /* IE6-9 */ 

} 

.strip .d { 
    border-top:1px solid black; 
    -moz-transform: rotateY(45deg) translateZ(124px); 
    -webkit-transform: rotateY(45deg) translateZ(124px) 
} 
.strip .e { 
    border-top:1px solid black; 
    -moz-transform: rotateY(60deg) translateZ(124px); 
    -webkit-transform: rotateY(60deg) translateZ(124px) 
} 
.strip .f { 
    border-top:1px solid black; 

    -moz-transform: rotateY(75deg) translateZ(124px); 
    -webkit-transform: rotateY(75deg) translateZ(124px) 
} 
.strip .g { 
    border-top:1px solid black; 
    -moz-transform: rotateY(90deg) translateZ(124px); 
    -webkit-transform: rotateY(90deg) translateZ(124px) 
} 
.strip .h { 
    border-top:1px solid black; 
    -moz-transform: rotateY(105deg) translateZ(124px); 
    -webkit-transform: rotateY(105deg) translateZ(124px) 
} 
.strip .i { 
    border-top:1px solid black; 
    -moz-transform: rotateY(120deg) translateZ(124px); 
    -webkit-transform: rotateY(120deg) translateZ(124px) 
} 
.strip .j { 
    border-top:1px solid black; 
    -moz-transform: rotateY(135deg) translateZ(124px); 
    -webkit-transform: rotateY(135deg) translateZ(124px) 
} 
.strip .k { 
    border-top:1px solid black; 
    -moz-transform: rotateY(150deg) translateZ(124px); 
    -webkit-transform: rotateY(150deg) translateZ(124px) 
} 
.strip .l { 
    border-top:1px solid black; 
    -moz-transform: rotateY(165deg) translateZ(124px); 
    -webkit-transform: rotateY(165deg) translateZ(124px) 
} 
.strip .m { 
    border-top:1px solid black; 
    -moz-transform: rotateY(180deg) translateZ(124px); 
    -webkit-transform: rotateY(180deg) translateZ(124px) 
} 
.strip .n { 
    border-top:1px solid black; 
    -moz-transform: rotateY(195deg) translateZ(124px); 
    -webkit-transform: rotateY(195deg) translateZ(124px) 
} 
.strip .o { 
    border-top:1px solid black; 
    -moz-transform: rotateY(210deg) translateZ(124px); 
    -webkit-transform: rotateY(210deg) translateZ(124px) 
} 
.strip .p { 
    border-top:1px solid black; 
    -moz-transform: rotateY(225deg) translateZ(124px); 
    -webkit-transform: rotateY(225deg) translateZ(124px) 
} 
.strip .q { 
    border-top:1px solid black; 
    -moz-transform: rotateY(240deg) translateZ(124px); 
    -webkit-transform: rotateY(240deg) translateZ(124px) 
} 
.strip .r { 
    border-top:1px solid black; 
    -moz-transform: rotateY(255deg) translateZ(124px); 
    -webkit-transform: rotateY(255deg) translateZ(124px) 
} 
.strip .s { 
    border-top:1px solid black; 
    -moz-transform: rotateY(270deg) translateZ(124px); 
    -webkit-transform: rotateY(270deg) translateZ(124px) 
} 
.strip .t { 
    border-top:1px solid black; 
    -moz-transform: rotateY(285deg) translateZ(124px); 
    -webkit-transform: rotateY(285deg) translateZ(124px) 
} 
.strip .u { 
    border-top:1px solid black; 
    -moz-transform: rotateY(300deg) translateZ(124px); 
    -webkit-transform: rotateY(300deg) translateZ(124px) 
} 
.strip .v { 
    border-top:1px solid black; 
    -moz-transform: rotateY(315deg) translateZ(124px); 
    -webkit-transform: rotateY(315deg) translateZ(124px) 
} 
.strip .w { 
    border-top:1px solid black; 
    -moz-transform: rotateY(330deg) translateZ(124px); 
    -webkit-transform: rotateY(330deg) translateZ(124px) 
} 
.strip .x { 
    border-top:1px solid black; 
    -moz-transform: rotateY(345deg) translateZ(124px); 
    -webkit-transform: rotateY(345deg) translateZ(124px); 

} 

<div class="tankWidget"> 
     <div class="banner">Tank 1: Kero</div> 

     <div id="container"> 
      <div id="frame"> 
       <div class="strip"> 
        <div id="tank1FrameA"class="a">50%</div> 
        <div class="b"></div> 
        <div class="c"></div> 
        <div class="d"></div> 
        <div class="e"></div> 
        <div class="f"></div> 
        <div class="g"></div> 
        <div class="h"></div> 
        <div class="i"></div> 
        <div class="j"></div> 
        <div class="k"></div> 
        <div class="l"></div> 
        <div class="m"></div> 
        <div class="n"></div> 
        <div class="o"></div> 
        <div class="p"></div> 
        <div class="q"></div> 
        <div class="r"></div> 
        <div class="s"></div> 
        <div class="t"></div> 
        <div class="u"></div> 
        <div class="v"></div> 
        <div class="w"></div> 
        <div class="x"></div> 
       </div> 
      </div> 
     </div> 




     <div class="widget-footer"> 
      <table id="specTab1"> 
       <tr><th>Volume</th><th>Capacity</th><th>Ullage (AL)</th></tr> 
       <tr id="tank1"><td id="tank1Vol">50L</td><td>100L</td><td>1.24</td></tr> 
      </table> 
      <br /> 
      <div class="lowerWidget-footer"> 
       <br /> 
       Details 
      </div> 
     </div> 
    </div> 

Tuy nhiên, tôi đang tìm kiếm đến nay làm cho nó năng động. . (Tức là thay đổi mức xám nhạt tùy thuộc vào giá trị trong phạm vi dải các '.a' (trong trường hợp này 50%)

Tôi đã sử dụng:

 var test = $('#tank1FrameA').text(); //gets value of first tank 
     test = parseInt(test); 

để có được những 50 chiết xuất

.

Tuy nhiên, vì tôi không thể nhắm mục tiêu các yếu tố :before giả để chỉnh sửa 'chiều cao/cấp, làm thế nào khác có thể tôi đạt được san lấp mặt bằng/khả năng năng động này

Nói chung;?

+-------------+ 
| 50%  | <-- value to use 
|    | 
+-------------+ <-- this level should change 
|    | 
|    | 
+-------------+ 

25%:

+-------------+ 
| 25%  | <-- value to use 
|    | 
|    | 
+-------------+ <-- this level should change 
|    | 
+-------------+ 

vv vv

Bất kỳ lời đề nghị như thế nào thic có thể được thực hiện với hình dạng hình trụ này?

Here là một jsfiddle có thể chỉnh sửa/có thể chỉnh sửa.

---

Khi ban đầu tạo

Tank, tôi đã tìm cách để chỉnh sửa: attribute

.strip div:before { 

của đáy để đạt được điều này.

Tuy nhiên, gần đây tôi đã phát hiện ra rằng các phần tử giả không phải là một phần của DOM và do đó không thể truy cập được vào JQuery (mạnh mẽ như nó có thể).

Answer 1

Nếu bạn chỉ cần đổ đầy bình, bạn có thể sử dụng cấu trúc đơn giản hơn nhiều để xây dựng xe tăng với hai phần tử HTML, bán kính đường viền và phần tử giả.

Sau đó, bạn có thể sử dụng JS để thay đổi chiều cao của khu vực màu xanh lá cây theo giá trị nhập vào dữ liệu tùy chỉnh thuộc tính data-amount của .tk div:

DEMO (thay đổi giá trị của các tùy chỉnh thuộc tính dữ liệu data-amount trong số .tk div để thay đổi chiều cao của chất lỏng).

var amount = $('.tk').attr('data-amount'), 
 
    height = amount * 80/100 + 20; 
 

 
$('.lq').css({height : height + '%'});

.tk{ /*Liquid Section*/ 
 
    position:relative; 
 
    width:40%; 
 
    height:130px; 
 
    padding-top:50px; 
 
    margin: 0 auto; 
 
    background:rgba(56,56,56,0.8); 
 
    border-radius: 100%/40px; 
 
    border-bottom:3px solid #000; 
 
    text-align:center; 
 
    z-index:1; 
 
    overflow:hidden; 
 

 
} 
 
.tk:after, .lq{ 
 
    content:''; 
 
    position:absolute; 
 
    top:0; left:0; 
 
    width:100%; 
 
    height:20%; 
 
    z-index:-1; 
 
} 
 
.lq{ 
 
    background:rgba(128,128,128,0.99); 
 
    height:80%; 
 
    top:-2px; 
 
    border-radius:100%/40px; 
 
    border-bottom:3px solid #000; 
 
} 
 
.tk:after{ 
 
    height:20%; 
 
    border:1px solid #000; 
 
    border-radius:100%; /*makes circle at top*/ 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="tk" data-amount="40"> 
 
    40% 
 
    <div class="lq"></div> 
 
</div>