<!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. 【应用服务 App Service】App Service中抓取网络日志

    问题描述 众所周知,Azure App Service是一种PaaS服务,也就是说,IaaS层面的所有内容都由平台维护,所以使用App Service的我们根本无法触碰到远行程序的虚拟机(VM), 所 ...

  2. LeetCode 45跳跃游戏&46全排列

    原创公众号:bigsai,回复进群加入力扣打卡群. 昨日打卡:LeetCode 42字符串相乘&43通配符匹配 跳跃游戏 题目描述: 给定一个非负整数数组,你最初位于数组的第一个位置. 数组中 ...

  3. android自带下拉刷新SwipeRefreshLayout

    也是一个布局容器,只有一个子组件,类似scrollView <?xml version="1.0" encoding="utf-8"?> <a ...

  4. paraview将csv格式显示为云图

    paraview可以直接读入csv数据,并且显示为vtk的云图效果,和矢量图效果. 二维矢量图 导入csv数据(数据在文章最后有提供): 成功导入: 关闭右侧数据,并选择Filters->Alp ...

  5. buuctf-pwn:jarvisoj_level6_x64

    jarvisoj_level6_x64 只能申请unsorted bin大小下的unlink IDA看一下,可以发现edit里面有任意堆溢出的情况(realloc造成堆溢出) 然后free里面有UAF ...

  6. python中拿不到字典value值得问题解决

    在python项目的练习中,根据字典的key值get不到value值,如图所示: 最后,将user = self.allUsers.get(cardNum)改成user = self.allUsers ...

  7. Luogu P2536 [AHOI2005]病毒检测

    题意 给一个有通配符的模式串和 \(n\) 个文本串,其中 ? 可以匹配任意字符,* 可以匹配 \(0\) 或任意多个字符,求 \(n\) 个文本串中无法与模式串匹配的数量. \(\texttt{Da ...

  8. PLC模拟量采集模块在工控领域的应用

    在工业现场中,往往需要对温度.电流.电压等模拟量进行控制采集,这可以使用PLC对这些数据进行采集,但是如今生产各种PLC模拟量采集模块的厂家非常多,不同类型的PLC都是有自己专属的模拟量采集模块的,不 ...

  9. 【Postman】使用Postman实现接口数据关联

    首先下载安装Postman直接打开官网,点击下载按钮即可完成下载https://www.getpostman.com/downloads/ 栗子业务场景:用户登录医生账户,查询自己的处方列表数据:用户 ...

  10. MySQL各版本connector net msi

    从其他博主那里扒来的! 链接:https://pan.baidu.com/s/1C1fYepBFKfxU0NJS0aRyJw 提取码:awsl