利用原生javascript实现进度条(可做页面头部进度条,或者局部进度条均可)

 1 <div class="top-progress" id="js-top-progress"></div> <!--结构只有一句话即可-->
 2 <script src="./static/js/progress.js"></script>
 3 <script type="text/javascript">
 4   var p = myProgress.create(document.getElementById("#js-top-progress"), "#21a557", false);      //第一个参数必须为原生dom对象    //第二个参数为进度条的颜色 5   //第三个参数默认为true,表示进度条走完是否还显示
 6   p.start(); //进度条开始走
 7
 8   window.onload = function() {
 9     p.over(); //页面加载完毕,调用,让进度条走完到100%
10   }
11 </script>

今天闲来无事,实现了一下现在常见的页面头部的载入进度条,上面就是使用方法,很简单的几句话,有需要的朋友可以拿去。

代码效果可以去我的这个页面查看 http://www.bx1987.com/edu/

源码可以去这里下载

https://github.com/blff122620/jsLibary/blob/master/static/js/progress.js

时间: 2024-08-07 01:42:01

利用原生javascript实现进度条(可做页面头部进度条,或者局部进度条均可)的相关文章

利用原生JavaScript获取样式的方式小结

来源:http://www.ido321.com/930.html ps:是获取样式,不是设置样式.若没有给元素设置样式值,则返回浏览器给予的默认值.(论坛整理) 1.element.style:只能获取写在元素标签中的style属性里的样式值,无法获取到定义在<style></style>和通过<link href="css.css">加载进来的样式属性 1: var ele = document.getElementById('ele'); 2:

浅谈原生JavaScript实现remove()和recover()

利用原生JavaScript实现: 1.remove(selectors)删除指定的一个或一组元素. 2.recover(selectors)恢复刚才删除的元素. 1 function remove(selectors) { 2 selectors.removeNode = []; 3 if (selectors.length != undefined) { 4 var len = selectors.length; 5 for (var i = 0; i < len; i++) { 6 sel

&lt;&lt;&lt; 网页中如何利用原生js和jquery储存cookie

javascript当中的cookie机制,使应用达到了真正的全局变量的要求,cookie是浏览器提供的一种机制,它将document 对象的cookie属性提供给JavaScript.可以由JavaScript对其进行控制,而并不是JavaScript本身的性质,由于cookie机制是把信息储存到硬盘,所以他可以用来做全局变量 cookie有关安全性和作用域 1.cookie可能被禁用.当用户非常注重个人隐私保护时,他很可能禁用浏览器的cookie功能:  2.cookie是与浏览器相关的.这

原生 JavaScript 实现 state 状态管理系统

原生 JavaScript 实现 state 状态管理系统 Build a state management system with vanilla JavaScript | CSS-Tricks 在软件工程中,状态管理已经不是什么新鲜概念,但是在 JavaScript 语言中比较流行的框架都在使用相关概念.传统意义上,我们会保持 DOM 本身的状态甚至声明该状态为全局变量.不过现在,我们有很多状态管理的宠儿供我们选择.比如 Redux,MobX 以及 Vuex,使得跨组件的状态管理更为方便.这

原生javascript实现Tab切换

tab切换在各大主流页面有广泛的应用,今天来分享一个用原生javascript来实现类似京东购物边栏的TAB.对于正在使用web前端开发(http://www.maiziedu.com/course/web/)网站的朋友,是非常有用的哦. 首先以下是一段边栏HTML框架代码 <body> <div class="wrap"> <div id="left"> <ul id="leftList"> &l

原生JavaScript实现滚动条

没事找事,明明overflow:scroll|auto就可以,只是难看点(实际上css也能设置).只当练习写拖拽.监听事件.位置检测了. 原理是对滑动条块进行监听,按下鼠标按键后,监听鼠标移动,然后根据滑动条块移动的百分比算出滚动区域的滚动程度,用marginLeft进行滚动.具体的写在注释里. 整体弄成了一个对象,防止各种乱七八糟的数据污染全局变量.另外,对象内部调用的函数也都写到了对象构造函数的里面,由于对象作用域链的原理,外部无法进行调用,防止不小心在外部调用. 1 <!DOCTYPE h

原生javascript解析xml文档

之前写过一篇 <javascript/jQuery解析或转换json和xml>链接是http://my.oschina.net/ososchina/blog/343748,这篇博客详细解释了json使用 JSON.js  window.eval() ,jQuery 与字符串互相转换的方法 ,顺便也说了一点jQuery解析xml文档的方法,这里着重论述javascript操作xml. 顺便提一下,今天做项目有一点问题,如何让服务程序接口返回的就是json,而不需要 使用 jQuery.ajax设

为什么原生 JavaScript 开发越来越多受欢迎?是否应该跟风用原生JavaScript代替 jQuery等库?

本文标签:  jQuery的作用 原生JavaScript优势 jQuery官网 jQuery处理DOM和跨浏览器 JavaScript新特性 互联网杂谈 随着 JavaScript 本身的完善,越来越多的人开始喜欢使用原生 JavaScript 开发代替各种库,其中不少人发出了用原生 JavaScript 代替 jQuery 的声音.这并不是什么坏事,但也不见得就是好事.如果你真的想把 jQuery从前端依赖库中移除掉,我建议你慎重考虑. 首先 jQuery 是一个第三方库.库存在的价值之一在

Linux系统下利用wget命令把整站下载做镜像网站

Linux系统下利用wget命令把整站下载做镜像网站 2011-05-28 18:13:01 | 1次阅读 | 评论:0 条 | itokit  在linux下完整的用wget命令整站采集网站做镜像 的命令是及无视网站根目录下的robots.txt限制.并且可以模拟一个正常浏览者的信息下载该网站. C/C++ Code复制内容到剪贴板 wget -m -e robots=off -U "Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-CN; rv:1.9.