HTML&&JavaScript案例

HTML和JavaScript 案例摘要！！

 

1、HTML下拉选项框自定义滚动条

/* 整个滚动条 */
::-webkit-scrollbar {
    width: 10px;
    height: 10px; /* 水平滚动条高度 */
}
 
/* 滚动条轨道 */
::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 5px;
}
 
/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 5px;
}
 
/* 滚动条滑块悬停状态 */
::-webkit-scrollbar-thumb:hover {
    background: #555;
}

2、设置两个table中高度一致

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Set Same Height for Table Rows</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.8.0/jquery-1.8.0.min.js"></script>
    <style>
        table {
            border-collapse: collapse;
        }

        td {
            border: 1px solid black;
            padding: 10px;
        }
    </style>
</head>
<body>
    <table id="table1">
        <tr style="height:100px;">
            <td>Row 1, Column 1</td>
            <td>Row 1, Column 2</td>
        </tr>
        <tr>
            <td>Row 2, Column 1</td>
            <td>Row 2, Column 2</td>
        </tr>
        <tr>
            <td>Row 3, Column 1</td>
            <td>Row 3, Column 2</td>
        </tr>
    </table>

    <table id="table2">
        <tr>
            <td>Row 1, Column 1</td>
            <td>Row 1, Column 2</td>
        </tr>
        <tr>
            <td>Row 2, Column 1</td>
            <td>Row 2, Column 2</td>
        </tr>
        <tr>
            <td>Row 3, Column 1</td>
            <td>Row 3, Column 2</td>
        </tr>
    </table>

    <script>
    const table1Rows = document.getElementById('table1').getElementsByTagName('tr');
    const table2Rows = document.getElementById('table2').getElementsByTagName('tr');

    // 获取表格中最高的行高
    function getMaxRowHeight(rows) {
      let maxHeight = 0;
      for (let i = 0; i < rows.length; i++) {
        const rowHeight = rows[i].clientHeight; //使用clientHeight获取元素的高度（包括padding和边框）
        if (rowHeight > maxHeight) {
          maxHeight = rowHeight;
        }
      }
      return maxHeight;
    }

    // 将两个表格中的行高设置为相同值
    function setSameRowHeight() {
      const maxHeight = Math.max(getMaxRowHeight(table1Rows), getMaxRowHeight(table2Rows));
      for (let i = 0; i < table1Rows.length; i++) {
        table1Rows[i].style.height = maxHeight + 'px';
        table2Rows[i].style.height = maxHeight + 'px';
      }
      console.log('Row heights set to ' + maxHeight + ' pixels.');
    }

    // 确保页面完全加载后执行setSameRowHeight函数
    window.onload = setSameRowHeight;
    </script>
</body>
</html>

3、div和鼠标的Hover事件

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mouse Hover Tooltip</title>
    <style>
        .hover-div {
            width: 200px;
            height: 100px;
            background-color: lightgreen;
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
            cursor: pointer;
            position: relative;
        }

       .tooltip {
            position: absolute;
            background-color: rgba(0, 0, 0, 0.7);
            color: white;
            padding: 5px 10px;
            border-radius: 5px;
            font-size: 12px;
            /* white-space: nowrap; */
            z-index: 10;
            display: none;
            flex-wrap: wrap; /* 允许自动换行 */
            max-width: 300px;
        }
    </style>
</head>
<body>

    <div class="hover-div" data-tooltip="这是自定义的提示文本！">
        鼠标移入我
    </div>

    <!-- 提示框 -->
    <div class="tooltip" id="tooltip"></div>

    <script>
        const hoverDiv = document.querySelector('.hover-div');
        const tooltip = document.getElementById('tooltip');

        hoverDiv.addEventListener('mouseenter', () => {
            // 获取自定义的提示文本
            const tooltipText = hoverDiv.getAttribute('data-tooltip');
            tooltip.textContent = tooltipText;

            // 显示提示框
            tooltip.style.display = 'block';
        });

        hoverDiv.addEventListener('mousemove', (event) => {
            // 获取鼠标的位置
            const mouseX = event.pageX;
            const mouseY = event.pageY;

            // 设置提示框的位置，距离鼠标稍微偏移
            tooltip.style.left = mouseX + 10 + 'px';  // 10px 的偏移
            tooltip.style.top = mouseY + 10 + 'px';   // 10px 的偏移
        });

        hoverDiv.addEventListener('mouseleave', () => {
            // 隐藏提示框
            tooltip.style.display = 'none';
        });
        
         
          
   //************以下方法是：鼠标移入移除单个方法：************************                       
      // 添加全局鼠标事件监听器
      document.addEventListener('mousemove', function (event) {
          // 获取鼠标当前悬停的元素
          const target = event.target;
          const tooltip = document.getElementById('tooltip');
          // 判断目标元素是否具有类名 'hover-list'
          if (target.classList.contains('hover-list')) {
             // console.log(target.innerText);
              tooltip.textContent = target.innerText;
              // 显示提示框
              tooltip.style.display = 'block';
              // 获取鼠标的位置
              const mouseX = event.pageX;
              const mouseY = event.pageY;
              // 设置提示框的位置，距离鼠标稍微偏移
              tooltip.style.left = mouseX + 10 + 'px';  // 10px 的偏移
              tooltip.style.top = mouseY + 10 + 'px';   // 10px 的偏移

          } else {
              const tooltip = document.getElementById('tooltip');
              // 隐藏提示框
              tooltip.style.display = 'none';
          }
      });
    </script>

</body>
</html>

 

posted @ 2025-06-26 10:25  小鱼记忆  阅读(40)  评论(0)    收藏  举报