7.30select函数调用

最新推荐文章于 2023-02-13 19:53:01 发布

KKsuri

最新推荐文章于 2023-02-13 19:53:01 发布

阅读量235

点赞数

分类专栏：学习日记

本文链接：https://blog.csdn.net/KKsuri/article/details/81295550

版权

学习日记专栏收录该内容

17 篇文章 0 订阅

订阅专栏

今日总结

select函数调用

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        .cc {
            margin: 0 auto;
            height: 300px;
            width: 300px;
            background-color: red;
        }
        .cc p {
            text-align: center;
            padding-top: 145px;
            color: white;
        }
    </style>
</head>
<body>
    <h1>九九乘法表</h1>
    <div id="tdiv"></div>
    <hr>
    <div class="cc">
        <p>
            <span id="content">我爱中国</span>
        </p>
    </div>
    <select id="fs" onchange="changeSize()"></select>
    <script type="text/javascript">
        var tdivHtml = "";
        for (var i = 1; i <= 9; i++) {
            for (var j = 1; j <= i; j++) {
                 tdivHtml += i + "*" + j + "=" + (i*j) + "";
                 tdivHtml = 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();
    </script>
</body>
</html>