使用 html+css+js 写一个pv uv统计页面,要求页面布局优美,可以直观显示每个ip每天的访问次数,并按照访问次数降序显示,最好有优美的动画效果,配色精美,直接给出完整的案例,前端可以先用假数据
时间: 2023-02-08 11:13:03 浏览: 55
在完成这个任务之前,首先需要有一个能够记录用户访问信息的后端系统。在这里我只给出前端部分的代码。
HTML 代码:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PV UV统计</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<table>
<thead>
<tr>
<th>IP</th>
<th>日期</th>
<th>访问次数</th>
</tr>
</thead>
<tbody>
<tr>
<td>192.168.0.1</td>
<td>2020-08-01</td>
<td>10</td>
</tr>
<tr>
<td>192.168.0.2</td>
<td>2020-08-01</td>
<td>5</td>
</tr>
<tr>
<td>192.168.0.3</td>
<td>2020-08-01</td>
<td>20</td>
</tr>
<tr>
<td>192.168.0.4</td>
<td>2020-08-02</td>
<td>15</td>
</tr>
<tr>
<td>192.168.0.5</td>
<td>2020-08-02</td>
<td>30</td>
</tr>
</tbody>
</table>
<script src="main.js"></script>
</body>
</html>
```
CSS 代码:
```css
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
```
JavaScript 代码:
```javascript
const table = document.querySelector("table");
const rows = table.querySelectorAll("tbody tr");
const compare = (a, b) => {
const visitA = parseInt(a.querySelector("td:last-child").textContent);
const visitB = parseInt(b.querySelector("td:last-child").textContent);
return visitB - visitA;
}
rows.sort(compare);
rows.forEach((