九九乘法表与文本样式JS实现-优快云博客

一、学习内容

1.深化讲解了关于九九乘法表的JavaScript代码部分
2.继续深解JavaScript中变量、数据类型、运算符、流程控制语句、函数之间的关联；
3.简单介绍了思维导图

二、自学时间安排

下午1:30~3:00自己深入理解了老师上课讲的代码，将不知道的地方通过百度、询问同学搞清楚；
3:00~4:30敲打今日代码20遍；
4:30~5:30完成思维导图；
7:00~7:30完成博客作业。

三、今日代码

九九乘法表加如何通过<select>和JavaScript改变一个文本样式：

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


    <script type="text/javascript">


        var cf = function () {
        var tdivhtml = ""; 
        for(var i = 1;i <= 9;i++){
            for(var j = 1;j <= i;j++){
                tdivhtml += i + "*" + j + "=" + (i*j) + "";
            }
            tdivhtml += "<br>";
        }
        document.getElementById("tdiv").innerHTML = tdivhtml;
        }


        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 (){
            var fs = document.getElementById("fs").value;

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

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

</body>
</html>

四、学习心得

今日上课充分体现了自己对代码的不熟悉，老师的思维很快，还没反应过来老师就讲完了，只能课后自己慢慢理解，今天花了一点时间理解了fshtml += "<option value = '"+i+"px'>"+i+"px</option>"这一段代码，一开始不明白老师为什么这样写，读了几遍后觉得这问题真简单，说明自己对基础的部分还有待加强啊，老师永远是老师，反应速度是真快。