【CSS系列】获取实时数据做进度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>实时数据进度条</title>
  <style type="text/css">
    *{
      padding: 0;
      margin: 0;
    }
    .loading{
      width: 100%;
      height: 100%;
      position: fixed;
      top:0;
      left: 0;
      z-index: 100;
      background: #FFFFFF;
    }
    .loading .pic{
      width:100px;
      height: 100px;
      position: absolute;
      top:0;
      bottom: 0;
      left:0;
      right:0;
      margin: auto;
      border: 1px solid #FF3333;
      font-size: 30px;
      text-align: center;
      line-height: 100px;
    }

    .loading .pic span{
      display: block;
      width: 80px;
      height: 80px;
      position: absolute;
      top:10px;
      left: 10px;
      /*background: #00CC00;*/
      border-radius: 50%;
      box-shadow: 0 3px 0 #666;
      animation: rotate 1s infinite linear;
      -webkit-animation: rotate 1s infinite linear;
    }

    @keyframes rotate {
      0%{transform: rotate(0deg);}
     100%{transform: rotate(360deg);}
    }

    @-webkit-keyframes rotate {
      0%{-webkit-transform: rotate(0deg);}
      100%{-webkit-transform: rotate(360deg);}
    }

  </style>

  <script src="../js/jquery-3.2.1.js"></script>
  <script type="text/javascript">
    $(
        function () {
        var img = $("img");
        var num = 0;
        img.each(function (i) {
          var oImg = new Image();
          oImg.onload = function () {
              oImg.onload = null;
            num ++;
            $(".loading b") .html(parseInt(num/$("img").length*100)+"%");
            if(num >= i){
                $(".loading").fadeOut();
            }
          }
          oImg.src=img[i].src;

        })
        }
    )
  </script>
</head>
<body>
<div class="loading">
  <div class="pic">
    <span></span>
    <b>0%</b>
  </div>
</div>
<img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1203727489,1880869354&fm=26&gp=0.jpg">
<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2227804654,860253351&fm=26&gp=0.jpg">
<img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1203727489,1880869354&fm=26&gp=0.jpg">
<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2227804654,860253351&fm=26&gp=0.jpg">
<img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1203727489,1880869354&fm=26&gp=0.jpg">
<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2227804654,860253351&fm=26&gp=0.jpg">
<img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1203727489,1880869354&fm=26&gp=0.jpg">
<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2227804654,860253351&fm=26&gp=0.jpg">
<img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1203727489,1880869354&fm=26&gp=0.jpg">
<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2227804654,860253351&fm=26&gp=0.jpg">
<img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1203727489,1880869354&fm=26&gp=0.jpg">
<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2227804654,860253351&fm=26&gp=0.jpg">
<img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1203727489,1880869354&fm=26&gp=0.jpg">
<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2227804654,860253351&fm=26&gp=0.jpg">
<img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1203727489,1880869354&fm=26&gp=0.jpg">
<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2227804654,860253351&fm=26&gp=0.jpg">
<img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1203727489,1880869354&fm=26&gp=0.jpg">
<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2227804654,860253351&fm=26&gp=0.jpg">
<img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1203727489,1880869354&fm=26&gp=0.jpg">
<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2227804654,860253351&fm=26&gp=0.jpg">
<img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1203727489,1880869354&fm=26&gp=0.jpg">
<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2227804654,860253351&fm=26&gp=0.jpg">
<img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1203727489,1880869354&fm=26&gp=0.jpg">
<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2227804654,860253351&fm=26&gp=0.jpg">
<img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1203727489,1880869354&fm=26&gp=0.jpg">
<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2227804654,860253351&fm=26&gp=0.jpg">
<img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1203727489,1880869354&fm=26&gp=0.jpg">
<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2227804654,860253351&fm=26&gp=0.jpg">
<img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1203727489,1880869354&fm=26&gp=0.jpg">
<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2227804654,860253351&fm=26&gp=0.jpg"><img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1203727489,1880869354&fm=26&gp=0.jpg">
<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2227804654,860253351&fm=26&gp=0.jpg">
<img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1203727489,1880869354&fm=26&gp=0.jpg">
<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2227804654,860253351&fm=26&gp=0.jpg">
<img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1203727489,1880869354&fm=26&gp=0.jpg">
<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2227804654,860253351&fm=26&gp=0.jpg">
<img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1203727489,1880869354&fm=26&gp=0.jpg">
<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2227804654,860253351&fm=26&gp=0.jpg">
<img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1203727489,1880869354&fm=26&gp=0.jpg">
<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2227804654,860253351&fm=26&gp=0.jpg">
<img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1203727489,1880869354&fm=26&gp=0.jpg">
<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2227804654,860253351&fm=26&gp=0.jpg">
<img src="http://seopic.699pic.com/photo/50038/2365.jpg_wh1200.jpg">

</body>
</html>

时间： 2024-08-11 20:04:12

【CSS系列】获取实时数据做进度的相关文章

