<style><!--
#time{ width:500px;
height: 20px;
background: red;
border-radius: 10px;
}
--></style>
<div id="time" style="width: 100%;">&nbsp;</div>
<div id="total">&nbsp;</div>
<p>
<script type="text/javascript">// <![CDATA[
//方法一、
// var total=document.getElementById('total')
// var times=document.getElementById('time');
// console.log(times)
//
// var progress=times.offsetWidth
// console.log(progress)
// var pro=setInterval(function(){
// progress--;
// if(progress<0){
// clearInterval(pro)
// }else{
// times.style.width=progress+'px';
// total.innerHTML=times.style.width;
// }
// },50) 方法二、
function run(){
var bar = document.getElementById("time");
var total = document.getElementById("total");
bar.style.width=parseInt(bar.style.width) - 1 + "%";
total.innerHTML = bar.style.width;
if(bar.style.width == "0%"){
window.clearTimeout(timeout);
return;
}
var timeout=window.setTimeout("run()",100);
}
window.onload = function(){
run();
}
</script>
</body>
</html>

js控制进度条数据的更多相关文章

  1. js控制进度条到达100%跳转界面一

    进度条一般在手机上用到的比较广泛,刚好最近的项目也是一直在做手机站,这个特效是手机端的一个界面,现在我把改成pc端了,进度条的快慢速度和样式可自行调节,改动也是很方便的,不多说,看代码: <st ...

  2. nprogress.js 头部进度条使用方法

    nprogress.js 头部进度条 引入CSS\JS <link rel="stylesheet" type="text/css" href=" ...

  3. Js 百分比进度条

    [构想] CSS3 + JS CSS3控制进度 利用CSS3中的 @keyframes JS实现百分比 根据CSS来调整,时间 [页面代码] 第一种: 默认直接进入就是下载 CSS代码 body { ...

  4. js 实现进度条功能。

    /** * 纯js进度条 * Created by kiner on 15/3/22. */ function progress(options){ this.w = (options &&a ...

  5. C# 通过委托控制进度条以及多线程更新控件

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...

  6. 【Winform】使用BackgroundWorker控制进度条显示进度

    许多开发者看见一些软件有进度条显示进度,自己想弄,项目建好后发现并没有自己想象中的那么简单...看了网上很多教程后,写了一个小Demo供网友们参考~~,Demo的网址:http://pan.baidu ...

  7. C# 通过线程来控制进度条(转)--讲解多线程对界面的操作

    // 通过创建委托解决传递参数问题 private void _btnRun_Click( object sender, System.EventArgs e ) { RunTaskDelegate ...

  8. js实现进度条

    不多说,直接上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  9. JS实现 进度条 不用控件

    demo1 <html> <head> <title>进度条</title> <style type="text/css"&g ...

随机推荐

  1. F#周报2019年第39期

    新闻 宣告F# 4.7 宣告.NET Core 3.0 .NET Core 3.0中ASP.NET Core与Blazor的更新 .NET Conf 2019里提到的ML.NET与模型构建器 参与.N ...

  2. electron教程(三): 使用ffi-napi引入C++的dll

    我的electron教程系列 electron教程(一): electron的安装和项目的创建 electron教程(二): http服务器, ws服务器, 进程管理 electron教程(三): 使 ...

  3. 从一道面试题深入了解java虚拟机内存结构

    记得刚大学毕业时,为了应付面试,疯狂的在网上刷JAVA的面试题,很多都靠死记硬背.其中有道面试题,给我的印象非常之深刻,有个大厂的面试官,顺着这道题目,一直往下问,问到java虚拟机的知识,最后把我给 ...

  4. SOFAJRaft—初次使用

    SOFAJRaft-初次使用 SOFAJRaft 是基于 Raft 算法的生产级高性能 Java 实现,支持 MULTI-RAFT-GROUP.应用场景有 Leader 选举.分布式锁服务.高可靠的元 ...

  5. 〈四〉ElasticSearch的认识:基础原理的补充

    目录 想想我们漏了什么 回顾 补回 集群的建立 集群发现机制 配置文件 健康状态 补充: 小节总结 分片的管理 梳理 分片的均衡分配 主副分片的排斥 容错性: 数据路由 对于集群健康状态的影响 小节总 ...

  6. 学习WEBAPI(DOM)第二天

    目录 第二天学习目标: 一.阻止超链接的默认跳转行为 二.鼠标进入事件和鼠标离开事件 三.根据name属性值获取元素==>表单标签,返回的是伪数组 四.根据类样式的名字来获取元素,返回的是伪数组 ...

  7. mobaxterm和CRT的文件上传

    版权声明:本文为博主原创文章,遵循CC 4.0 by-sa版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/submarineas/article/de ...

  8. Linux 命令之 chmod

    命令格式 chmod有以下三种格式 chmod [-cfvR] MODE[,MODE]... FILE... chmod [-cfvR] OCTAL-MODE FILE... chmod [-cfvR ...

  9. 配置VC++2010的glut库

    VC++2010是一个成熟稳定的版本,微软的编译工具Visual Studio系列从VC6到如今的VC2019,功能非常强大,我们在开始学习C++和计算机图形学的时候,一般入手<<C++P ...

  10. Java基础-开篇

    之前在新浪博客写了不少springmvc的相关技术,但新浪博客毕竟不是专业的技术博客,添加代码很不方便,就开始在博客园试试了. 使用java开发也不少年了,准备再次整理一些java基础知识,当然,这次 ...