给H5页面添加百分比的进度条,精确度高
进度条样式地址:http://sandbox.runjs.cn/show/6vxbxjrf
SVG圆环样式地址:http://sandbox.runjs.cn/show/3ho1qpe9
原理:由于H5页面中大多都是图片占空间,所以可以给img加一个onload事件,让每一张图片去处理的时候就触发一个函数去处理。
js代码:
$(function () {
var img = $('img');
var lenght = img.length;
var cur = 0;
var vader = $('.vader');
var progbar = $('.wrap');
var prog,progPrecent;
img.each(function (i) {
img[i].onload = function () {
cur++;
prog = cur / lenght * 100;
progPrecent = prog.toFixed(1) + '%';
vader.width(progPrecent);
vader.text(progPrecent);
if (prog >= 100) {
progbar.hide();
}
};
});
});
注意点:这段js代码要放在head中,不然导致有的小图片执行到底下的js时之前已经加载完了。
给H5页面添加百分比的进度条,精确度高的更多相关文章
- 简单实用的纯CSS百分比圆形进度条插件
percircle是一款简单实用的纯CSS百分比圆形进度条插件.你不需要做任何设置,只需要按该圆形进度条插件提供的标准HTML结构来编写代码,就可以生成一个漂亮的百分比圆形进度条. 首先要做的就是引入 ...
- 【原生JS插件】LoadingBar页面顶部加载进度条
先展示一下已经实现的效果: 预览地址:http://dtdxrk.github.io/js-plug/LoadingBar/index.html 看到手机上的浏览器内置了页面的加载进度条,想用在pc上 ...
- canvas绘制百分比圆环进度条
开发项目,PM会跟踪项目进度:完成某个事情,也可以设置一个完成的进度. 这里用canvas绘制一个简单百分比圆环进度条. 看下效果: 1. 动画方式 2. 静默方式 // 贴上代码,仅供参考 ...
- 【jQuery】页面顶部显示的进度条效果
<!Doctype html> <html> <head> <title>页面顶部显示的进度条效果</title> <meta htt ...
- h5页面添加背景音乐
[需求]h5页面添加背景音乐,支持微信.QQ.各种APP. [实现思路]1.通过audio标签,设置自动播放,是一种方法,但是此方法只适合微信.QQ,并不兼容我司的APP,需要主动触发下播放事件. 2 ...
- h5实现手机端等级进度条
h5实现等级进度条 需求如下: 实现一个动画进度条,页面一打开实现一个进度条动画,因为App这个页面会经常改,所以没有使用原审Android或者IOS来实现,希望通过H5来做: 服务器端返回如下数据: ...
- Android 自定义view --圆形百分比(进度条)
转载请注明出处:http://blog.csdn.net/wingichoy/article/details/50334595 注:本文由于是在学习过程中写的,存在大量问题(overdraw onDr ...
- H5 可堆叠的圆环进度条,支持任意数量子进度条
by Conmajia SN: S22-W1M 由来 看到一篇帖子<vue实用组件--圆环百分比进度条>,让我想起了很多年前我在WinForm下仿制过的Chrome进度条. ▲ 原版进度条 ...
- C#带百分比的进度条
功能需求: 如果程序中会执行一个耗时的计算过程,我想在用户点击按钮后,弹出一个进度条窗口,显示正在执行的进度(最好能带有百分比),执行完成后,进度条窗口关闭,回到主程序窗口. 在关闭子窗口之前父窗体不 ...
随机推荐
- CRM 2013 Reporting Extensions for SSRS 安装及问题解决
说明一下 Reporting Extensions for SSRS 安装过程. 安装目录在安装目录下 SrsDataConnector 下.如果是CRM 2013安装中运行,可以跳过此步. 此外在说 ...
- IOS常用的系统文件目录介绍
iOS常用目录整理说明是本文要介绍的内容,虽然不同API全面,也算是在编程中常用到的存放目录,所以是必备文档,不多说,来看详细内容讲解. 1.[/Applications] 常用软件的安装目录 内建软 ...
- .NET下的并行开发(案例代码)
以下主要是通过一个报表处理程序来说明并行开发的方式.对于数据冲突和共享,可以通过对象数组解决.设计到并行的核心代码已用红色标出.在并行程序的处理上,需要把原来串行的子公司变成一个一个类的对象,让所有的 ...
- Pinyin Comparison 拼音辨别 V1.1.2
App Store: Pinyin Comparison 拼音辨别 做了一新个图标,至少比上一个好多了.拼音应用的图标大多千篇一律,这回尝试做个不一样的. 简化了首页颜色,首页的黑色换成了金色,看着更 ...
- java 的方法注释写在哪里?
如果有接口,写在接口方法上即可.鼠标滑过方法名时时会显示 如果没有接口,写在每个方法上方. eclipse 分三步 ① 找到方法,并将光标移动至方法名的上方 ②/** ③回车 那,效果是酱紫
- android textview 设置text 字体
1.使用不同的字库 mLocalClock.setTypeface(Typeface.SANS_SERIF); Typeface face = Typeface.createFromAsset(get ...
- rabbitmq-server启动不了,安装erlang,安装rabbitmq-server
sudo rabbitmq-server start,虽然现实success,但是查看状态,sudo rabbitmq-server status发现居然没有启动,报错是不是端口占用(查看日志/var ...
- (ios7) 解决Ios7中,Navigatebar 显示在主View中,和ios6 不一致问题
在ios 7 系统中 NavigateBar 显示在主View中 ,Ios6 不在主View中,导致后台代码的方式编写View不一致 解决方法: 在ViewControl的viewDidLoad 方法 ...
- Windows Server 2012之搭建域控制器DC
安装域控制器,域(Domain) 1,本地管理员权限 2,设置静态IP 地址 3,至少有一个NTFS分区 4,操作系统版本(web版除外) 设置静态IP地址 dcpromo.exe命令不生效 ...
- hdu 3064 twoNumber
twoNumber Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 2048/1024 K (Java/Others) Total Su ...