1：返回顶部
设置了当前界面距离顶部大于20px时返回顶部按钮显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>返回顶部</title>
<style>
body{
height: 3000px;
}
#back-to-top {
position: fixed;
bottom: 20px;
right: 20px;
background-color: #007bff;
color: #fff;
border: none;
padding: 10px 20px;
cursor: pointer;
display: none;
}
</style>
</head>
<body>
<button id="back-to-top">返回顶部</button>
<script>
var button = document.getElementById("back-to-top");
window.addEventListener("scroll", function() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
button.style.display = "block";
} else {
button.style.display = "none";
}
});
button.addEventListener("click", function() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
});
</script>
</body>
</html>
2：自动轮播
实现效果：
需要注意的点：光标在图片上时图片不轮播，切换图片时对应圆点变色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.slideshow-container {
position: relative;
max-width: 800px;
margin: auto;
z-index: 1;
}
.slideshow-container .slide {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 400px;
}
.slideshow-container .slide img {
width: 100%;
height: 100%;
}
.slideshow-container .slide .caption {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 10px;
}
.slideshow-container .slide .caption p {
margin: 0;
}
.slideshow-container .dot {
position: relative;
top: 370px;
left: 330px;
display: inline-block;
width: 15px;
height: 15px;
border-radius: 50%;
background-color: #bbb;
margin: 0 20px;
cursor: pointer;
z-index: 3;
}
.slideshow-container .dot.active {
background-color: #000000;
}
.slideshow-container .arrow {
position: absolute;
top: 190px;
width: 50px;
height: 50px;
background-color: rgba(3, 3, 3, 0.5);
color: #fff;
text-align: center;
line-height: 55px;
}
.slideshow-container .arrow.left {
left: 0px;
}
.slideshow-container .arrow.right {
right: 0px;
}
</style>
</head>
<body>
<div class="slideshow-container">
<div class="slide">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/5ff9903ddf81be177622a2bd8e65338a.jpg?thumb=1&w=1839&h=690&f=webp&q=90" alt="Image 1">
<div class="caption">
</div>
</div>
<div class="slide">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/fb7a27a273816b4772fc29c67e6630ec.jpg?thumb=1&w=1839&h=690&f=webp&q=90" alt="Image 2">
<div class="caption">
</div>
</div>
<div class="slide">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/3d0638902de12d2f25196af0ea17b1d3.jpg?thumb=1&w=1839&h=690&f=webp&q=90" alt="Image 3">
<div class="caption">
</div>
</div>
<div class="arrow left"><img src="图片/向左箭头.png" width="18px"></div>
<div class="arrow right"><img src="图片/向右箭头.png" width="18px"></div>
<div class="dots">
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
</div>
<script>
var slides = document.getElementsByClassName('slide');
var dots = document.getElementsByClassName('dot');
var currentIndex = 0;
var autoSlideInterval;
function showSlide(index) {
for (var i = 0; i < slides.length; i++) {
slides[i].style.display = 'none';
}
for (var i = 0; i < dots.length; i++) {
dots[i].classList.remove('active');
}
slides[index].style.display = 'block';
dots[index].classList.add('active');
var caption = slides[index].querySelector('.caption');
caption.style.bottom = '-' + caption.offsetHeight + 'px';
caption.style.opacity = '0';
caption.style.transition = 'bottom 0.5s, opacity 0.5s';
setTimeout(function() {
caption.style.bottom = '0';
caption.style.opacity = '1';
}, 100);
}
function nextSlide() {
currentIndex++;
if (currentIndex >= slides.length) {
currentIndex = 0;
}
showSlide(currentIndex);
}
function previousSlide() {
currentIndex--;
if (currentIndex < 0) {
currentIndex = slides.length - 1;
}
showSlide(currentIndex);
}
function startAutoSlide() {
autoSlideInterval = setInterval(nextSlide, 3000);
}
function stopAutoSlide() {
clearInterval(autoSlideInterval);
}
function setupEventListeners() {
var slideshowContainer = document.querySelector('.slideshow-container');
var arrows = slideshowContainer.querySelectorAll('.arrow');
slideshowContainer.addEventListener('mouseover', function() {
stopAutoSlide();
for (var i = 0; i < arrows.length; i++) {
arrows[i].style.display = 'block';
}
});
slideshowContainer.addEventListener('mouseout', function() {
startAutoSlide();
for (var i = 0; i < arrows.length; i++) {
arrows[i].style.display = 'none';
}
});
for (var i = 0; i < dots.length; i++) {
dots[i].addEventListener('click', function() {
var dotIndex = Array.prototype.indexOf.call(dots, this);
currentIndex = dotIndex;
showSlide(currentIndex);
});
}
for (var i = 0; i < arrows.length; i++) {
arrows[i].addEventListener('click', function() {
if (this.classList.contains('left')) {
previousSlide();
} else if (this.classList.contains('right')) {
nextSlide();
}
});
}
}
showSlide(currentIndex);
startAutoSlide();
setupEventListeners();
</script>
</body>
</html>3：瀑布流布局
该demo会将多个图片纵向紧密排列，可以根据界面的宽度自动改变列数
效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container{
position: relative;
}
.item{
width: 320px;
height: auto;
position: absolute;
padding-left: 50px;
}
.item img{
width: 100%;
}
</style>
</head>
<body>
<div class="container" id="con">
<div class="item">
<img src="图/小米图1.webp" alt="">
</div>
<div class="item">
<img src="图/小米图5.webp" alt="">
</div>
<div class="item">
<img src="图/小米图3.webp" alt="">
</div>
<div class="item">
<img src="图/小米图4.webp" alt="">
</div>
<div class="item">
<img src="图/小米图2.webp" alt="">
</div>
<div class="item">
<img src="图/小米图5.webp" alt="">
</div>
<div class="item">
<img src="图/小米图1.webp" alt="">
</div>
<div class="item">
<img src="图/小米图3.webp" alt="">
</div>
<div class="item">
<img src="图/小米图6.webp" alt="">
</div>
<div class="item">
<img src="图/小米图2.webp" alt="">
</div>
<div class="item">
<img src="图/小米图7.webp" alt="">
</div>
<div class="item">
<img src="图/小米图3.webp" alt="">
</div>
<div class="item">
<img src="图/小米图1.webp" alt="">
</div>
<div class="item">
<img src="图/小米图5.webp" alt="">
</div>
<div class="item">
<img src="图/小米图7.webp" alt="">
</div>
<div class="item">
<img src="图/小米图2.webp" alt="">
</div>
<div class="item">
<img src="图/小米图4.webp" alt="">
</div>
<div class="item">
<img src="图/小米图3.webp" alt="">
</div>
<div class="item">
<img src="图/小米图4.webp" alt="">
</div>
<div class="item">
<img src="图/小米图5.webp" alt="">
</div>
<div class="item">
<img src="图/小米图7.webp" alt="">
</div>
<div class="item">
<img src="图/小米图1.webp" alt="">
</div>
<div class="item">
<img src="图/小米图6.webp" alt="">
</div>
<div class="item">
<img src="图/小米图2.webp" alt="">
</div>
<div class="item">
<img src="图/小米图2.webp" alt="">
</div>
<div class="item">
<img src="图/小米图2.webp" alt="">
</div>
<div class="item">
<img src="图/小米图1.webp" alt="">
</div>
<div class="item">
<img src="图/小米图5.webp" alt="">
</div>
<div class="item">
<img src="图/小米图2.webp" alt="">
</div>
<div class="item">
<img src="图/小米图6.webp" alt="">
</div>
<div class="item">
<img src="图/小米图4.webp" alt="">
</div>
<div class="item">
<img src="图/小米图2.webp" alt="">
</div>
<div class="item">
<img src="图/小米图5.webp" alt="">
</div>
<div class="item">
<img src="图/小米图1.webp" alt="">
</div>
<div class="item">
<img src="图/小米图3.webp" alt="">
</div>
<div class="item">
<img src="图/小米图6.webp" alt="">
</div>
<div class="item">
<img src="图/小米图2.webp" alt="">
</div>
<div class="item">
<img src="图/小米图2.webp" alt="">
</div>
<div class="item">
<img src="图/小米图3.webp" alt="">
</div>
<div class="item">
<img src="图/小米图1.webp" alt="">
</div>
<div class="item">
<img src="图/小米图2.webp" alt="">
</div>
</div>
<script>
//当页面加载的时候调用
window.onload = function(){
//页面初始化调用
waterFall()
//每次页面改变大小调用
window.onresize = waterFall
}
function waterFall(){
// 1. 设置container盒子的宽度
// 注意：浏览器的可视区域的宽度 / 一个item元素的宽度 = 一行的排列的元素的个数
let container = document.getElementById("con")
let item = document.getElementsByClassName("item")
//获取元素的宽度(含border，padding)
let width = item[0].offsetWidth
//计算出浏览器窗口的宽度
let clientWidth = document.documentElement.clientWidth;
//计算出应该放几列（向下取整）
let columnCount = Math.floor(clientWidth / width)
//设置容器（父盒子）的宽度
container.style.width = columnCount*width+"px"
// 2.设置每一个item元素的排列位置
// 第一行整体的top值都是0 后面的依次找上一行高度最小的容器，在它下面进行排列
let hrr = []
for(let i= 0 ;i<item.length;i++){
//定位第一行的图片
if(i<columnCount){
item[i].style.top = "0px"
item[i].style.left = i* width+"px"
hrr.push(item[i].offsetHeight)
}else{
//第一行之后的
//选择总高度最小的列
let min = Math.min(...hrr)
let index = hrr.indexOf(min)
//将每个元素定位到当前总高度最小的列下
item[i].style.top = min+"px"
item[i].style.left = index * width+"px"
//当前定位的元素加入该列
hrr[index] += item[i].offsetHeight
}
}
}
</script>
</body>
</html>4：时钟
需要注意上面的时间与北京时间同步，注意控制指针转动的角度
实现效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
/* 刻度时钟 */
.time-clock{
width: 300px;
height: 300px;
border: 5px solid yellowgreen;
border-radius: 50%;
margin: 50px;
position: relative;
left: 560px;
}
/* 表盘 */
.time-clock ul{
width: 100%;
height: 100%;
position: relative;
}
.time-clock ul li{
width: 2px;
height: 8px;
background: yellowgreen;
position: absolute;
left: 50%;
top:0;
transform-origin:center 150px ;
}
/* .time-clock ul li:nth-child(2){
transform: rotate(6deg);
transform-origin:center 150px ;
}
.time-clock ul li:nth-child(3){
transform: rotate(12deg);
transform-origin:center 150px ;
} */
#hour {
width: 6px;
height: 50px;
background: blue;
position: absolute;
left: 50%;
top: 50%;
margin:-50px 0 0 -3px;
transform-origin:center bottom ;
}
#minu{
width: 4px;
height: 80px;
background: blueviolet;
position: absolute;
left: 50%;
top: 50%;
margin:-80px 0 0 -2px;
transform-origin:center bottom;
}
#second{
width: 2px;
height: 120px;
background: red;
position: absolute;
left: 50%;
top: 50%;
margin:-120px 0 0 -1px;
transform-origin:center bottom;
}
#ball{
width: 20px;
height: 20px;
background: black;
position: absolute;
left: 50%;
top:50%;
border-radius: 50%;
transform:translate(-50%,-50%);
}
/* —————————————————————————————————————————————— */
/* 电子时钟 */
#main{
width: 600px;
height: 300px;
line-height: 300px;
margin: 50px 180px 0 500px;
text-align: center;
background-color: black;
border-radius: 70px;
box-shadow: -10px -10px 20px rgba(255,255,255,.5),
10px 10px 20px rgba(70,70,70,.12);
}
#clock{
font-size: 60px;
color: white;
letter-spacing: 25px;
}
</style>
</head>
<body>
<!-- 刻度时钟 -->
<div class="time-clock">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div id="hour"></div>
<div id="minu"></div>
<div id="second"></div>
<div id="ball"></div>
</div>
<!-- 电子时钟 -->
<div id="main">
<div id="clock">12:00:00</div>
</div>
<!-- —————————————————————————————————— -->
<script>
//刻度时钟
var ul =document.querySelector(`ul`);
var hour =document.querySelector(`#hour`);
var minu =document.querySelector(`#minu`);
var second =document.querySelector(`#second`);
//这里别忘加#，因为是id
for(var i=0;i<60;i++){
var li = document.createElement(`li`);
li.style.transform = `rotate(`+i*6+`deg)`;
if(i%5==0){
li.style.height=`18px`
}
ul.appendChild(li);
}
//定时器
function run(){
var date = new Date();
var iH = date.getHours();
var iM = date.getMinutes();
var iS = date.getSeconds();
hour.style.transform = `rotate(`+(iH*30+iM/2)+`deg)`
minu.style.transform = `rotate(`+iM*6+`deg)`
second.style.transform = `rotate(`+iS*6+`deg)`
}
run();
setInterval(run,1000);
//————————————————————————————————————
//电子时钟
let oClock=document.querySelector(`#clock`);
let addZero = (num) =>{
if(num>=10){
return num;
}else{
return `0${num}`;
}
}
let updateTime=()=>{
let now = new Date();
let time = addZero(now.getHours())+":"+
addZero(now.getMinutes())+":"+
addZero(now.getSeconds());
oClock.innerText = time;
}
updateTime();
setInterval(updateTime,1000);
</script>
</body>
</html>5：选项卡
自动轮播的精简版
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.tab {
margin-left: 500px;
width: 600px;
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
}
.tab button:hover {
background-color: #ddd;
}
.tab button.active {
background-color: #ccc;
}
.tabcontent {
margin-left: 500px;
width: 580px;
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}
</style>
</head>
<body>
<div class="tab-container">
<div class="tab">
<button class="tablinks" onclick="openGame(event, 'lol')">英雄联盟</button>
<button class="tablinks" onclick="openGame(event, 'dota')">DOTA</button>
<button class="tablinks" onclick="openGame(event, 'feng')">风暴英雄</button>
<button class="tablinks" onclick="openGame(event, '300hero')">300英雄</button>
</div>
<div id="lol" class="tabcontent">
<h3>英雄联盟</h3>
<p>英雄联盟是一款竞技游戏，由Riot Games开发。游戏中玩家控制一个称为“英雄”的角色，与队友合作对抗敌人。</p>
</div>
<div id="dota" class="tabcontent">
<h3>DOTA</h3>
<p>DOTA是一款MOBA游戏，由Valve开发。玩家控制一个英雄，与队友合作对抗敌人并摧毁对方的主基地。</p>
</div>
<div id="feng" class="tabcontent">
<h3>风暴英雄</h3>
<p>风暴英雄是一款MOBA游戏，由Valve开发。玩家控制一个英雄，与队友合作对抗敌人并摧毁对方的主基地。</p>
</div>
<div id="300hero" class="tabcontent">
<h3>300英雄</h3>
<p>300英雄是一款MOBA游戏，以动漫角色为主题。玩家可以选择不同的动漫角色进行战斗。</p>
</div>
</div>
<script>
document.getElementsByClassName("tabcontent")[0].style.display = "block";
function openGame(evt, gameName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
document.getElementById(gameName).style.display = "block";
}
</script>
</body>
</html>6：发送验证码
本demo需要注意验证码的倒计时结束会重置按钮
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
margin-top: 300px;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 50px;
}
input[type="text"] {
width: 200px;
height: 30px;
margin-bottom: 10px;
}
button {
width: 150px;
height: 30px;
}
</style>
</head>
<body>
<div class="container">
<input type="text" id="ver" placeholder="请输入验证码">
<button id="send" onclick="sendVer()">发送验证码</button>
<button id="submit" onclick="submitForm()" disabled>提交</button>
</div>
<script>
var send = document.getElementById('send')
var submit = document.getElementById('submit')
var verInput = document.getElementById('ver')
function sendVer() {
send.disabled = true;
send.innerText = '60秒后重试'
alert('验证码是0505')
var count = 60;
var countdown = setInterval(function() {
count--
send.innerText = count + '秒后重试'
if (count <= 0) {
clearInterval(countdown)
send.disabled = false
send.innerText = '发送验证码'
}
}, 1000)
submit.disabled = false
}
function submitForm() {
var ver = verInput.value
if (ver === '0505') {
alert('验证码验证成功！')
}
else {
alert('验证码验证失败，请重新输入！')
}
}
</script>
</body>
</html>7：放大镜效果
需要注意要求放大的倍数，被放大部分的位置，光标应处在放大指示框的正中间，实际放大内容应与指示框内的内容一致
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>放大镜效果</title>
<style>
.container {
position: relative;
width: 500px;
}
.image {
width: 100%;
display: block;
}
.magnifier {
position: absolute;
width: 150px;
height: 150px;
border: 2px solid yellow;
display: none;
pointer-events: none;
}
.magnified {
position: absolute;
left: 510px;
top: 0;
width: 360px;
height: 360px;
border: 2px solid yellow;
background-size: 330%;
background-repeat: no-repeat;
display: none;
pointer-events: none;
}
</style>
</head>
<body>
<div class="container">
<img class="image" src="图/小米图2.webp" alt="Image">
<div class="magnifier"></div>
<div class="magnified"></div>
</div>
<script>
var container = document.querySelector(".container");
var magnifier = document.querySelector(".magnifier");
var magnified = document.querySelector(".magnified");
var image = document.querySelector(".image");
container.addEventListener("mousemove", function(e) {
var x = e.clientX - container.offsetLeft;
var y = e.clientY - container.offsetTop;
var mx = x - 75; // 150px / 2
var my = y - 75; // 150px / 2
magnifier.style.left = mx + "px";
magnifier.style.top = my + "px";
magnifier.style.display = "block";
var bgX = -mx * 2.4 ; // 150px / 2
var bgY = -my * 2.4; // 150px / 2
magnified.style.backgroundImage = "url('" + image.src + "')";
magnified.style.backgroundPosition = bgX + "px " + bgY + "px";
magnified.style.display = "block";
});
container.addEventListener("mouseleave", function() {
magnifier.style.display = "none";
magnified.style.display = "none";
});
</script>
</body>
</html>
8：随机点名
9：省市区三级联动
区县太多了，就没来得及做。。。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>省市区三级联动</title>
<style>
select {
padding: 10px;
font-size: 16px;
margin: 10px;
}
</style>
</head>
<body>
<select id="province" onchange="updateCities()">
<option value="">请选择省份</option>
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="广东">广东</option>
<!-- 其他省份 -->
</select>
<select id="city" onchange="updateDistricts()">
<option value="">请选择城市</option>
</select>
<select id="district">
<option value="">请选择区/县</option>
</select>
<script>
var cityData = {
"北京": ["东城区", "西城区", "朝阳区", "海淀区", "丰台区"],
"上海": ["黄浦区", "徐汇区", "长宁区", "静安区", "普陀区"],
"广东": ["广州市", "深圳市", "珠海市", "汕头市", "佛山市"]
// 其他省市数据
};
function updateCities() {
var province = document.getElementById("province").value;
var citySelect = document.getElementById("city");
citySelect.innerHTML = "<option value=''>请选择城市</option>";
if (province in cityData) {
cityData[province].forEach(function(city) {
var option = document.createElement("option");
option.value = city;
option.textContent = city;
citySelect.appendChild(option);
});
}
}
function updateDistricts() {
var city = document.getElementById("city").value;
var districtSelect = document.getElementById("district");
districtSelect.innerHTML = "<option value=''>请选择区/县</option>";
// 根据城市选择区/县数据，这里可以根据实际情况添加更多数据
}
</script>
</body>
</html>
10：班级表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>学生信息表</title>
<style>
table {
border-collapse: collapse;
width: 80%;
margin: 20px auto;
}
th, td {
border: 1px solid #000;
padding: 8px;
text-align: center;
}
th {
background-color: #f2f2f2;
}
tr:nth-child(odd) {
color: black;
background-color: white;
}
tr:nth-child(even) {
color: white;
background-color: black;
}
button {
padding: 5px 10px;
background-color: red;
color: white;
border: none;
cursor: pointer;
}
</style>
</head>
<body>
<table id="student-table">
<tr>
<th>学号</th>
<th>姓名</th>
<th>性别</th>
<th>二级学院</th>
<th>班级</th>
<th>专业</th>
<th>辅导员</th>
<th>操作</th>
</tr>
<tr>
<td>1</td>
<td>张三</td>
<td>男</td>
<td>计算机学院</td>
<td>1901班</td>
<td>计算机科学与技术</td>
<td>李老师</td>
<td><button onclick="deleteRow(this)">删除</button></td>
</tr>
<!-- 其他学生信息行 -->
</table>
<button onclick="showAddForm()">添加学生信息</button>
<script>
function deleteRow(button) {
var row = button.parentNode.parentNode;
if (confirm("确认删除该学生信息吗？")) {
row.parentNode.removeChild(row);
updateRowColors();
}
}
function updateRowColors() {
var table = document.getElementById("student-table");
var rows = table.getElementsByTagName("tr");
for (var i = 0; i < rows.length; i++) {
if (i % 2 === 0) {
rows[i].style.color = "white";
rows[i].style.backgroundColor = "black";
} else {
rows[i].style.color = "black";
rows[i].style.backgroundColor = "white";
}
}
}
function showAddForm() {
var form = prompt("请输入新学生的信息（学号,姓名,性别,二级学院,班级,专业,辅导员）");
if (form) {
var newStudent = form.split(",");
var table = document.getElementById("student-table");
var newRow = table.insertRow(-1);
for (var i = 0; i < newStudent.length; i++) {
var cell = newRow.insertCell(i);
cell.innerHTML = newStudent[i];
}
var deleteCell = newRow.insertCell(newStudent.length);
deleteCell.innerHTML = '<button onclick="deleteRow(this)">删除</button>';
updateRowColors();
}
}
</script>
</body>
</html>11和12：上周电脑崩了，重装了个系统，敲的代码全没了（/(ㄒoㄒ)/~~），还有两个有空会补上的
765
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
