js实现按价格排序,价格相等按时间排序怎么去实现呢，下面我就给大家写一个html文档代码，把JS加入到html里面做一个演示效果给大家看吧，图文结合的奥，大佬可以忽视，新手多学习学习
下面是代码段：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sort by Price and Time</title>
</head>
<body>
<h2>Product List</h2>
<ul id="product-list">
<!-- 商品列表将在这里动态插入 -->
</ul>
<button>Sort by Price and Time</button>
<script>
// 假设的商品数据
var products = [
{ name: 'Product A', price: 100, time: '2023-01-01T08:00:00Z' },
{ name: 'Product B', price: 100, time: '2023-01-01T07:00:00Z' },
{ name: 'Product C', price: 50, time: '2023-01-01T09:30:00Z' },
{ name: 'Product D', price: 150, time: '2023-01-01T10:00:00Z' }
];
// 显示商品列表
function displayProducts(products) {
const list = document.getElementById('product-list');
list.innerHTML = ''; // 清空现有列表
products.forEach(product => {
const item = document.createElement('li');
item.textContent = `${product.name} - $${product.price} - ${new Date(product.time).toLocaleString()}`;
list.appendChild(item);
});
}
// 排序函数
function sortByPriceAndTime() {
products.sort((a, b) => {
// 按价格排序
if (a.price !== b.price) {
return a.price - b.price;
}
// 如果价格相同，则按时间排序
return new Date(a.time) - new Date(b.time);
});
displayProducts(products);
}
// 首次加载时显示商品
displayProducts(products);
</script>
</body>
</html>
在这个例子中，我们定义了一个名为 products 的数组，用来表示商品列表。每个商品都是一个对象，包含 name（名称），price（价格）和 time（时间）属性。
displayProducts 函数用于将这个列表显示在 HTML 页面上。它首先清空当前的列表，然后遍历 products 数组，为每个商品创建一个列表项 (li) 并插入到页面上。
sortByPriceAndTime 函数首先根据价格对商品进行排序。如果两个商品的价格相同，它则会转而根据时间进行排序。排序完成后，它会调用 displayProducts 函数来更新页面上显示的列表。
最后，我们在页面加载时调用 displayProducts 函数来显示初始的商品列表，同时提供了一个按钮来触发排序操作。当用户点击按钮时，sortByPriceAndTime 函数会被调用，从而对列表进行排序并更新页面。
图文效果：
1、我们在本地创建个文件夹，然后新建一个1.html的网页文档
2、然后我们把代码粘贴进去
3、保存后打开1.html文档看下效果
| 
新库软件 