zoukankan      html  css  js  c++  java
  • 如何用div绘制一个容器,例如圆形

    需求:一个圆形的容器,里面有两种颜色,随比率不同而变化。

    实现同一个容器中两种颜色变化的关键是css渐变

    //background:linear-gradient(#818181 30%,#06FF30 30%);   

    <td>
    <div class="process${st.count}" style=" margin:0 auto; width :80px;height: 60px;" >

    <script type="text/javascript">
    //根据进度改变颜色
    //参数 bilv 颜色比率 百分比
    function changeColor(bilv,min){
    var process = $(".process${st.count}");
    var oilhigh = ${oilLevel};

    var color = null;
    if(oilhigh<=min){
    color="FF2652";
    }else{
    color="06FF30";
    }
    bilv = (1-bilv)*100;
    //background:linear-gradient(#818181 30%,#06FF30 30%); css渐变
    var linear = "linear-gradient(#818181 "+bilv+"%,#"+color+" "+bilv+"%)";
    var br = "50px";

    //设置css样式

    process.css("background",linear);
    process.css("border-radius",br);//div变圆形

    }
    var t = document.getElementById("otable");
    var r1 = t.rows.length;
    //wv: 水体积 ov:油体积
    //var wv = t.rows[r1-1].cells[6].innerHTML;
    //var ov = t.rows[r1-1].cells[7].innerHTML;
    var wv = ${waterVolume};
    var ov = ${oilVolume};
    wv = parseFloat(wv);
    ov = parseFloat(ov);
    var bilv = ov/(wv+ov);
    //alert(${minOilHigh});
    var min = ${minOilHigh};
    //var max = ${maxOilHigh};

    changeColor(bilv,min);
    </script>
    </div>



    </td>

  • 相关阅读:
    FFmpeg入门,简单播放器
    Linux系统编译Win32版本adb
    检测目标程序ELF bit是32还是64
    Swift编程资料全集
    Swift编程资料总结
    cocos2d-html5学习之三-为sprite添加触摸事件
    Cocos2d-html5学习笔记二
    cocos2d-x学习笔记一
    NSViewAnimation进行视图和窗口动画
    Cocoa中NSAnimation动画简介
  • 原文地址:https://www.cnblogs.com/mlorct/p/6593023.html
Copyright © 2011-2022 走看看