渡课学习第13天-JavaScript-我郁闷-CSDN博客

本文链接：https://blog.csdn.net/xiaozhaozhao03/article/details/81292476

一、今日学习内容：

今天老师并没有讲新的内容，而是继续深化讲解 JavaScript 编程语言中变量、数据类型、运算符、流程控制语句、函数的关联；后来向我们概要的讲解了思维导图的使用。

二、今日自习时间安排：

1：30~2：00 午休缓和期；
2：00~3：30 练习今日老师所教的代码；
3：30~4：00 休息了一会；
4：00~5：30 继续熟悉老师所教的代码；
5：30~7：30 吃饭洗澡；
7：30~9：00 研究了一下思维导图。

三、今日学习成果：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <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>