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 + "%";

}

}

})();

0818b9ca8b590ca3270a3433284dd417.png

用法:

new H5ProgressBar({

height:20,

width:500,

speed:10

}).init();

0818b9ca8b590ca3270a3433284dd417.png

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/394630.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

html网页设计要点,网站交互设计的8个要点

一、力求一致性例如网站首页需要和每一个下级页面保持一致的风格&#xff0c;导航都要放在屏幕的左上角&#xff0c;具有高度一致性的界面能给人清晰整洁的感觉。二、允许频繁使用快捷键快捷键表示产品使用的灵活性和有效性&#xff0c;想想每次我们使用搜索引擎的时候是鼠标点…

搭建nfs共享存储服务之二nfs服务端配置

1.1.NFS服务端配置文件路径为&#xff1a; /etc/exports&#xff0c;并且默认为空&#xff0c;需要用户自行配置。/etc/exports文件配置格式为&#xff1a;NFS共享的目录 NFS客户端地址1&#xff08;参数1&#xff0c;参数2...&#xff09;客户端地址2&#xff08;参数1&#x…

值大于为此列指定的允许精度_电能质量测试精度会受到哪些因素影响?如何解决?...

关于电能质量&#xff08;也称为PQ:Power Quality&#xff09;研究的主题已成为多方面的话题。其需要考虑的不仅仅是IEC 61000-x-x电磁兼容性标准中规定的实际电能质量现象。在实践中&#xff0c;通常还会增加其他重要参数来保证供电的安全性&#xff0c;在某些情况下这些参数甚…

前端websocket获取数据后需要存本地吗_是什么让我放弃了restful api?了解清楚后我全面拥抱GraphQL...

GraphQL初步认识背景REST作为一种现代网络应用非常流行的软件架构风格&#xff0c;自从Roy Fielding博士在2000年他的博士论文中提出来到现在已经有了20年的历史。它的简单易用性&#xff0c;可扩展性&#xff0c;伸缩性受到广大Web开发者的喜爱。REST 的 API 配合JSON格式的数…

计算机应用基础案例教程总结,计算机应用基础案例教程

包杰军等编著的《计算机应用基础案例教程》以培养职业能力为目标&#xff0c;本着“做学合一”、“理论与实践并行”、“知识与技能并重”的教育思想编写。本书将实际操作案例与教学内容紧密结合&#xff0c;结构清晰、内容翔实、图文并茂、实用性强。全书共分6章&#xff0c;第…

ios开发之--UIDocumentInteractionController的使用(实现更多分享服务)

最近在做项目的时候&#xff0c;碰到这样一个需求&#xff0c;就是本地生成pdf文件&#xff0c;然后本地打开&#xff0c;经过测试发现&#xff0c;pdf文件是无法保存到相册里面的&#xff0c;只能存到手机里面&#xff0c;鉴于苹果的存储机制&#xff0c;需要取出来&#xff0…

eclipse tomcat新建一个_Javaweb07-Eclipse自动创建动态web项目

学习笔记是参考的how2j使用Eclipse创建Dynamic Web Project前面的web项目都是通过手动创建的&#xff0c;现在使用eclipse EE自动创建动态web项目&#xff0c;熟悉一下创建流程&#xff0c;仍旧使用前面创建过的HelloServlet。需要注意的是&#xff0c;这里的tomcat版本变了&am…

cordova

命令行 npm install -g cordova cordova create MyApp cd MyApp cordova platform add android 当然也可以把android换成browser把自己的前端程序放在www文件夹内这里注意如果用android studio打包或运行的话&#xff0c;&#xff08;即不用cordova&#xff09;&#xff0c;要把…

excel导出_SpringBoot实现快速导出Excel

阅读本文约需要6分钟 大家好&#xff0c;我是你们的导师&#xff0c;我每天都会在这里给大家分享一些干货内容(当然了&#xff0c;周末也要允许老师休息一下哈)。上次老师跟大家分享了下MyBatis 几种通用的写法的相关知识&#xff0c;今天跟大家分享SpringBoot实现快速导出Exce…

fifo算法_缓存算法FIFO、LFU、LRU

阅读文本大概需要3分钟。0x01&#xff1a;FIFO算法FIFO(First in First out)&#xff0c;先进先出。其实在操作系统的设计理念中很多地方都利用到了先进先出的思想&#xff0c;比如作业调度(先来先服务)&#xff0c;为什么这个原则在很多地方都会用到呢&#xff1f;因为这个原则…

