引言
审美疲劳了，这样看起来还挺不错的，hetui，男人，说变心就变心😄
有一段代码直接在Z-Terminal取的，详见下面的文章，到底哪里能复用呢？
新版&旧版对比
技术栈
- 原生JS
- PHP （获取目录）
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Matrix 个人站点导航</title>
</head>
<?php
\$files = scandir(".");
\$block = [".", "..", ".htaccess", ".history", ".rar", "web.config", "index.php"]
?>
<style>
body {
background: linear-gradient(to right, #15253f, #d5e5f5, #15253f);
}
.main {
display: block;
position: absolute;
top: 5%;
bottom: 5%;
left: 15%;
right: 15%;
border-radius: 10px 10px 10px 10px;
background-color: #2e2e2e;
color: wheat;
box-shadow: 0px 0px 15px 5px rgba(46, 46, 46, 0.8);
overflow: hidden;
}
.f\_list {
position: absolute;
height: calc(100% - 86px);
width: 100%;
font-size: 15px;
overflow-y: auto;
}
.f\_list::-webkit-scrollbar {
width: 10px;
height: 10px;
}
.f\_list::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, .05);
border-radius: 10px;
-webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1);
}
.f\_list:hover::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, .2);
border-radius: 10px;
-webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1);
}
.f\_list::-webkit-scrollbar-thumb:hover {
background-color: rgba(0, 0, 0, .4);
-webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1);
}
.f\_list::-webkit-scrollbar-track {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0);
background-color: #2e2e2e;
}
.f\_list::-webkit-scrollbar-track:hover {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .4);
background-color: rgba(0, 0, 0, .01);
}
table {
table-layout: fixed;
empty-cells: show;
border-collapse: collapse;
margin: 0 auto;
border: 1px;
}
td,
th {
border: 1px #cad9ea solid;
}
</style>
<body>
<div class="main">
<div style="text-align: center;font-size:18px;line-height:32px;">
<span> 个人站点导航</span>
</div>
<div style="height: 26px;background-color:#4e4e4e">
<div style="float:right;">
<span style="font-size:14px">过滤器:</span><input style="background-color:#4e4e4e;color:aliceblue" type="text" placeholder="" onkeydown="onSearch(this)">
</div>
</div>
<div class='f\_list'>
<table id="data\_table" cellspacing="1" cellpadding="1" style="width:100%">
<tr style="background-color: #d5eff4;color: #3E90DD;text-shadow: 0 0 2px #12fec2">
<th style="width:3% ;height:35px;">#</th>
<th style="width:40%">子站</th>
<th style="width:10%">类型</th>
<th style="width:10%">文件尺寸</th>
<th style="width:20%">创建日期</th>
<th style="width:20%">修改日期</th>
</tr>
<tr id='empty-data' style="display: none;">
<td colspan='6'><span style="text-align:center;display:block;font-size:large">空数据，请检查目录权限、筛选条件</span></td>
</tr>
<?php
\$counter = 0;
for (\$item = 0; \$item < count(\$files); \$item++) {
if (in\_array(\$files[\$item], \$block)) continue;
\$counter++;
\$current\_color = \$counter % 2 != 0 ? '#d5e5f5' : '#f5f5f5';
echo '<tr style="background-color:' . \$current\_color . ';height:28px;" onmouseenter="this.style.backgroundColor=\\'#e5edf5\\'" onmouseout="this.style.backgroundColor=\\'' . \$current\_color . '\\'">';
echo '<td name="td0" style="color:#3E90DD"><span style="display:block;text-align:center">' . \$counter . '</span></td>';
echo '<td name="td1" > <a href="' . \$files[\$item] . '" style="text-shadow: 0 0 2px #12fec2">' . \$files[\$item] . '</a></td>';
echo '<td name="td2" style="color:#3E90DD;height:25px;">' . (is\_file(\$files[\$item]) == 1 ? '独立页面' : '子站') . '</td>';
echo '<td name="td3" style="color:#3E90DD">' . (is\_file(\$files[\$item]) == 1 ? filesize(\$files[\$item]) : '--') . '</td>';
echo '<td name="td4" style="color:#3E90DD">' . date("Y-m-d H:i:s", filectime(\$files[\$item])) . '</td>';
echo '<td name="td5" style="color:#3E90DD">' . date("Y-m-d H:i:s", filemtime(\$files[\$item])) . '</td>';
echo '</tr>';
}
?>
</table>
</div>
<div style="bottom:0px;width:100%;position:absolute; text-align: center;font-size:18px;line-height:32px;color:red">版权声明</div>
</div>
</body>
<script>
function onSearch(obj) {
setTimeout(function() {
var data\_table = document.getElementById('data\_table');
var rowLength = data\_table.rows.length;
var key = obj.value.toLowerCase();
var searchColumn = 1;
var hidden\_counter = 0;
for (var i = 2; i < rowLength; i++) {
var searchText = data\_table.rows[i].cells[searchColumn].innerText.toLowerCase();
if (searchText.match(key)) {
data\_table.rows[i].style.display = '';
document.getElementById("empty-data").style.display = 'none';
} else {
data\_table.rows[i].style.display = 'none';
hidden\_counter++;
}
}
if (hidden\_counter == rowLength - 2) {
document.getElementById("empty-data").style.display = '';
}
}, 100);
}
onSearch({
value: ''
});
</script>
</html>
评论 0
还没有评论，来说点什么吧。