3.10

JavaScript
JavaScript实现交互效果，数据收法等；、
通常把标签放在最后
1.输入输出
alert（）函数 弹出警告框
console.log（） 控制台输出

2.数据类型

3.添加事件监听
要实现鼠标移入和移出时表格行的背景色变化，可以通过 JavaScript 动态添加事件监听器来修改行的背景色

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>甄嬛传角色表</title>
    <style>
        h1 {
            text-align: center;
            font-weight: bold;
            color: #2c3e50;
            margin: 20px 0;
        }
        table {
            width: 80%;
            margin: 0 auto;
            border-collapse: collapse;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
        th, td {
            padding: 12px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }
        th {
            background-color: #8e44ad;
            color: white;
            font-weight: bold;
        }
        tr {
            background-color: white; /* 默认背景色 */
            transition: background-color 0.3s ease; /* 添加过渡效果 */
        }
    </style>
</head>
<body>
    <h1>甄嬛传角色表</h1>

    <table>
        <thead>
            <tr>
                <th>姓名</th>
                <th>性格特点</th>
                <th>存活集数</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>甄嬛</td>
                <td>聪慧隐忍，谋略过人</td>
                <td>全剧存活（76集）</td>
            </tr>
            <tr>
                <td>皇后</td>
                <td>城府深沉，心狠手辣</td>
                <td>至56集自尽</td>
            </tr>
            <tr>
                <td>华妃</td>
                <td>骄横跋扈，敢爱敢恨</td>
                <td>至42集撞墙而亡</td>
            </tr>
            <tr>
                <td>沈眉庄</td>
                <td>端庄温婉，宁折不弯</td>
                <td>至64集血崩去世</td>
            </tr>
            <tr>
                <td>安陵容</td>
                <td>敏感多疑，工于心计</td>
                <td>至68集吞苦杏仁亡</td>
            </tr>
            <tr>
                <td>果郡王</td>
                <td>深情不渝，潇洒不羁</td>
                <td>至74集饮毒酒亡</td>
            </tr>
            <tr>
                <td>温实初</td>
                <td>忠厚仁心，默默守护</td>
                <td>全剧存活</td>
            </tr>
            <tr>
                <td>浣碧</td>
                <td>心思细腻，倔强执着</td>
                <td>至74集撞棺殉情</td>
            </tr>
            <tr>
                <td>叶澜依</td>
                <td>桀骜不驯，敢作敢为</td>
                <td>至76集割腕自尽</td>
            </tr>
            <tr>
                <td>苏培盛</td>
                <td>老练圆滑，忠心耿耿</td>
                <td>全剧存活</td>
            </tr>
        </tbody>
    </table>

    <script>
        // 获取所有表格行
        const rows = document.querySelectorAll('tbody tr');

        // 遍历每一行
        rows.forEach(row => {
            // 鼠标移入事件
            row.addEventListener('mouseenter', () => {
                row.style.backgroundColor = '#f2e2e2'; // 设置背景色
            });

            // 鼠标移出事件
            row.addEventListener('mouseleave', () => {
                row.style.backgroundColor = 'white'; // 恢复背景色
            });
        });
    </script>
</body>
</html>
posted @   睡觉的时候不困,  阅读(2)  评论(0)  编辑  收藏  举报
努力加载评论中...
点击右上角即可分享
微信分享提示