test

static/crawl.css

@@ -0,0 +1,59 @@
+/* 整体布局 */
+body {
+    font-family: Arial, sans-serif;
+    background-color: #f8f8f8;
+    padding: 20px;
+}
+
+/* 表单容器 */
+form {
+    max-width: 500px;
+    margin: 0 auto;
+    background-color: #fff;
+    border: 1px solid #ccc;
+    padding: 20px;
+    border-radius: 5px;
+}
+
+/* 表单元素 */
+label {
+    font-weight: bold;
+    display: block;
+    margin-bottom: 12px;
+}
+
+input[type="text"],
+input[type="number"] {
+    padding: 10px;
+    border-radius: 3px;
+    border: 1px solid #ddd;
+    width: 100%;
+    margin-bottom: 20px;
+    font-size: 16px;
+}
+
+input[type="submit"] {
+    background-color: #4CAF50;
+    border: none;
+    color: white;
+    padding: 12px 30px;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 18px;
+    margin-top: 20px;
+    cursor: pointer;
+    border-radius: 5px;
+    transition: background-color 0.3s ease-in-out;
+}
+
+input[type="submit"]:hover {
+    background-color: #3e8e41;
+}
+
+/* 标题样式 */
+.title {
+    text-align: center;
+    font-size: 30px;
+    margin: 10px auto 25px;
+    line-height: 1.2;
+}

static/js/myscript.js

@@ -0,0 +1,77 @@
+const tableRows = document.querySelectorAll('.table-row');
+// 设置每页显示的条数
+const itemsPerPage = 10;
+// 获取上一页和下一页按钮元素
+const prevBtn = document.getElementById('prev-btn');
+const nextBtn = document.getElementById('next-btn');
+
+let currentPage = 1;   // 当前页数，默认为第一页
+
+// 显示当前页码的函数
+function displayCurrentPage() {
+  const currentPageEl = document.getElementById('current-page');
+  currentPageEl.innerHTML = currentPage;
+}
+
+// 隐藏所有行元素
+function hideRows() {
+  tableRows.forEach(row => {
+    row.style.display = 'none';
+  });
+}
+
+// 根据当前页码显示对应的行元素
+function displayRows() {
+  const startIndex = (currentPage - 1) * itemsPerPage;
+  const endIndex = startIndex + itemsPerPage;
+  
+  for (let i = startIndex; i < endIndex; i++) {
+    const row = tableRows[i];
+    if (row) {
+      row.style.display = '';
+    }
+  }
+}
+
+// 更新翻页按钮状态
+function updatePaginationButtons() {
+  if (currentPage === 1) {
+    prevBtn.disabled = true;
+  } else {
+    prevBtn.disabled = false;
+  }
+  
+  if (currentPage === Math.ceil(tableRows.length / itemsPerPage)) {
+    nextBtn.disabled = true;
+  } else {
+    nextBtn.disabled = false;
+  }
+}
+
+// 上一页按钮点击事件处理程序
+prevBtn.addEventListener('click', () => {
+  if (currentPage > 1) {
+    currentPage--;
+    hideRows();
+    displayRows();
+    updatePaginationButtons();
+    displayCurrentPage();
+  }
+});
+
+// 下一页按钮点击事件处理程序
+nextBtn.addEventListener('click', () => {
+  if (currentPage < Math.ceil(tableRows.length / itemsPerPage)) {
+    currentPage++;
+    hideRows();
+    displayRows();
+    updatePaginationButtons();
+    displayCurrentPage();
+  }
+});
+
+// 页面加载完成时显示第一页内容
+hideRows();
+displayRows();
+updatePaginationButtons();
+displayCurrentPage();

static/result.css

@@ -0,0 +1,56 @@
+body {
+  background-color: #eaf1f9;
+  color: #333;
+}
+
+.container {
+  max-width: 1400px;
+  margin: 20px auto 0;
+  padding: 40px;
+  box-sizing: border-box;
+}
+
+.avatar {
+  display: block;
+  margin: -50px auto 10px;
+  width: 30px;
+}
+
+.title {
+  text-align: center;
+  font-size: 25px;
+  margin: -5px auto 0;
+  line-height: 1.2;
+}
+
+.jobs-table {
+  border-collapse: collapse;
+  margin-top: 10px;
+  margin-left: -10px;
+  margin-right: -10px;
+  border-spacing: 0;
+  border: 1px solid #dcdcdc;
+  width: calc(100% + 20px);
+}
+
+.table-header-row th {
+  padding: 12px;
+  font-weight: bold;
+  text-align: center;
+  font-size: 14px;
+  border: 1px solid #dcdcdc;
+}
+
+.table-row td {
+  padding: 12px;
+  text-align: center;
+  font-size: 12px;
+  font-family: 'Arial', 'Helvetica', sans-serif;
+  border: 1px solid #dcdcdc;
+}
+
+#prev-btn, #next-btn {
+  display: block;    /* 将按钮转换为块级元素 */
+  margin: auto;      /* 自动水平居中 */
+  text-align: center;    /* 内容也居中 */
+}

static/send.css

@@ -0,0 +1,51 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+}
+body {
+    background-color: #f2f2f2;
+}
+.container {
+    width: 100%;
+    max-width: 500px;
+    margin: 0 auto;
+    padding: 30px;
+    background-color: #fff;
+    border-radius: 5px;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
+}
+h1 {
+    text-align: center;
+    margin-bottom: 30px;
+    color: #333;
+}
+label {
+    display: block;
+    margin-bottom: 10px;
+    color: #666;
+}
+input[type="text"] {
+    width: 100%;
+    padding: 10px;
+    border: none;
+    border-radius: 3px;
+    background-color: #f9f9f9;
+    color: #555;
+    margin-bottom: 20px;
+}
+button[type="submit"] {
+    display: inline-block;
+    margin: 0 auto;
+    padding: 10px 20px;
+    background-color: #428bca;
+    color: #fff;
+    border: none;
+    border-radius: 3px;
+    transition: all 0.3s ease-in-out;
+}
+button[type="submit"]:hover {
+    background-color: #3071a9;
+    cursor: pointer;
+}

static/style.css

@@ -0,0 +1,63 @@
+/* 页面整体 */
+body {
+    margin: auto;
+    max-width: 580px;
+    font-size: 14px;
+    font-family: Helvetica, Arial, sans-serif;
+}
+
+/* 页脚 */
+footer {
+    color: #888;
+    margin-top: 15px;
+    text-align: center;
+    padding: 10px;
+}
+
+/* 头像 */
+.avatar {
+    width: 40px;
+}
+
+
+/* 龙猫图片 */
+.totoro {
+    display: block;
+    margin: 0 auto;
+    height: 400px;
+}
+ul.tools {
+  list-style: none;
+  text-align: center;
+  margin-top: 20px;
+  padding: 0;
+}
+
+ul.tools li {
+  display: block;
+  margin-bottom: 10px;
+  text-align: center;
+}
+
+/* 爬取数据按钮样式 */
+ul.tools .crawl-btn {
+  background-color: #42b983;
+  color: #fff;
+  padding: 5px 16px;
+  border-radius: 5px;
+}
+
+/* 查看数据按钮样式 */
+ul.tools .result-btn {
+  background-color: #007bff;
+  color: #fff;
+  padding: 5px 16px;
+  border-radius: 5px;
+}
+
+/* 调整查看数据按钮的位置 */
+ul.tools .result-btn {
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: 20px;
+}