更新一波本地导航页

博主： zmx
发布时间：2022 年 11 月 20 日
506 次浏览
暂无评论
2697字数
分类：编程 PHP

# 引言

审美疲劳了，这样看起来还挺不错的，hetui，男人，说变心就变心😄
有一段代码直接在Z-Terminal取的，详见下面的文章，到底哪里能复用呢？
<div class="preview">
<div class="post-inser post box-shadow-wrap-normal">
<a href="https://www.zunmx.top/archives/1230/" target="_blank" class="post_inser_a no-external-link no-underline-link">
<div class="inner-image bg" style="background-image: url(https://www.zunmx.top/usr/uploads/2022/11/1292476179.png);background-size: cover;"></div>

<div class="inner-content" >
<p class="inser-title">HTML 复古终端</p>
<div class="inster-summary text-muted">
引言岁月匆匆，韶光易逝，复古也是一种美吧。历时3小时的闲作特性支持上下历史选择支持左右文字调整支持delete键和...
</div>
</div>
</a>

</div>

</div>

# 新版&旧版对比

![新版样式图](https://www.zunmx.top/usr/uploads/2022/11/2583819083.png)

![旧版样式图](https://www.zunmx.top/usr/uploads/2022/11/2250622647.png)

# 技术栈

- 原生JS
- PHP （获取目录）

# 代码

```html
<!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>
```