JAVAWEB复习知识五：JAVASCRIPT案例-99乘法表、电灯开关、轮播图、自动跳转首页、动态表格、表格全选、表单检验

本文链接：https://blog.csdn.net/weixin_45246666/article/details/109093887

这篇博客详细介绍了使用JavaScript实现的多个实用案例，包括99乘法表的生成、电灯开关效果、轮播图的制作、页面自动跳转至首页、动态创建表格、表格全选功能以及表单验证的实现方法。通过这些案例，读者可以加深对JavaScript实际应用的理解。

摘要由CSDN通过智能技术生成

一、99乘法表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>99乘法表</title>
    <style>
        td{
   
            border: 1px solid;
        }
    </style>
    <script>
        document.write("<table align='center'>");
        for(var i = 1; i <= 9;i++) {
   
            document.write("<tr>");
            for (var j = 1;j <= i;j++) {
   
                document.write("<td>");
                //输出i
                document.write(i+"*"+j+"="+i*j+"&nbsp;&nbsp&nbsp");
                document.write("</td>");
            }
            //输出换行
            document.write("<br>");
            document.write("</tr>");

        }
        //完成表格嵌套
        document.write("</table>");

    </script>
</head>
<body>

</body>
</html>

二、电灯开关

注意：img标签定义在js外面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>电灯开关</title>
</head>
<body>
        <img id="light" src="image/off.gif">
        <script>
        /*
        1.获取图片对象
        2.绑定单机事件
        3.每次点击切换图片
        3.1如果灯是开的on，切换图片为off
        3.2如果灯是关的off，切换图片为on
        3.3使用标记flag来完成
         */

    //1.获取图片
    var light = document.getElementById("light");
    var flag = false;
    //2.绑定单击事件
    light.onclick = function(){
   
        if(flag){
    //判断如果是开的就灭掉
            light.src="image/off.gif"
            flag=false;
    }else{
           //判断如果是关的就打开
        light.src="image/on.gif";
        flag=true;
    }

    }
    </script>
</body>
</html>

三、轮播图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图</title>
</head>
<body>
    <img id="img" src="image/banner_1.jpg" width="100%">
    <script>
        //1.修改图片src属性
        var number = 1;

        function fun() {
   
            number++;
            //判断number是否大于3，大于3，则返回1.
            if (number > 3) {
   
                number = 1;
            }
            var img = document.getElementById("img");
            img.src = "image/banner_" + number + ".jpg";//要保持图片名称动态变化
        }
        //2.定义定时器
        setInterval(fun,3000);
    </script>
</body>
</html>

四、自动跳转首页

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>y页面跳转登录</title>
</head>
<body>
        <Style>
            p{
   
                text-align: center;
            }
            span{
   
                color: red;
            }
        </style>
        <p>
            <span id="time">5</span>秒之后，自动跳转到首页...
        </p>
        <script>
            /*
            * 分析
            *   1.显示页面效果
            *   2.倒计时读秒显示
            *       2.1定义一个方法，获取span标签，修改span标签内容，时间——
            *       2.2定义一个定时器，1秒执行一次该方法
            *   3.在方法中判断时间如果<=0,则跳转到首页
            * */
            var second = 5;
            var time = document.getElementById("time");
            //定义一个方法，获取span标签，修改span标签内容，时间--
            function showTime(){
   
                second --;
                //判断如果时间为0，则跳转到首页
                if(second<=0){
   
                    location.href = "https://www.baidu.com";
                }
                time.innerHTML = second + "";
            }
            //设置定时器，1秒执行一次该方法
            setInterval(showTime,1000);
        </script>
</body>
</html>

五、动态表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态页面</title>
</head>
<body>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"