c js html页面进度条,js实现进度条的方法

本文实例讲述了js实现进度条的方法。分享给大家供大家参考。具体实现方法如下：

1.setTimeout和clearTimeout

进度条

.container{

width:450px;

border:1px solid #6C9C2C;

height:25px;

}

#bar{

background:#95CA0D;

float:left;

height:100%;

text-align:center;

line-height:150%;

}

function run(){

var bar = document.getElementById("bar");

var total = document.getElementById("total");

bar.style.width=parseInt(bar.style.width) + 1 + "%";

total.innerHTML = bar.style.width;

if(bar.style.width == "100%"){

window.clearTimeout(timeout);

return;

}

var timeout=window.setTimeout("run()",100);

}

window.onload = function(){

run();

}

效果图：

2.setInterval和clearInterval

进度条

.processcontainer{

width:450px;

border:1px solid #6C9C2C;

height:25px;

}

#processbar{

background:#95CA0D;

float:left;

height:100%;

text-align:center;

line-height:150%;

}

function setProcess(){

var processbar = document.getElementById("processbar");

processbar.style.width = parseInt(processbar.style.width) + 1 + "%";

processbar.innerHTML = processbar.style.width;

if(processbar.style.width == "100%"){

window.clearInterval(bartimer);

}

var bartimer = window.setInterval(function(){setProcess();},100);

window.onload = function(){

bartimer;

}

效果图：

3.setTimeout和setInterval区别

setTimeout() 只执行 code 一次。如果要多次调用，请使用 setInterval() ，setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭，或者让 code 自身再次调用 setTimeout()。

希望本文所述对大家的javascript程序设计有所帮助。

c js html页面进度条,js实现进度条的方法相关推荐

网页自动切换html css js,HTML页面自动清理js、css文件的缓存（自动添加版本号）_HTML/Xhtml_网页制作...
这篇文章主要介绍了HTML页面自动清理js.css文件的缓存(自动添加版本号),小编觉得挺不错的,现在分享给大家HTML源码,也给大家做个参考.对HTML感兴趣的小伙伴们一起跟随小编过来看看吧在we ...
jquery.fireworks.js表白页面放烟花js特效
下载地址 jquery.fireworks.js实现的爱情表白页面放烟花特效 dd:
js获取页面宽度给JS div设宽度
document.body.offsetWidth; document.getElementById("rightlst").style.width="100px&quo ...
ext 日期时间控件js html页面代码,Ext JS框架中日期函数的用法及日期选择控件的实现...
增加或减少时间,这个函数不改变原有Date对象的值,而是返回一个新的Date对象. // @param {Date} date 原日期对象. // @param {String} interval v ...
js的定时器实现页面展示的异步刷新多线程同步实现方式附进度条js代码
先简单介绍下两个场景结果迅速能出来,采用多线程的同步方式如果逻辑处理比较快,3-5秒任务就会执行完毕,你也可以采用同步多线程同步的方式,代码如下: 数据校验使用到的线程实例: if(null!=c ...
基于腾讯 x5 开源库，提高 webView 开发效率，大概要节约你百分之六十的时间成本。该案例支持处理 js 的交互逻辑且无耦合、同时暴露进度条加载进度、可以监听异常 error 状态、支持视频播放
YCWebView 项目地址:yangchong211/YCWebView 简介: 基于腾讯 x5 开源库,提高 webView 开发效率,大概要节约你百分之六十的时间成本.该案例支持处理 js 的交 ...
html canvas直线进度条,js+HTML5 canvas 实现简单的加载条(进度条)功能示例
本文实例讲述了js+HTML5 canvas 实现简单的加载条(进度条)功能.分享给大家供大家参考,具体如下: www.jb51.net canvas实现加载条动画 /* * 获取canvas, ca ...
html5 音乐播放进度条,js实现音乐播放控制条
前言 html5中提供audio标签, 该标签实现音频的播放,之前就一直对于音频以及视频播放比较感兴趣,一直想要自己实现一个音频和视频播放的模块,这也是本文章撰写的初衷,最近花了些时间实现了Audio ...
php 中js跳转页面跳转页面,js跳转代码_PHP页面跳转 Js页面跳转代码
摘要腾兴网为您分享:PHP页面跳转 Js页面跳转代码,自动刷宝,中信金通,携程抢票,未来屋等软件知识,以及沃金汇,沃行讯通,securecrt.exe,我的世界变形金刚mod,一票通,农场小分队,手 ...
Layui页面元素之选项卡、进度条、面板、表格、徽章、时间线、辅助元素
Layui页面元素之选项卡.进度条.面板.表格 .徽章.时间线.辅助元素效果 demo 选项卡.面板.时间线很重要效果 demo <!DOCTYPE html> <html> ...

c js html页面进度条,js实现进度条的方法

c js html页面进度条,js实现进度条的方法相关推荐

最新文章

热门文章