* { margin: 0; padding: 0; } .box { width: 500px; height: 30px; margin: 200px auto; } .big { width: 400px; height: 100%; background-color: blue; position: relative; box-sizing: border-box; float: left; } .small { width: 0; height: 100%; background-color: deeppink; } </style> </head> <body> <div class="box"> <div class="big"> <div class="small"></div> </div> <span>0%</span> </div>实现拖拽进度条，在后面显示百分比并且保留两位小数

时间: 2024-02-16 08:08:44 浏览: 30

好的，可以使用 JavaScript 和 CSS 来实现拖拽进度条和显示百分比。以下是一个简单的实现： HTML 代码： ```html <div class="box"> <div class="big"> <div class="small"></div> </div> <span id="percent">0%</span> </div> ``` CSS 代码： ```css * { margin: 0; padding: 0; } .box { width: 500px; height: 30px; margin: 200px auto; } .big { width: 400px; height: 100%; background-color: blue; position: relative; box-sizing: border-box; float: left; } .small { width: 0; height: 100%; background-color: deeppink; position: absolute; top: 0; left: 0; z-index: 1; } ``` JavaScript 代码： ```javascript const box = document.querySelector('.box'); const big = document.querySelector('.big'); const small = document.querySelector('.small'); const percent = document.querySelector('#percent'); let isDragging = false; const updatePercent = () => { const percentValue = (small.clientWidth / big.clientWidth) * 100; percent.textContent = percentValue.toFixed(2) + '%'; }; small.addEventListener('mousedown', () => { isDragging = true; }); document.addEventListener('mousemove', e => { if (isDragging) { const x = e.clientX - box.offsetLeft - (small.clientWidth / 2); const maxX = big.clientWidth - small.clientWidth; if (x < 0) { small.style.left = '0'; } else if (x > maxX) { small.style.left = maxX + 'px'; } else { small.style.left = x + 'px'; } updatePercent(); } }); document.addEventListener('mouseup', () => { isDragging = false; }); ``` 首先，我们在 HTML 中创建了一个包含一个大的蓝色块和一个小的粉色块的进度条。我们还添加了一个用于显示百分比的 `<span>` 元素。然后，我们使用 CSS 来定义样式。我们将 `.small` 元素定位为绝对位置，使其可以在 `.big` 元素内部移动。我们还将其 `z-index` 属性设置为 1，以确保它显示在 `.big` 元素的顶部。最后，我们使用 JavaScript 来实现拖拽功能和百分比更新。我们添加了 `mousedown`、`mousemove` 和 `mouseup` 事件监听器来检测鼠标拖拽操作，并更新小块的位置和百分比显示。我们还使用 `toFixed()` 方法将百分比值保留两位小数。

相关推荐

详解盒模型大小取决于它的padding，margin，border数值

CSS入门教程:计算CSS盒模型宽和高

关于css中margin的值和垂直外边距重叠问题

左邊預留200px出來#main { height: 500px; overflow-y: scroll; max-width: 100%; margin: auto; padding: 20px; background-color: #fff; box-shadow: 0 2px 4px rgba(0,0,0,.1); position: left; top: 0; right: 0; left: auto; }

請你每一條幫我注解#main { height: 500px; /*设定主体内容高度*/ overflow-y: scroll; /*添加滚动条*/ max-width: 1120px; margin: auto; padding: 20px; background-color: #fff; box-shadow: 0 2px 4px rgba(0,0,0,.1); position: fixed; top: 0; left: 210px; }

左邊我需要留出210px#main { height: 500px; overflow-y: scroll; max-width: 100%; margin: auto; padding: 20px; background-color: #fff; box-shadow: 0 2px 4px rgba(0,0,0,.1); position: fixed; top: 0; right: 0; }

#main { height: 500px; overflow-y: scroll; max-width: 100%; margin: auto; padding: 20px; background-color: #fff; box-shadow: 0 2px 4px rgba(0,0,0,.1); position: fixed; top: 0; left: calc(50% - 430px); }

.box{ padding-top: 200px; width: 800px; height: 700px; margin: 20px auto; background: url("../img/286e6fe4584ac69a83f578bd1d10adb.jpg") 0 0 no-repeat; background-size: 800px 700px; } 怎么让这串css样式中的背景图片向下移动

我需要靠右靠齊#main { height: 500px; overflow-y: scroll; max-width: 100%; margin: auto; padding: 20px; background-color: #fff; box-shadow: 0 2px 4px rgba(0,0,0,.1); position: fixed; top: 0; left: calc(50% - 420px); }

最新推荐

中文翻译Introduction to Linear Algebra, 5th Edition 2.1节

管理建模和仿真的文件

识别MATLAB微分方程求解中的混沌行为：分析非线性方程混沌行为的实用技巧

physon如何做ERP系统

zigbee-cluster-library-specification

"互动学习：行动中的多样性与论文攻读经历"

探索MATLAB微分方程求解中的分岔分析：揭示方程动态行为的秘密

ic验证工作中如何在平台中加入发数的总数？

JSBSim Reference Manual

关系数据表示学习

請你每一條幫我注解#main { height: 500px; /设定主体内容高度/ overflow-y: scroll; /添加滚动条/ max-width: 1120px; margin: auto; padding: 20px; background-color: #fff; box-shadow: 0 2px 4px rgba(0,0,0,.1); position: fixed; top: 0; left: 210px; }