<!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之format字符串格式化

    1.字符串连接 >>> a = 'My name is ' + 'Suen' >>> a 'My name is Suen' >>> a = 'M ...

  2. concurrenthasmap

    concur'renthashmap java1.7 hashMap在单线程中使用大大提高效率,在多线程的情况下使用hashTable来确保安全.hashTable中使用synchronized关键字 ...

  3. 【CF1436C】Binary Search 题解

    原题链接 题意简介 要求有多少种 n 的排列,能够通过二分法正确地找到放在 pos 处的数字 x. 答案对 1e9+7 取模.n<=1000. 采用的二分法如下图: 思路分析 首先,这个排列中有 ...

  4. LruCache缓存bitmap(一)

    Lrucache是把图片缓存到内置sd卡,设置缓存容量为系统分配容量的八分之一,单位byte,超过缓存容量gc会自动回收不长使用的缓存.觉得lrucache就先map一样,放入键值对就行了,比较方便, ...

  5. Scala编程 笔记

    date: 2019-08-07 11:15:00 updated: 2019-11-25 20:00:00 Scala编程 笔记 1. makeRDD 和 parallelize 生成 RDD de ...

  6. js中!!的运用

    最近在看vue源码. 里面使用Object.defineProperty()中!!吸引眼球 1 export function def (obj: Object, key: string, val: ...

  7. Udacity的C++编程练习: Python转C++

    练习 1 在机器人定位的课程中,Sebastian Thrun 已经带领你了解了一维机器人传感和运动的 Python 代码.最后你得到了一个 sense() 函数,它基于传感器的测量数据来更新概率.你 ...

  8. 浅谈SRT和NDI®在广电制作领域的技术优势和应用

    随着技术的不断发展,用户对音视频质量的要求不断提升,对视频内容观看的方式也日趋多元化.摄像设备的分辨率从高清到4K,甚至有些厂家推出了6K或8K的产品:用户不再局限于从有线电视的直播节目中收看内容,智 ...

  9. CentOS 7 搭建 Ceph 集群（nautilus 版本）

    搭建 Ceph 分布式集群( nautilus 版本 ) 一.服务器环境说明 主机名 角色 IP地址 ceph-admin ceph-deploy 192.168.92.21 ceph-node1 m ...

  10. 【转】Setting up SDL Extension Libraries on Code::Blocks 12.11

    FROM: http://lazyfoo.net/tutorials/SDL/06_extension_libraries_and_loading_other_image_formats/window ...