一站式网上办事大厅
嘿，大家好！今天咱们来聊一聊“网上办事大厅”和“排行榜”这两个东西。听起来是不是有点高科技？其实吧，它们都是基于网页技术实现的，只要你懂点编程，就能自己动手做出来。
首先，我得说一下什么是“网上办事大厅”。简单来说，就是用户可以在网上完成一些原本需要去现场办理的事情，比如申请证件、查询信息、提交材料等等。现在很多人在政府部门或者企业里都用这个系统，方便又高效。
然后是“排行榜”，这个大家应该不陌生吧？比如游戏里的排名、学校里的成绩排名、或者是电商网站上的销量榜。排行榜的核心就是数据展示，而且通常还需要实时更新或者根据某些条件排序。
那今天我们就来一起做个简单的例子，看看怎么用代码实现一个网上办事大厅和一个排行榜。虽然只是个基础版，但你要是能掌握这个思路，以后再扩展起来就容易多了。
第一步：搭建网页结构
我们先从最基础的开始。网页结构一般用HTML写，所以我们要先创建一个基本的HTML页面。这里我会用HTML5的结构，这样兼容性更好，也更规范。
首先，新建一个文件，比如叫index.html，然后在里面写上下面这些代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>网上办事大厅与排行榜</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>网上办事大厅</h1>
<form id="form">
<label>姓名：<input type="text" name="name"></label>
<label>电话：<input type="text" name="phone"></label>
<button type="submit">提交申请</button>
</form>
<h2>排行榜</h2>
<ul id="ranking"></ul>
</div>
<script src="script.js"></script>
</body>
</html>这就是一个基本的网页结构了。里面有一个表单，用于提交用户的姓名和电话，还有一个列表用来显示排行榜。
第二步：添加样式（CSS）
接下来我们给这个网页加点样式，让它看起来更美观。新建一个style.css文件，然后写以下内容：
.container {
width: 600px;
margin: 0 auto;
padding: 20px;
border: 1px solid #ccc;
background-color: #f9f9f9;
}
form {
display: flex;
flex-direction: column;
}
form label {
margin-top: 10px;
}
form input {
padding: 5px;
}
#ranking {
list-style-type: none;
padding-left: 0;
}
#ranking li {
padding: 10px;
border-bottom: 1px solid #eee;
}这段CSS代码会让网页看起来更整洁，表单和排行榜都有一定的格式，不会太乱。
第三步：添加交互逻辑（JavaScript）
现在最关键的部分来了，就是用JavaScript来处理表单提交，并且更新排行榜。新建一个script.js文件，然后写下面的代码：
document.getElementById('form').addEventListener('submit', function(e) {
e.preventDefault(); // 阻止表单默认提交行为
const name = document.querySelector('input[name="name"]').value;
const phone = document.querySelector('input[name="phone"]').value;
if (name && phone) {
addToList(name, phone);
this.reset(); // 提交后清空表单
} else {
alert('请填写完整信息');
}
});
function addToList(name, phone) {
const li = document.createElement('li');
li.textContent = `${name} - ${phone}`;
document.getElementById('ranking').appendChild(li);
}这段代码的作用是，当用户点击“提交申请”按钮时，会获取输入框中的姓名和电话，然后把这些信息添加到排行榜中。同时还会清空表单，让用户可以继续提交。
不过，这只是一个静态的排行榜，没有排序功能。如果我们要让排行榜按某种方式排序，比如按字母顺序或者时间顺序，就需要做一些额外的处理。
第四步：实现排行榜排序功能
为了能让排行榜有排序功能，我们可以再加一个按钮，让用户可以选择按姓名或电话排序。修改一下script.js文件：
document.getElementById('form').addEventListener('submit', function(e) {
e.preventDefault();
const name = document.querySelector('input[name="name"]').value;
const phone = document.querySelector('input[name="phone"]').value;
if (name && phone) {
addToList(name, phone);
this.reset();
} else {
alert('请填写完整信息');
}
});
function addToList(name, phone) {
const li = document.createElement('li');
li.textContent = `${name} - ${phone}`;
document.getElementById('ranking').appendChild(li);
}
// 添加排序功能
function sortList(order) {
const list = document.getElementById('ranking');
const items = Array.from(list.children);
items.sort((a, b) => {
const aText = a.textContent;
const bText = b.textContent;
if (order === 'name') {
return aText.localeCompare(bText, 'zh');
} else if (order === 'phone') {
const aPhone = aText.split(' - ')[1];
const bPhone = bText.split(' - ')[1];
return aPhone.localeCompare(bPhone);
}
return 0;
});
// 清空并重新添加排序后的元素
list.innerHTML = '';
items.forEach(item => list.appendChild(item));
}
// 添加排序按钮
const sortButton = document.createElement('button');
sortButton.textContent = '按姓名排序';
sortButton.onclick = () => sortList('name');
document.body.appendChild(sortButton);这段代码新增了一个排序按钮，点击后会按照姓名进行排序。如果你还想按电话排序，也可以再加一个按钮，调用sortList('phone')。
这样，你就有了一个可以动态添加和排序的排行榜了。虽然这只是个简单的例子，但它展示了前端开发的一些基本概念，比如事件监听、DOM操作、数组排序等。
第五步：保存数据（可选）
现在的问题是，每次刷新页面后，排行榜就会被清空，数据就没了。如果你希望数据能够持久化，可以考虑使用localStorage来保存数据。
修改一下script.js文件，加入保存和加载数据的功能：
document.getElementById('form').addEventListener('submit', function(e) {
e.preventDefault();
const name = document.querySelector('input[name="name"]').value;
const phone = document.querySelector('input[name="phone"]').value;
if (name && phone) {
addToList(name, phone);
saveData();
this.reset();
} else {
alert('请填写完整信息');
}
});
function addToList(name, phone) {
const li = document.createElement('li');
li.textContent = `${name} - ${phone}`;
document.getElementById('ranking').appendChild(li);
}
function sortList(order) {
const list = document.getElementById('ranking');
const items = Array.from(list.children);
items.sort((a, b) => {
const aText = a.textContent;
const bText = b.textContent;
if (order === 'name') {
return aText.localeCompare(bText, 'zh');
} else if (order === 'phone') {
const aPhone = aText.split(' - ')[1];
const bPhone = bText.split(' - ')[1];
return aPhone.localeCompare(bPhone);
}
return 0;
});
list.innerHTML = '';
items.forEach(item => list.appendChild(item));
}
function saveData() {
const list = document.getElementById('ranking');
const data = Array.from(list.children).map(item => item.textContent);
localStorage.setItem('rankingData', JSON.stringify(data));
}
function loadData() {
const data = JSON.parse(localStorage.getItem('rankingData')) || [];
const list = document.getElementById('ranking');
list.innerHTML = '';
data.forEach(item => {
const li = document.createElement('li');
li.textContent = item;
list.appendChild(li);
});
}
// 页面加载时加载数据
window.onload = loadData;这样，即使刷新页面，排行榜的数据也不会丢失了。这就是一个完整的网上办事大厅和排行榜的实现。
总结一下
今天我们用HTML、CSS和JavaScript实现了一个简单的网上办事大厅和排行榜功能。通过这个例子，你可以看到前端开发的基本流程：创建页面结构、添加样式、处理用户交互、实现动态功能，甚至还能保存数据。
当然，这只是个入门级别的例子，实际项目中可能需要更多功能，比如数据库支持、用户登录、权限管理、数据验证等等。但不管怎样，掌握这些基础知识是非常重要的。
如果你对前端开发感兴趣，不妨多尝试动手实践。代码不是最难的，难的是理解为什么这样写，以及如何优化它。希望这篇文章对你有帮助，祝你学习愉快！
