【HTML+CSS+JavaScript】九九乘法表

需求:九九乘法表

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>九九乘法表title>
    <style>
        body {
            color: #333;
        }
        table {
            width: 900px;
            table-layout: fixed;
            /*border-collapse: collapse;*/
            empty-cells: hide;
        }
        td {
            border: 1px solid #ccc;
            padding: 10px;
        }
    style>
head>
<body>
    <h1>九九乘法表h1>
    <hr>


    <script>
        //JavaScript生成九九乘法表
        document.write('');

        //循环 输出tr 行for (var i =1; i <=9; i ++) {
            document.write('');

            //输出 td 单元格for (var j =1; j <= i; j ++) {
                document.write(`<td>${i}&times;${j} = ${i * j}</td>`);            }
            
            document.write('');
        }

        document.write('
'); document.write('


'); document.write(''); //循环 输出tr 行for (var i =9; i >=1; i --) { document.write(''); //输出 td 单元格for (var j =1; j <= i; j ++) { document.write(`<td>${i}&times;${j} = ${i * j}</td>`); } document.write(''); } document.write('
'); document.write('


'); document.write(''); //循环 输出tr 行for (var i =1; i <=9; i ++) { document.write(''); //输出空的单元格for (var m =1; m <= (9-i); m ++) { document.write(''); } //输出 td 单元格for (var j =1; j <= i; j ++) { document.write(`<td>${i}&times;${j} = ${i * j}</td>`); } document.write(''); } document.write('
'); document.write('


'); document.write(''); //循环 输出tr 行for (var i =9; i >=1; i --) { document.write(''); //输出空的单元格for (var m =1; m <= (9-i); m ++) { document.write(''); } //输出 td 单元格for (var j =1; j <= i; j ++) { document.write(`<td>${i}&times;${j} = ${i * j}</td>`); } document.write(''); } document.write('
'); script> body> html>

 

转载于:https://www.cnblogs.com/neymargoal/p/9470986.html

你可能感兴趣的:(【HTML+CSS+JavaScript】九九乘法表)