JavaScript编程基础(一)

目的：

  1. 熟练掌握JavaScript的语言基础，包括数据类型、常量和变量、运算符和表达式、基本语句和函数。

  2. 理解JavaScript如何动态产生HTML代码，以及控制CSS。

要求：

  1. 利用自定义函数向页面中输出自定义的表格，在调用函数时通过传递的参数指定表格的行数和列数

  2. 并实现表格奇偶行背景颜色不一样，或者更多动态展示

源代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>First_work</title>
</head>
<body>
    <table border="1">
        <script>
            document.write("JAVASCRIPT首次实验<br>");
            function table(a,b){
                for(var i=1;i<=a;i++){
                    document.write("<tr>");
                    for(var j=1;j<=b;j++){
                        if(i%2==0){
                            document.write("<td bgcolor='pink'>第"+i+"行 第"+j+"列</td>");
                        }
                        else
                        document.write ("<td bgcolor='blue'>第"+i+"行 第"+j+"列</td>");
                    }
                    document.write('</tr>')
                }
            }
            table(5,4)
        </script>
    </table>
</body>
</html>

 

截图：

 

 

 

总结(遇到问题、解决方式、心得体会)：

本次上机比较容易，要求利用自定义函数向页面中输出自定义的表格，在调用函数时通过传递的参数指定表格的行数和列数。

要想完成上述需求，需要创建一个含有两个参数的函数table(a,b)。其中这（a,b）两个参数分别用来指定表格的行和列，然后应

用到for循环嵌套中，然后再对函数table（）进行调用，并传递两个参数（5,4），即4行4列。

posted @ 2022-03-27 17:27  霖霖的信箱  阅读(123)  评论(0)    收藏  举报