html5进度条插件 传递参数,Html5进度条插件(自写)
(function () {
window.H5ProgressBar = function (obj) {
this.height = obj.height;
this.width = obj.width;
this.speed = obj.speed;
};
//在界面上布局元素
H5ProgressBar.prototype.drawLayout = function () {
document.write("
开始下载
")
document.write(" ")
document.write("下载
")
document.write("
")
document.write("设置宽度:确定
")
document.write("设置高度:确定
")
document.write("设置速度:确定
")
}
//初始化方法,即程序入口,一开始从这里执行
H5ProgressBar.prototype.init = function () {
this.drawLayout();
var objPro = document.getElementById('proDownFile');
var width = this.width + "px"
var height = this.height + "px"
objPro.style.width = width;
objPro.style.height = height;
this.setProgressWidth();
this.setProgressHeight();
this.load();
this.setLoadSpeed();
}
//设置进度条的宽度
H5ProgressBar.prototype.setProgressWidth = function () {
var setWidthBtn = document.getElementById('setWidthBtn');
setWidthBtn.addEventListener('click', function () {
var progress = document.getElementById('proDownFile');
var width = document.getElementById('width');
var newWidth = width.value
if (newWidth.length == 0) {
alert("不能为空");
} else {
if (!isNaN(newWidth)) {
progress.style.width = newWidth + "px"
}
else {
alert("请输入数字类型")
}
}
});
}
//设置进度条的高度
H5ProgressBar.prototype.setProgressHeight = function () {
var setHeightBtn = document.getElementById('setHeightBtn');
setHeightBtn.addEventListener('click', function () {
var progress = document.getElementById('proDownFile');
var height = document.getElementById('height');
var newHeight = height.value
if (newHeight.length == 0) {
alert("不能为空");
} else {
if (!isNaN(newHeight)) {
progress.style.height = newHeight + "px"
}
else {
alert("请输入数字类型")
}
}
});
}
var intValue = 0;
var intTimer;
var objTip;
//下载
H5ProgressBar.prototype.load = function () {
var load = document.getElementById('load');
var time = 1000 - this.speed * 10;
load.addEventListener('click', function () {
Btn_Click(time);
});
}
//设置下载速度
H5ProgressBar.prototype.setLoadSpeed = function () {
var speed = document.getElementById('setSpeedBtn');
speed.addEventListener('click', function () {
var speed = document.getElementById('speed');
var newSpeed = speed.value
if (newSpeed.length == 0) {
alert("不能为空");
}
else {
if (!isNaN(newSpeed)) {
if (newSpeed <= 0 || newSpeed > 100) {
alert("请设置1-100%之内的数")
} else {
Btn_Click(1000 - newSpeed * 10);
}
}
else {
alert("请输入数字类型")
}
}
})
}
//设置时间
function Btn_Click(time) {
var progress = document.getElementById('proDownFile');
intValue = progress.value
if (intValue == progress.max) {
reset()
}
else {
intTimer = setInterval(Interval_handler, time);
}
}
//重新下载
function reset() {
intValue = 0;
var progress = document.getElementById('proDownFile');
intTimer = setInterval(Interval_handler, 1000);
}
//定时事件
function Interval_handler() {
intValue++;
var objPro = document.getElementById('proDownFile');
objTip = document.getElementById('loadTip');
objPro.value = intValue;
if (intValue >= objPro.max) {
clearInterval(intTimer);
objTip.innerHTML = "下载完成";
} else {
intValue += Math.random() * 1.8;
intValue = parseFloat(intValue.toFixed(1));
objTip.innerHTML = "正在下载" + intValue + "%";
}
}
})();
用法:
new H5ProgressBar({
height:20,
width:500,
speed:10
}).init();
html5进度条插件 传递参数,Html5进度条插件(自写)相关推荐
- jquery html页面传参,【已解决】jquery中如何跳转新页面时传递参数
折腾: 期间,已经可以用: window.location = bookDetailUrl 实现页面跳转,但是需要传递参数过去.需要搞清楚如何传递参数比较好. jquery pass paramete ...
- html5自适应性响应式banner幻灯片切换,html5 css3 bootstrap响应式幻灯片带进度条的图片切换效果代码...
特效描述:html5 css3 bootstrap 响应式幻灯片 带进度条 图片切换效果.jquery+css3带倒计时的全屏幻灯片插件Bootslider.js 代码结构 1. 引入CSS 2. 引 ...
- html5里可移动线性进度条的类型怎么表示,HTML5触摸事件实现移动端简易进度条的实现方法...
这篇文章主要介绍了关于HTML5触摸事件实现移动端简易进度条的实现方法,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 前言 HTML中新添加了许多新的事件,但由于兼容性的问题,许多事件 ...
- php 页面加载进度条,HTML5/CSS3 网页加载进度条的实现,下载进度条等经典案例
今天给大家带来一个比较炫的进度条,进度条在一耗时操作上给用户一个比较好的体验,不会让用户觉得在盲目等待,对于没有进度条的长时间等待,用户会任务死机了,毫不犹豫的关掉应用:一般用于下载任务,删除大量任务 ...
- 直接修改html代码视频进度,HTML5实现video标签的自定义播放进度条
现在随着html5的渐热,越来越多的web开发者都开始选择使用html5写出一些比较好的web应用. html代码: HTML5-Video-Player .videoPlayer{ border: ...
- 记录《时间进度》(人生进度条)(包含自定义进度、小插件)的开发
前言 开发的本意是想看到可视化的时间,让我们心存敬畏,珍惜时间,毕竟时间一去不复返! 最近灵感突突然袭来,想着做一个时间精度条:今天度过了多少,这周度过了多少,这个月度过了多少,今年度过了多少(以及这 ...
- ios 嵌入html5 传值,app中H5与ios交互中的搭桥 传递参数
// ios桥 分类列表 function setupWebViewJavascriptBridge(callback) { if (window.WebViewJavascriptBridge) { ...
- php项目网页音乐播放器插件,基于HTML5 canvas和Web Audio的音频播放器插件
wavesurfer.js是一款基于HTML5 canvas和Web Audio的音频播放器插件.通过wavesurfer.js你可以使用它来制作各种HTML5音频播放器,它可以在各种支持 Web A ...
- 功能强大的文件上传插件带上传进度-WebUploader
WebUploader是由Baidu WebFE(FEX)团队开发的一个以HTML5/FLASH构建的现代文件上传组件.在现代的浏览器里面能充分发挥HTML5的优势,同时又不摒弃主流IE浏览器,沿用老 ...
最新文章
- 中国CIO最关心的八大问题(上)
- butter fly graph
- 泰坦尼克数据集预测分析_探索性数据分析—以泰坦尼克号数据集为例(第1部分)
- Flex builder3与eclipse整合 转载
- python open encoding_Python文件操作
- Ubuntu下mysql修改字符集为utf8
- 应力循环次数60ant_齿轮应力循环次数公式
- HTTPS 免费证书,免费 ssl 证书,FreeSSL.cn 申请多种免费证书
- 2021年年4月证券从业资格考试《金融市场基础知识》真题(考生回忆 版)
- Two‘s Complement(二进制补码)
- ASP.NET 安全认证(二)——灵活运用 Form 表单认证中的 deny 与 allow 及保护 .htm 等文件...
- 想成为魅力十足的人的十大习惯
- 如何绘制用户体验地图
- Java类加载流程趣谈
- 【ORB-SLAM】原理部分
- 攻防世界逆向高手题之dmd-50
- KRPANO资源分析工具下载720YUN全景图
- VC++6.0出现error spawning解决方法
- 2PSK的调制解调,编码解码,还有它的误码率,功率谱(语音信号的)
- 如何在线生成动态gif图片?轻松一键教你在线制作gif