<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style>
#myProgress {
width: 100%;
height: 30px;
position: relative;
background-color: #ddd;
}

#myBar {
background-color: #4CAF50;
width: 10px;
height: 30px;
position: absolute;
}
</style>
<body>

<h1>JavaScript 进度条</h1>

<div id="myProgress">
<div id="myBar"></div>
</div>

<br>
<button onclick="move()">点我</button>

<script>
function move() {
var elem = document.getElementById("myBar");
var width = 0;
var id = setInterval(frame, 1000);
function frame() {
if (width == 100) {
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
}
}
}
</script>

</body>
</html>

js 进度条效果的更多相关文章

  1. js进度条源码下载—js进度条代码

    现在很多网站会用到进入网站特效,到网页没有加载完成的时候,会有一个loding特效,加载完了之后才能看到页面,今天就带着做一个js进度条效果,今天要做的效果是纯js进度条加载,没有用到框架,方便大家进 ...

  2. Progress.js – 为页面上的任意对象创建进度条效果

    Progress.js 是一个 JavaScript 和 CSS3 的库,它帮助开发人员为网页上的每个对象创建和管理进度条效果.你可以设计自己的模板,进度条或者干脆定制. 您可以使用 Progress ...

  3. js实现进度条效果

    需求分析: 最近学习javascript客户端脚本语言,学到了两个定时器函数setInterval()和setTimeout(),回想起以前在网页上看到的进度条效果可以使用定时器来实现,所以完成了进度 ...

  4. 创建一个jQuery UI的垂直进度条效果

    日期:2013-9-24  来源:GBin1.com 在线演示 缺省的jQuery UI只有水平的进度条效果,没有垂直的进度条效果,仅仅重新定义JQuery UI的CSS不能解决这个问题. 这里我们扩 ...

  5. CSS 实现滚动进度条效果

    参考:https://www.w3cplus.com/css/pure-css-create-scroll-indicator.html 前言:细化总结.参考的文章作者已经写的很详细了.这里在从初学者 ...

  6. Javascript 及 CSS3 实现进度条效果

    Javascript 及 CSS3 实现进度条效果 一:css2 属性clip实现网页进度条:  在实现之前,我们先来介绍一下clip属性,因为这个属性在css2.1中很少使用到,所以我们有必要来了解 ...

  7. 【jQuery】页面顶部显示的进度条效果

    <!Doctype html> <html> <head> <title>页面顶部显示的进度条效果</title> <meta htt ...

  8. Android -- 真正的 高仿微信 打开网页的进度条效果

    (本博客为原创,http://www.cnblogs.com/linguanh/) 目录: 一,为什么说是真正的高仿? 二,为什么要搞缓慢效果? 三,我的实现思路 四,代码,内含注释 五,使用方法与截 ...

  9. WPF 简易进度条效果

    最近做一个项目,看到以前同事写的进度条效果不错,所以,拿来简化了下,不炫,但是项目中还是够用的. 还是,先来看下调用以后的效果 1.因为ProgressbBar的Foreground显示不得不一样,所 ...

随机推荐

  1. Python函数名的应用和新特性格式化输出

    1.函数名指向的是函数的内存地址. ​ def func(): print(123) print(func,type(func)) # <function func at 0x000000000 ...

  2. if当中是赋值怎么办

    1.Java中,赋值是有返回值的 ,赋什么值,就返回什么值.比如这题,x=y,返回y的值,所以括号里的值是1. 2.Java跟C的区别,C中赋值后会与0进行比较,如果大于0,就认为是true:而Jav ...

  3. Linux的top命令及交换分区

    TOP命令关键指标 %MEM,在内存中的占用率 %CPU,使用率,如果两核,最大可到200% TIME+, 占用cpu的总时间/s SHR,分享内存 RES, 常驻内存,进程当前使用的内存大小,不包括 ...

  4. Redis学习笔记（八）——持久化

    一.介绍 Redis的所有的数据都存在内存中,然后不定期的通过异步方式保存到磁盘上(这称为"半持久化模式"):也可以把每一次数据变化都写入到一个append only file(a ...

  5. scrapy和scrapy-redis 详解一 入门demo及内容解析

    架构及简介 Scrapy是用纯Python实现一个为了爬取网站数据.提取结构性数据而编写的应用框架,用途非常广泛. Scrapy 使用了 Twisted(其主要对手是Tornado)异步网络框架来处理 ...

  6. 在PLC中开关量采集模块的作用

    PLC系统作为工业控制的基础设备在如今的现代化工厂应用中已经非常的广泛.许多工厂应用中,都需要对现场采集来的脉冲信号进行计数统计.如果是使用专用脉冲计数模块的话,价格会非常的昂贵,在很多采集低速脉冲信 ...

  7. Java基础—反射与代理（新手向）

    第1章 反射与代理 1.1 反射定义 一般情况下,需要一个功能的前提是遇到了某个问题,这里先列举一些问题,然后再通过反射是如何解决了这些问题,来引出反射的定义. 普通开发人员工作中最常见的问题:需要生 ...

  8. ETCD核心机制解析

    ETCD整体机制 etcd 是一个分布式的.可靠的 key-value 存储系统,它适用于存储分布式系统中的关键数据. etcd 集群中多个节点之间通过Raft算法完成分布式一致性协同,算法会选举出一 ...

  9. C++ stringstream 实现字符与数字之间的转换

    c++中利用srtingstream可以将数字转为字符串,或者将字符串转为数字: 首先将double型数字串转成了string: stringnum2string(double *a,int n) { ...

  10. streamreader

    using (StreamReader sr = new StreamReader(@"C:\Documents and Settings\Administrator\桌面\1.txt&qu ...