<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>动画排序</title> </head> <style> *{ margin: 0; padding: 0; } .div1 { display: flex; align-items: flex-end; } .div11 { display: flex; align-items: flex-end; width: 60px; height: 60px; margin: 12px; background-color: green; } .div11 input { border: 0; background-color: green; width: 60px; height: 25px; color: aliceblue; text-align: center; font-size: 15px; } .div11 button { width: 60px; height: 30px; background-color: #008000; color: aliceblue; } </style> <body> <div class="div1" id="div1"> <div class="div11" style="margin-left: 30px;"><input type="text" id="4"></div> <div class="div11"><input type="text"></div> <div class="div11"><input type="text"></div> <div class="div11"><input type="text"></div> <div class="div11"><input type="text"></div> <div class="div11"><input type="text"></div> <div class="div11"><input type="text"></div> <div class="div11" style="margin-right: 30px;"><input type="text"></div> <div class="div11" style="height: 30px;"><button>开始排序</button></div> </div> <script> </script> </body> </html>中根据文本框中数字使高度产生变化,并实现动画排序
时间: 2023-08-14 08:51:08 浏览: 165
您可以使用JavaScript来实现根据文本框中的数字改变高度,并实现动画排序。首先,您需要为按钮添加一个点击事件处理程序,当点击按钮时,触发排序动画。然后,您可以使用JavaScript获取文本框中的数字,并将其转换为高度值。最后,您可以使用CSS过渡效果或JavaScript动画库来实现排序动画。
以下是一个示例的JavaScript代码,可以实现您的需求:
```javascript
// 获取文本框和按钮元素
var inputs = document.querySelectorAll('.div11 input');
var button = document.querySelector('.div11 button');
// 为按钮添加点击事件处理程序
button.addEventListener('click', function() {
// 存储数字和对应的高度值
var numbers = [];
// 遍历所有文本框,获取数字并转换为高度值
inputs.forEach(function(input) {
var number = parseInt(input.value);
var height = number * 10; // 根据需求自定义高度转换规则
numbers.push({ number: number, height: height });
});
// 根据数字进行升序排序
numbers.sort(function(a, b) {
return a.number - b.number;
});
// 更新文本框的高度值,并添加过渡效果或动画
numbers.forEach(function(item, index) {
inputs[index].style.height = item.height + 'px';
});
});
```
通过将此JavaScript代码添加到您的HTML文件中的`<script>`标签内,即可实现在点击按钮时,根据文本框中的数字改变高度,并实现动画排序效果。
请注意,上述代码仅为示例,您可以根据自己的需求进行修改和优化。此外,还可以使用CSS过渡效果或JavaScript动画库来实现更复杂的动画效果。
阅读全文