zoukankan      html  css  js  c++  java
  • JQuery实现圆圈百分比

    详细步骤:

    1,建立一个空的解决方案

    2,在空的解决方案中建立一个 Web 应用程序(网站)

    3,在Web 应用程序中 建立一个 Html页面

    4,把JQuery脚本和插件脚本 复制到 Web 应用程序里

    5,引用JQuery 脚本 <script src="jquery-1.9.1.js"></script>

    6,引用插件脚本 <script src="jquery.circliful.min.js"></script>

    7,添加CSS样式:

    <style>
    .circliful {
    position: relative;
    }
    .circle-text, .circle-info, .circle-text-half, .circle-info-half {
    100%;
    position: absolute;
    text-align: center;
    display: inline-block;
    }
    .circle-info, .circle-info-half {
    color: #999;
    }
    .circliful .fa {
    margin: -10px 3px 0 3px;
    position: relative;
    bottom: 4px;
    }
    </style>

    8,在需要展现统计图的位置加入以下html代码:
    <div id="myStat" data-dimension="250" data-text="35%" data-info="New Clients"
    data-width="30" data-fontsize="38" data-percent="35" data-fgcolor="#61a9dc"
    data-bgcolor="#eee" data-fill="#ddd"></div>

    9,然后在页面中加入调用的代码:
    </style>
    <script>
    $(document).ready(function () {
    $('#myStat').circliful();
    });
    </script>

    人的本事不是与生俱来的,不是你掌握了多少,而是当你面对一个未知问题的时候,你能用多少时间来掌握!
  • 相关阅读:
    jsp常用指令
    jsp中的内置对象(9个)、作用
    collection的框架结构
    java——异常
    Spring的依赖注入(DI)三种方式
    mybatis——动态sql
    spring 中事务的PROPAGATION_REQUIRED,Readonly的解释
    Jquery ajax提交表单几种方法详解
    springmvc注解和参数传递
    springmvc和struts2的区别
  • 原文地址:https://www.cnblogs.com/dianshen520/p/4364580.html
Copyright © 2011-2022 走看看