骑摩托的程序猿 2021-05-02 14:03 采纳率: 100%
浏览 116
已采纳

刚开始学js,怎么实现进度条暂停继续功能，希望能详细解释一下（小白一个）[face]monkey2:

刚开始学js,怎么实现进度条暂停继续功能，希望能详细解释一下（小白一个）[face]monkey2:019.png[/face]
  • 写回答

1条回答 默认 最新

  • Go 旅城通票 2021-05-02 14:20
    关注
    <!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>
			进度条
		</title>
	</head>
	<style>
		#myProgress{ width: 100%;; height: 30px; position: relative; background-color:
		#FF7F50; overflow: hidden; } #myBar{ background-color: greenyellow; width:
		10px; height: 30px; position: absolute; text-align: center; line-height:
		30px; color: #FF7F50; } #bt{ border-radius: 15px; }
	</style>
	<body background="../img/bj.jpg">
		<h1 align="center">
			进度条
		</h1>
		<div id="myProgress" style="border-radius: 15px;">
			<div id="myBar" style="width: 1%;">
				1%
			</div>
		</div>
		<br />
		<script>
			function move() {
				var elem = document.getElementById("myBar");
				
clearInterval(window.i);//点击开始先清除上一次的计时器，防止叠加
				window.i = setInterval(frame, 200);
				function frame() {
var width=parseInt(elem.style.width) ||0;
					if (width == 100) {
						clearInterval(i);
					} else {
						width++;
						elem.style.width = width + '%';
						elem.innerHTML = width  + "%"
					}
				}
			}
		</script>
		<div style="text-align: center;">
			<button onclick="move()" id="bt">
				开始
			</button>
			<br />
			<button onclick="clearInterval(i);" id="bt">
				暂停
			</button>
		</div>
	</body>

</html>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题？

悬赏问题

  • ¥15 spss统计中二分类变量和有序变量的相关性分析可以用kendall相关分析吗？
  • ¥15 拟通过pc下指令到安卓系统，如果追求响应速度，尽可能无延迟，是不是用安卓模拟器会优于实体的安卓手机？如果是，可以快多少毫秒？
  • ¥20 神经网络Sequential name=sequential, built=False
  • ¥16 Qphython 用xlrd读取excel报错
  • ¥15 单片机学习顺序问题！！
  • ¥15 ikuai客户端多拨vpn，重启总是有个别重拨不上
  • ¥20 关于#anlogic#sdram#的问题，如何解决？(关键词-performance)
  • ¥15 相敏解调 matlab
  • ¥15 求lingo代码和思路
  • ¥15 公交车和无人机协同运输