渡课学习第22天 js 对自己不太满意_渡课培训濠滨论坛-CSDN博客

本文链接：https://blog.csdn.net/weixin_42707540/article/details/81290981

今天继续学习了 js 第二部分有点难主要是一个句子很多个引号。。。。

下午补习99乘法表

晚上练习 select 那部分

每天尽量多写一点代码，手残需要多练习

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        .cc {
            margin: 0 auto;
            width: 200px;
            height: 200px;
            background: grey;
        }
        .cc p {
            text-align:center;
            height: 200px;
            color: white;
        }
    </style>
</head>
<body>
    <p id="cf"></p>
    <hr>
    <div class="cc">
        <p>
            <span id="content">我爱中国</span>
        </p>
    </div>
    <hr>
    <select id="fs" onchange="changeSize();">
    </select>

    <script type="text/javascript">
        var cf = function() {
            var cfHtml = ""; // 定义一个cfHtml变量，用于存储显示在cf标签中的HTML内容

            // 通过循环来进行乘法口诀表的创建

            // 第一层循环用于构建每一行的数据，乘数
            for (var i = 1; i <= 9; i++) {
                // 第二层循环用于构建每个乘数的被乘数项
                for (var j = 1; j <= i; j++) {
                    cfHtml = cfHtml + (""+i+"*"+j+"="+(i*j)+" ");
                }
                // 每行结束添加换行符号
                cfHtml += "<br/>";
            }

            // 将构建出来的Html内容添加到id为cf的p标签中
            document.getElementById("cf").innerHTML = cfHtml;
        }

        // 初始化字体选择框
        var initFsSelect = function() {
            var fsHtml = "";
            for (var i = 1; i <= 100; i++) {
                fsHtml += "<option value='"+i+"px'>"+i+"px</option>";
            }
            document.getElementById("fs").innerHTML = fsHtml;
        }

        var changeSize = function() {
            // 将fs的字体值赋值给content元素
            // var random = Math.round(Math.random() * 100);
            // console.log(random);
            // var fs = random + "px";
            var fs = document.getElementById("fs").value;

            document.getElementById("content").style.fontSize = fs;

        }

        cf();
        initFsSelect();
    </script>
</body>
</html>