<div style="height: 370px; width: 400px; padding: 20px 20px; float: left; background-color: blue; box-sizing: border-box;"> <label sytle="font-size: 17px; letter-spacing: 3px;">等额本金</label> <div id="equalPrincipal_outstr" sytle="padding:0 0 20px 0;"></div> </div> {% if equalMoney_outstr != '' %} <script type="text/javascript"> var equalMoney_outstr_box = document.getElementById("equalMoney_outstr"); equalMoney_outstr_box.value = "{{equalMoney_outstr}}"; var equalPrincipal_outstr_box = document.getElementById("equalPrincipal_outstr"); equalPrincipal_outstr_box.value = "{{equalPrincipal_outstr}}"; </script> {% endif %}
时间: 2024-02-14 14:06:05 浏览: 23
这是一段HTML代码,其中包含一个div元素和一个label元素,背景颜色为蓝色,高度为370像素,宽度为400像素,内边距为20像素。在div元素内部还有一个id为equalPrincipal_outstr的元素,它的内容会动态生成。代码的最后还包含一段条件语句,如果equalMoney_outstr不为空,则会将其赋值给equalMoney_outstr_box和equalPrincipal_outstr_box两个元素的value属性。
相关问题
* { 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>实现拖拽进度条,在后面显示百分比并且保留两位小数
好的,可以使用 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()` 方法将百分比值保留两位小数。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>小精灵转呀转~</title> <style> * { list-style: none; margin: 0; padding: 0; } .box2 { width: 260px; height: 190px; margin: 100px auto; /* background-color: skyblue; */ } .box2 li { float: left; width: 24px; height: 24px; background-color: pink; margin: 10px 0 30px 30px; background: url(qb.png) no-repeat; } </style> </head> <body> <div class="box2"> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> <script> var change = document.querySelectorAll('li'); for (var i = 0; i < change.length; i++) { var index = i * 44; change[i].style.backgroundPosition = '0 -' + index + 'px'; } </script> </body> </html>用其他方法实现这个效果,至少三种
这段 HTML + CSS + JavaScript 代码实现的效果是将一张包含了多个小图片的图片作为背景,然后通过 JavaScript 代码实现将每个小图片的位置进行调整,从而实现一个转盘的效果。
下面是三种用其他方法实现这个效果的方式:
1. 用 CSS3 动画实现转盘效果
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>小精灵转呀转~</title>
<style>
* {
list-style: none;
margin: 0;
padding: 0;
}
.box2 {
width: 260px;
height: 190px;
margin: 100px auto;
position: relative;
}
.box2 ul {
position: absolute;
top: 0;
left: 0;
animation: rotate 5s linear infinite;
}
.box2 li {
width: 24px;
height: 24px;
background-color: pink;
background: url(qb.png) no-repeat;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="box2">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>
```
2. 用 Canvas 实现转盘效果
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>小精灵转呀转~</title>
<style>
* {
list-style: none;
margin: 0;
padding: 0;
}
.box2 {
width: 260px;
height: 190px;
margin: 100px auto;
position: relative;
}
.box2 canvas {
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div class="box2">
<canvas id="canvas" width="260" height="190"></canvas>
</div>
<script>
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var img = new Image();
img.src = 'qb.png';
img.onload = function() {
var count = 0;
setInterval(function() {
count += 44;
if (count >= 528) {
count = 0;
}
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(img, 0, count, 24, 24, 118, 82, 24, 24);
}, 100);
}
</script>
</body>
</html>
```
3. 用 SVG 实现转盘效果
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>小精灵转呀转~</title>
<style>
* {
list-style: none;
margin: 0;
padding: 0;
}
.box2 {
width: 260px;
height: 190px;
margin: 100px auto;
position: relative;
}
.box2 svg {
position: absolute;
top: 0;
left: 0;
transform-origin: 50% 50%;
animation: rotate 5s linear infinite;
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="box2">
<svg viewBox="0 0 24 528" width="24" height="528">
<use xlink:href="#icon"></use>
</svg>
<svg style="display: none;">
<symbol id="icon">
<image href="qb.png" width="24" height="528"></image>
</symbol>
</svg>
</div>
</body>
</html>
```
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.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)
![txt](https://img-home.csdnimg.cn/images/20210720083642.png)
![](https://img-home.csdnimg.cn/images/20210720083646.png)