zabbix企业应用之定时获取监控数据做报表

最近某项目突然提出一个新需求,需要每周五14点,获取他们监控项目每天20-24点监控平均数据,以小时为单位的,输出文件是excel的,要求以每天为单位单独一个sheet,汇总邮件转给业务. 他们主要是做业务使用量报表,每周周报使用,虽然需求困难,但作为运维也得解决,下面是邮件的效果图. 可以看到邮件标题是带有项目名称与时间,收集人是业务与我. 下面是excel的格式每天一个sheet,获取这些项目自己每天20-24点的监控平均数据,以小时为单位. 主要是使用sql查看上面的监控数据,并通过py

ajax请求获取实时数据

<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title></title> <script src="WebUI/js/clienthint.js"></script> &l

通过Jquery异步获取股票实时数据

最近朋友让我帮他做个异步获取数据的程序,暂时服务器什么都没有,所以我就想先拿股票数据打个框架,方便后续开发和移植等事情代码如下: <!-- 说明:股票看盘作者:黑桃A 时间:2014-04-14 参考: http://www.lxway.com/240649562.htm http://www.lxway.com/946486042.htm http://www.365mini.com/page/jquery_getscript.htm http://blog.csdn.net/xxjoy_

solr与.net系列课程(四)solr查询参数的讲解与.net如何获取solr数据

solr与.net系列课程(四)solr查询参数的讲解与.net如何获取solr数据上一节我们完成了solr连接数据库,细心的朋友会发现一个问题,就是solr其实和语言没有任何关系,配置完成后任何语言都可以直接调用,本章我们主要对solr的查询做出讲解,然后就是新接触的人最关心的.net如何获取solr中的数据. 本节我准备了一个300万左右的数据表,为大家做演示然后我们开始配置schema.xml 文件: <field name="id" type="string

ajax从新浪获取实时股票数据

最近在给公司做一个报表展示,然后领导要求上面加上一些股票的实时数据展示. 一开始同事给我一个聚合数据的网址,说从这上面可以获取到.我一看,哟呵,API接口什么的都提供好了,确实方便.然后想用的时候才发现,首先要注册,然后根据使用量还要开会员什么的,还有一些审核的过程,一下子就感觉好麻烦了! 后来有别的同事说新浪上也有实时的股票数据,也有接口.我查了下,正好合适. 上代码之前首先感谢下博客园一位前辈提供的经验,他的博客里对新浪股票数据接口做了个比较详细的说明. http://www.cnblogs

python分别使用多线程和多进程获取所有股票实时数据

python分别使用多线程和多进程获取所有股票实时数据前一天简单介绍了python怎样获取历史数据和实时分笔数据,那么如果要获取所有上市公司的实时分笔数据,应该怎么做呢? 肯定有人想的是,用一个列表存储所有上市公司的股票代号,然后无限循环获取不就得了吗? 现在深市和沪市的股票一共有3400多只,如果你真这样做的话,获取一次所有股票的实时数据需要十几二十秒的时间,甚至更多,而且非常容易因为等待超时而使程序挂掉,如果你的模型对实时数据的质量要求非常高,这肯定是不行的,即使不考虑数据质量,获取数据的

一个实时获取股票数据的安卓应用程序

关键字:Stock,股票,安卓,Android Studio. OS:Windows 10. 最近学习Android应用开发,不知道写一个什么样的程序来练练手,正好最近股票很火,就一个App来实时获取股票数据,取名为Mystock.使用开发工具Android Studio,需要从Android官网下载,下载地址:http://developer.android.com/sdk/index.html.不幸的是Android是Google公司的,任何和Google公司相关的在国内都无法直接访问,只能

使用Socket通信实现Silverlight客户端实时数据的获取(模拟GPS数据，地图实时位置)

原文:使用Socket通信实现Silverlight客户端实时数据的获取(模拟GPS数据,地图实时位置) 在上一篇中说到了Silverlight下的Socket通信,在最后的时候说到本篇将会结合地图.下面就来看看本文实现的功能: Silverlight 与服务器利用Socket通讯,实时从服务器获取数据(本文中的数据是地理坐标),由于没有GPS,所以本文在服务器写了一个构造新坐标的函数(本文是一个三角函数),然后利用Timer组件,实时调用,得到新的坐标,并将新的坐标发送给客户端,客户端接收到发

C#开发BIMFACE系列24 服务端API之获取模型数据9：获取单个房间信息

系列目录 [已更新最新开发文章,点击查看详细] 大厦建筑模型中,基本上包含多个楼层,每个楼层包含多个房间等信息.在<C#开发BIMFACE系列21 服务端API之获取模型数据6:获取单模型的楼层信息>中介绍了如何获取一个模型中包含的楼层信息.面积分区.房间等信息.本篇主要介绍如何获取单个模型中单个房间信息. 请求地址:GET https://api.bimface.com/data/v2/files/{fileId}/rooms/{roomId} 说明:获取单个模型种单个房间信息参数