怎样设置计算机远程桌面,电脑如何设置远程连接,手把手教你如何远程

说起远程桌面很多用户都认为是从WIN2000 SERVER才开始引入的&#xff0c;实际上我们可以在WIN98甚至是DOS中看到他的身影。远程桌面采用的是一种类似TELNET的技术&#xff0c;他是从TELNET协议发展而来的。那么如何设置自动开机&#xff0c;下面&#xff0c;我们就来看看如何设…

inputstream转fileinputstream对象_FileInputStream类:文件字节输入流

API ----IO ----字节输入输出流练习 java.lang.Object 继承者 java.io.InputStream 继承者 java.io.FileInputStreampublic FileInputStream类速查速记&#xff1a;直接包装File用于从记事本中读数据 in是针对java来说的&#xff0c;从记事本读入到java* 构造方法&#xff1a;…

IBM将推NVMe存储解决方案

先前&#xff0c;IBM曾对外宣称将开发新的NVMe解决方案&#xff0c;并推动行业参与者进一步探索新协议&#xff0c;以支持更快的数据传输。周日&#xff0c;IBM表示新的语言协议——NVMe&#xff08;非易失性存储器&#xff09;正在逐步取代SAS和SATA等旧有的固态硬盘存储标准。…

BZOJ 1113: [Poi2008]海报PLA

1113: [Poi2008]海报PLA Time Limit: 10 Sec Memory Limit: 162 MBSubmit: 1025 Solved: 679[Submit][Status][Discuss]Description N个矩形,排成一排. 现在希望用尽量少的矩形海报Cover住它们. Input 第一行给出数字N,代表有N个矩形.N在[1,250000] 下面N行,每行给出矩形的长…

opengl三维图形图形颜色_【图形学基础】基本概念

右手坐标系。类似OpenGL遵循的右手坐标系&#xff1a;首先它是三维的笛卡尔坐标系&#xff1a;原点在屏幕正中&#xff0c;x轴从屏幕左向右&#xff0c;最左是-1&#xff0c;最右是1&#xff1b;y轴从屏幕下向上&#xff0c;最下是-1&#xff0c;最上是1&#xff1b;z轴从屏幕里…

xp职称计算机考试题库,2015年职称计算机考试XP题库.doc

2015年职称计算机考试XP题库.doc (7页)本资源提供全文预览&#xff0c;点击全文预览即可全文预览,如果喜欢文档就下载吧&#xff0c;查找使用更方便哦&#xff01;9.90 积分&#xfeff;2015年职称计算机考试XP题库职称计算机考试考点精编&#xff1a;工具栏的设置与操作XP中将…

第一个python爬虫_Python爬虫01——第一个小爬虫

Python小爬虫——贴吧图片的爬取 在对Python有了一定的基础学习后&#xff0c;进行贴吧图片抓取小程序的编写。 目标&#xff1a; 首先肯定要实现图片抓取这个基本功能 然后实现对用户所给的链接进行抓取 最后要有一定的交互&#xff0c;程序不能太傻吧 一、页面获取 要让pytho…

Mac下,如何把项目托管到Github上(Github Desktop的使用)

在上一篇中&#xff0c;详细讲解了使用X-code和终端配合上传代码的方法&#xff0c;这种方法比较传统&#xff0c;中间会有坑&#xff0c;英文看起来也费劲&#xff0c;不过Github官方提供了一个Mac版的客户端&#xff0c;如下图&#xff1a; 附上下载链接&#xff1a;传送门 下…

大数据实验报告总结体会_建设大数据中台架构思考与总结

简介本文介绍完善的大数据中台架构了解这些架构里每个部分的位置&#xff0c;功能和含义及背后原理及应用场景。帮助技术与产品经理对大数据技术体系有个全面的了解。数据中台定义&#xff1a;集成离线数仓与实时数仓&#xff0c;并以多数据源统一整合采集到kafka,再通过kafka进…

半数集问题

给定一个自然数n&#xff0c;由n开始可以依次产生半数集set(n)中的数如下&#xff1a; (1) n ∈set(n)&#xff1b; (2) 在n的左边加上一个自然数&#xff0c;但该自然数不能超过最近添加的数的一半&#xff1b; (3) 按此规则进行处理&#xff0c;直到不能再添加自然数为止。…