帮我用html写一个能在手机和电脑都兼容的可拖动的进度条
时间: 2024-05-21 18:10:44 浏览: 7
<!DOCTYPE html>
<html>
<head>
<title>可拖动的进度条</title>
<style>
#progressBar {
background-color: #ddd;
height: 10px;
position: relative;
width: 100%;
cursor: pointer;
}
#progressBar:before {
background-color: #007bff;
content: "";
height: 100%;
left: 0;
position: absolute;
top: 0;
transition: width 0.1s ease-in-out;
width: 0%;
}
#progressBar:hover:before {
background-color: #0062cc;
}
#progressBar.dragging:before {
transition: none;
}
</style>
</head>
<body>
<div id="progressBar"></div>
<script>
var progressBar = document.getElementById('progressBar');
progressBar.addEventListener('mousedown', function(e) {
progressBar.classList.add('dragging');
updateProgressBar(e);
});
document.addEventListener('mousemove', function(e) {
if(progressBar.classList.contains('dragging')) {
updateProgressBar(e);
}
});
document.addEventListener('mouseup', function(e) {
progressBar.classList.remove('dragging');
});
function updateProgressBar(e) {
var progressBarWidth = progressBar.offsetWidth;
var progress = (e.clientX - progressBar.offsetLeft) / progressBarWidth * 100;
progressBar.querySelector('before').style.width = progress + '%';
}
</script>
</body>
</html>
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)