实例代码 - 手册网

实例代码“Ctrl+/”提示“F11/ESC”全屏返回格式化恢复运行

<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>NumberProgressBar</title>
  <style>
  body {
  	font-family: Verdana,Arial,Helvetica,sans-serif;
  }
  .top-banner a {
  	color: #FF534E;
  }
  </style>
</head>
<body>

<div class="container">
  <h1 style="margin-top:100px">Number Progress Bar</h1>

<section id="random">
    <article>
      <h4 class="title">Random</h4>
      <div class="number-pb">
        <div class="number-pb-shown"></div>
        <div class="number-pb-num">0</div>
      </div>
    </article>
  </section>

<div class="footer-banner" style="width:728px; margin:60px auto"></div>
</div>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="/api/jq/5733e376c02a5/assets/jquery.velocity.min.js"></script>
<script src="/api/jq/5733e376c02a5/assets/number-pb.js"></script>
<script>
  $(function() {
    function randomPercentage() {
      return Math.floor(Math.random() * 100);
    }

function randomInterval() {
      var min = Math.floor(Math.random() * 100);
      var max = min + (Math.floor(Math.random() * 40) + 20);
      return [min, max];
    }

function randomStyle() {
      return ['', 'dream', 'sun'][Math.floor(Math.random() * 3)];
    }

var interval = randomInterval();
    var randomTitle = $('#random .title');
    var randomBar = $('#random .number-pb').NumberProgressBar({
        min: interval[0],
        max: interval[1]
      })
    randomBar.find('.number-pb-shown').toggleClass(randomStyle());
    randomTitle.text('Random [Min: ' + interval[0] + ', Max: ' + interval[1] + ']');

var reachLoop = function() {
      window.setTimeout(function() {
        randomBar.reach(undefined, {
          complete: reachLoop
        }).find('.number-pb-shown').toggleClass(randomStyle());
      }, 2000);
    }

reachLoop();

var num = randomPercentage();
    var controlTitle = $('#sample-pb .title').text('@' + num);
    var controlBar = $('#sample-pb .number-pb').NumberProgressBar({
      duration: 12000,
      current: num
    });

​x
 
•<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>NumberProgressBar</title>
  <style>
  body {
    font-family: Verdana,Arial,Helvetica,sans-serif;
  }
  .top-banner a {
    color: #FF534E;
  }
  </style>
</head>
<body>
​
<div class="container">
  <h1 style="margin-top:100px">Number Progress Bar</h1>
​
  <section id="random">
    <article>