Jquery中文网 > 脚本编程 > javascript > 正文 javascript网页加载进度条实现代码

javascript网页加载进度条实现代码

发布时间：2016-12-26 编辑：www.jquerycn.cn

jquery中文网为您提供javascript网页加载进度条实现代码等资源，欢迎您收藏本站，我们将为您提供最新的javascript网页加载进度条实现代码资源

这是一个利用javasscript来实现的一个网页进度条效果，很不错的效果有需要的朋友可以测试一下。

提示：您可以先修改部分代码再运行

<textarea name="runcool" rows="28" cols="75" > <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>进度条动画效果</title> <meta http-equiv="content-type" content="text/html;charset=gb2312"> <style type="text/css"> body{margin:0px;padding:0px;} #ibox{line-height:20px;width:300px;height:20px;background:#ccc;text-align:left;margin:100px auto 0 auto;} #iLoading{color:#fff;font-size:12px;line-height:20px;width:0px;height:20px;background:red;text-align:center;position: absolute;} </style> <script type="text/javascript"> window.onload=function(){ var idiv=document.getElementById('iLoading'); var ibox=document.getElementById('ibox'); var timer=null; timer=setInterval(function(){ var iWidth=idiv.offsetWidth/ibox.offsetWidth*100; idiv.style.width=idiv.offsetWidth 1 'px'; idiv.innerHTML=Math.round(iWidth) "%"; if(iWidth==100){ clearInterval(timer); } },1); } </script> </head> <body>

</body> </html></textarea>

提示：您可以先修改部分代码再运行

您可能感兴趣的文章：
html5如何实现简单进度条效果？动态进度条的实现（代码示例）
javascript网页加载进度条实现代码
 使用Android仿微信加载H5页面的进度条
 用jQuery模拟页面加载进度条的实现代码
 jquery 简单的进度条实现代码
 javascript中Loading进度条的网页加载效果
 基于jQuery实现模拟页面加载进度条
 使用jquery插件实现图片延迟加载技术详细说明
 详解canvas实现圆弧、圆环进度条的实例方法
 拉动滚动条加载数据的jquery代码

上一篇：javascript滚动公告板效果下一篇：兼容性超强颜色渐变效果

[关闭]

javascript网页加载进度条实现代码

最近更新

浏览排行