zoukankan      html  css  js  c++  java
  • 进度条的实现

    Js:

    $(function(){
    var goodNum="90%";//好评的百分比
    var mediumNum="10%"//中评的百分比
    var badNum="3%"//差评的百分比
    var num=goodNum.substring(0,2)
    // 进度条
    $(".bars").append("<div class='bars_left'><span class='good_number'>"+num+"</span><span>好评度</span> </div>");
    $(".bars").append("<div class='bars_middle'><ul><li>好评("+goodNum+")</li><li>中评("+mediumNum+")</li><li>差评("+badNum+")</li></ul></div>")
    $(".bars").append("<div class='bars_right'> </div>")
    $(".bars_right").append("<div class='progress'><span class='first' style='"+goodNum+"'><em></em><span></span></span> </div>")
    $(".bars_right").append("<div class='progress'><span class='two' style='"+mediumNum+"'><em></em><span></span></span> </div>")
    $(".bars_right").append("<div class='progress'><span class='three' style='"+badNum+"'><em></em><span></span></span> </div>")

    var temp=goodNum.tostring().split('(')[1].split(')')[0].split(',');
    })

    css样式:
    blockquote:before, blockquote:after,
    q:before, q:after {
    content: '';
    content: none;
    }


    .bars{
    overflow: hidden;
    border-bottom: 1px solid #E9E4E4;
    padding-bottom: 20px;
    margin:5px 20px;
    }
    .bars_left{
    float: left;
    margin: 25px 5% 0 0;
    font-size: 14px;
    overflow: hidden;
    }
    .bars_middle{
    float: left;
    margin: 23px 0 0 0;
    font-size: 14px;
    }
    .bars_middle ul li{
    line-height: 24px;
    }
    .bars_left span{
    display: block;
    text-align: center;
    }
    .good_number{
    font-size:32px;
    color: #f8711f;
    }
    .bars_right{
    overflow: hidden;
    110px;
    margin: 26px 0 0 3%;
    float: left;
    }
    .progress {
    height: 16px;
    margin-bottom: 8px;
    background: #ebebeb;
    }
    .progress > span {
    position: relative;
    float: left;
    margin: 0 -1px;
    height:16px;
    text-align: right;
    background: #cccccc;

    }
    .progress > span:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
    height: 18px;
    background: url("../images/progress.png") 0 0 repeat-x;
    border-radius: 10px;
    }
    .progress span{
    background: #39bcaf;
    overflow: hidden;

    }


    实现效果:
  • 相关阅读:
    mysql整理-常用sql语句
    WAMP中的mysql设置密码
    cmd中输入net start mysql 提示:服务名无效或者MySQL正在启动 MySQL无法启动
    “laravel.log” could not be opened: failed to open stream
    RESTful API 设计指南
    理解RESTful架构
    PHP:API 接口规范完整版本
    php的api接口
    laravel5.5部署
    《面向对象程序设计》课程作业二
  • 原文地址:https://www.cnblogs.com/seven077/p/4786888.html
Copyright © 2011-2022 走看看