《Web前端设计与开发》实验四：JavaScript基础编程实验

一、实验内容

练习 1 使用循环输出等腰三角形图案 (1) 问题：实现左右对称的等腰三角形。如图上机 1.4 所示。
练习 2 使用循环输出 100 以内除 7 的倍数之外的整数。
(1) 问题：在页面上输出 100 以内的正整数，但不包括 7 的倍数，每行输出 10 个。如图上机图 1.5 所示。
练习 3 使用锯齿数组
(1) 问题：在 JavaScript 中模拟实现二维数组的功能，用于存储各个学期的所有课程名称，请根据运行结果在 JS 中自行构建数组并输出运行结果如图上机 1.6（当需要某一元素时必须从数组中调用）。
(2) 提示：JavaScript 不支持二维数组以及多维数组，但是可以使用锯齿数组模拟二维数组的功能。锯齿数组又称为交错数组，简单理解就是数组的数组，即每一个元素都是另一个数组。
(3) 例子：varmyArray=[[“Jack”,”Mike”],[“Mary”,”Michael”]]; 这里创建了一个数组 myArray，myArray 中的两个元素都是数组。
练习 4 在网页中显示日期时间
(1) 问题：在页面中显示当前的日期时间。要求包含年月日星期时分秒，如图上机 1.7 所示。
(2) 提示：调用 Date 对象的无参构造函数可以创建表示当前日期时间的 Date 对象（参见 Date 对象参考手册），可以获得 Date 对象包含的年份、月份、日期、星期、时、分、秒等信息。

二、实验代码及成品

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <script type="text/javascript">
            for(let i=1;i<=9;i++)
            {
     
     
                for(let j=1;j<=5-i;j++)
                {
     
     
                    document.write("&ensp;");
                }
                for(let k=1;k<=2*i-1;k++)
                {
     
     
                    document.write("*");
                }
                for(let l=1;l<=5-i;l++)
                {
     
     
                    document.write("&ensp;");
                }
                document.write("</br>");
                if(i==5){
     
     
                    break;
                }
            }
        </script>
    </body>
</html>

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <script type="text/javascript">
            let j=0;
            for(let i=1;i<=100;i++){
     
     
                if(i%7!=0){
     
     
                    document.write(i,"&ensp;");
                    j++;
                    if(j%10==0){
     
     
                        document.write("</br>");
                    }
                }
            }
        </script>
    </body>
</html>

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <script>
            var subject=[["SQL SERVER","C# OOP"],
                ["WEB FORM","HTML/CSS/JAVASCRIPT","ORACLE"], ["ASP.NET MVC","LINQ"]];
            document.write("subject数组的长度："+subject.length+"</br>");
            document.write("subject数组对象的第0个元素是另一个数组. 这个小数组的长度："+subject[0].length+"</br>");
            document.write("第0个元素："+subject[0][0]+"</br>");
            document.write("第1个元素："+subject[0][1]+"</br>"+"<hr>");

            document.write("subject数组对象的第1个元素是另一个数组. 这个小数组的长度："+subject[1].length+"</br>");
            document.write("第0个元素："+subject[1][0]+"</br>");
            document.write("第1个元素："+subject[1][1]+"</br>");
            document.write("第2个元素："+subject[1][2]+"</br>"+"<hr>");

            document.write("subject数组对象的第2个元素是另一个数组. 这个小数组的长度："+subject[2].length+"</br>");
            document.write("第0个元素："+subject[2][0]+"</br>");
            document.write("第1个元素："+subject[2][1]+"</br>"+"<hr>")
        </script>
    </body>
</html>

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <script>
            var time = new Date();
            var week = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
            var Y = time.getFullYear();//年
            var M = time.getMonth() + 1;//月
            var D = time.getDate();//日
            var d = time.getDay();//星期
            var h = time.getHours();//时
            var m = time.getMinutes();//分
            var s = time.getSeconds();//秒
            for(i=0;i<=6;i++){
     
     
                if(d==i){
     
     
                    d=week[i];
                }
            }
            document.write("今天日期是："+Y+"年"+M+"月"+D+"日"+"&nbsp;"+d+"&nbsp;"+"现在时间是："+h+"时"+m+"分"+s+"秒");
        </script>
    </body>
</html>

《Web前端设计与开发》实验四：JavaScript基础编程实验

一、实验内容

二、实验代码及成品

猜你喜欢