gpt4 book ai didi

javascript - 具有滑动能力的进度条

转载 作者:太空狗 更新时间:2023-10-29 15:46:06 25 4
gpt4 key购买 nike

我是 JavaScript/CSS(基本上是整个网络开发世界)的新手,我真的很难创建以下小部件。我创建了一张我想要制作的图片以使其更清晰。

enter image description here

播放/暂停和停止按钮已准备就绪。循环复选框没有问题。但是进度条很蛋疼。这两个标记应该标记文件开始播放的位置和停止播放的位置。进度条也应该是可点击的,所以如果我想访问某个时间点,那么它是可能的。

到目前为止我尝试了什么

jQuery UI slider :用于滑动进度条并使用该可拖动 slider 访问音频文件中的特定点。工作正常。但是没有标记,看起来真的很难看。不要怎么改。

<progress>标签: 不是很灵活。标记?点击?

<div> tag: 好像没有办法得到我点击的那个点。

那么,你们有什么推荐的吗?我应该如何进行?

最佳答案

Canvas 替代

您可能想使用 canvas并在其中绘制您自己的进度条元素。

下面是一些 Canvas 进度条教程:


<progress>

要访问 DOMElement 中的点击位置,您可以继续点击事件的属性:clientXclientY ( MDN Source ),像这样:

HTML

<div class="marker" id="StartMarker">^</div>
<div class="marker" id="StopMarker">^</div>
<progress id="progress" value="0" min="0" max="100">0%</progress>
<form id="choice">
<button id="marker1">Beginning marker</button>
<button id="marker2">Ending marker</button>
<input type="hidden" id="markerValue" value="0" />
</form>

JavaScript(未优化)

document.getElementById('progress').onclick = function (event, element) {
/* Math.floor((event.offsetX / this.offsetWidth) * 100) */
var newProgress = event.offsetX;

document.getElementById('choice').style.display = "block";
document.getElementById('markerValue').setAttribute('value', newProgress);

document.getElementById('marker1').onclick = function (event) {
event.preventDefault();

var newProgress = document.getElementById('markerValue').value;
var progressBar = document.getElementById('progress');
var startMarker = document.getElementById('StartMarker');
var stopMarker = document.getElementById('StopMarker');

var marker = startMarker;
marker.style.display = "block";

startMarker.style.display = "block";
startMarker.offsetTop = (progressBar.offsetTop + progressBar.offsetHeight + 2) + "px";
startMarker.style.left = newProgress + "px";

};

document.getElementById('marker2').onclick = function (event) {
event.preventDefault();

var newProgress = document.getElementById('markerValue').value;
var progressBar = document.getElementById('progress');
var startMarker = document.getElementById('StartMarker');
var stopMarker = document.getElementById('StopMarker');


stopMarker.style.display = "block";
stopMarker.offsetTop = (progressBar.offsetTop + progressBar.offsetHeight + 2) + "px";
stopMarker.style.left = newProgress + "px";
};
};

CSS

.marker {
position:absolute;
top:24px;
left:9px;
display:none;
z-index:8;
font-weight:bold;
text-align:center;
}
#StartMarker {
color: #CF0;
}
#StopMarker {
color:#F00;
}
#choice {
display:none;
}
progress {
display: inline-block;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 300px;
height: 20px;
padding: 3px 3px 2px 3px;
background: #333;
background: -webkit-linear-gradient(#2d2d2d, #444);
background: -moz-linear-gradient(#2d2d2d, #444);
background: -o-linear-gradient(#2d2d2d, #444);
background: linear-gradient(#2d2d2d, #444);
border: 1px solid rgba(0, 0, 0, .5);
border-radius: 15px;
box-shadow: 0 1px 0 rgba(255, 255, 255, .2);
}

Live Demo

关于javascript - 具有滑动能力的进度条,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17812444/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com