<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>九九乘法表</title>
    <style type="text/css">
        td {
            width: 100px;
            border: 5px solid white;
            padding: 15px;
            background-color: aqua;
            text-align: center;
            color: aqua;
            font-size: 20px;
            font-family: Arial, Helvetica, sans-serif;
            user-select: none;
        }

        td:hover {
            background-color: blue;
            color: white;
        }

        .tit {
            padding: 5px;
            width: 1300px;
            height: auto;
            text-align: center;
            background-color: bisque;
            margin-bottom: 10px;
            color: black;
            font-family: 'SIMSUN', "simsun", "宋体", 'Microsoft YaHei';
            font-size: 42px;
        }
    </style>
    <script>
        function TransColor(ele) {
            ele.style.color = 'white';
            setInterval(function() {
                ele.style.color = 'aqua';
            }, 700);
        }
    </script>
</head>

<body>
    <div class="tit" style="margin-top: 30px;">九九乘法表</div>
    <div>
        <td onclick="TransColor"></td>
        <script type="text/javascript">
            document.write("<table>");
            for (var i = 1; i <= 9; i++) {
                document.write("<tr>");
                for (var j = 1; j <= i; j++) {
                    document.write("<td onclick=\"TransColor(this)\">" + i + " * " + j + " = " + i * j + "</td>");
                }
                document.write("</tr>");
            }
            document.write("</table>");
        </script>
    </div>

</body>

</html>