博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
js 进度条效果
阅读量:5026 次
发布时间:2019-06-12

本文共 705 字,大约阅读时间需要 2 分钟。

<!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 οnclick="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>

转载于:https://www.cnblogs.com/junyi-bk/p/11328915.html

你可能感兴趣的文章
版本更新
查看>>
SQL 单引号转义
查看>>
start
查看>>
实现手机扫描二维码页面登录,类似web微信-第三篇,手机客户端
查看>>
PHP socket客户端长连接
查看>>
7、shell函数
查看>>
【转】Apache Jmeter发送post请求
查看>>
Nginx 基本 安装..
查看>>
【凸优化】保留凸性的几个方式(交集、仿射变换、投影、线性分式变换)
查看>>
NYOJ-613//HDU-1176-免费馅饼,数字三角形的兄弟~~
查看>>
TFS --- GrantBackup Plan Permissions Error
查看>>
傅里叶级数与积分方程
查看>>
软工作业3:用户体验分析——以“南通大学教务管理系统微信公众号”为例
查看>>
Css:背景色透明,内容不透明之终极方法!兼容所有浏览器
查看>>
我们前端跟后端是怎么合作的
查看>>
mysql存储过程
查看>>
洛谷P2556 [AHOI2002] 黑白图像压缩 [模拟]
查看>>
letecode [136] - Single Number
查看>>
linux下设置固定IP的方法
查看>>
VMware虚拟机下Linux系统的全屏显示
查看>>