可拖拽进度条

最新推荐文章于 2024-05-09 11:33:03 发布

HAI6545

最新推荐文章于 2024-05-09 11:33:03 发布

阅读量138

点赞数 1

分类专栏： JavaScript案例文章标签： javascript html css

本文链接：https://blog.csdn.net/HAI6545/article/details/122220381

版权

本文介绍如何使用JavaScript、HTML和CSS创建一个可拖动的进度条组件，通过监听鼠标事件来改变进度条的值，实现用户直接通过拖拽操作调整进度的功能。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
.big,.small{
    width: 300px;
    height: 30px;
}
.big{
    border:1px solid #000;
    margin: 50px auto;
}
.small{
    width: 0;
    background-color: hotpink;
}
span{
   position: absolute;
   left: 700px;
   top: 55px
}
</style>
<body>
<div class="big">
    <div class="small"></div>
   
</div>
<span>00</span>
</body>
<script>
// 给big绑定鼠标按下事件
var big = document.querySelector('.big');
var small = document.querySelector('.small');
big.onmousedown = function(){
    // 获取鼠标在big上的位置
    var x = window.event.offsetX
    // 将x设置给small的width
    small.style.width = x + 'px'
    // 计算百分比
    var percent = x / big.clientWidth * 100
    document.qu

最低0.47元/天解锁文章

HAI6545

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
可拖拽进度条

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><style>.big,.small{ width: 300px; height: 30px;}.big{ border:1px solid #000; margin: .
复制链接

扫一扫