JavaScript的案例（数据校验，js轮播图，页面定时弹窗）-优快云博客

本文介绍了前端表单数据验证的方法，包括用户名、密码及邮箱格式的校验；展示了使用JavaScript实现图片轮播效果的技术细节；此外还提供了一个定时显示和隐藏广告图片的示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.数据校验
           步骤
           1.确定事件（onsubmit）并绑定一个函数
           2.书写这个函数，获取数据，并绑定id
           3.对用户输入数据进行判断
           4.数据合法，让表单提交，非法不让表单提交

           如何控制表单提交：onsubmit用于提交的位置，定义函数是给出一个返回值
           onsubmit=return checkform()

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            function checkForm(){
                var uValue=document.getElementById("username").value;
                if(uValue==""){
                    document.getElementById("remind").innerHTML="用户名不能为空&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";
                    return false;
                }
                var pValue=document.getElementById("password").value;
                if(pValue==""){
                    alert("密码不能为空");
                    return false;
                }
                var eValue=document.getElementById("email".value);
                if(!/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(eValue)){
                    alert("邮箱格式不正确")
                    return false
                }    
            }
        </script>
    </head>
    <body>
        <div align="center">
            <form action="#" method="get" name="regForm" onsubmit="return checkForm()">
                用户名：<input type="text" name="username" id="username"/><br />
                <font id="remind" color="red"></font><br /><br />
                密&nbsp;&nbsp;&nbsp;&nbsp;码：<input type="password" name="password" id="password"/><br /><br /><br />
                邮&nbsp;&nbsp;&nbsp;&nbsp;箱：<input type="text" name="email" id="email" /><br /><br /><br />
                <input type="submit" value="提交"/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <input type="reset" value="重置"/>
            </form>
        </div>
    </body>
</html>

       2.js轮播图
           步骤
           1.确定事件（onload）并为其绑定一个函数
           2.书写绑定的这个函数
           3.书写定时任务
           4.书写定时任务里面的函数
           5.通过变量的方式进行循环

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            div{
                width: 500px;
                height: 350px;
                margin: auto;
                text-align: center;
            }
        </style>
        <script type="text/javascript">
            function init(){
                setInterval("changeImg()",1000)
            }
            var i=0;
            function changeImg(){
                document.getElementById("img").src="img/"+(i%5+1)+".jpg";
                i++;
            }
        </script>
    </head>
    <body onload="init()">
        <div>
            <img src="img/1.jpg" width="500px"  id="img"/>
        </div>
    </body>
</html>

       3.页面定时弹窗
           1.确定事件（onload）并为其绑定一个函数
           2.书写绑定函数，并绑定id
           3.隐藏一个广告图片
           4.利用定时器将display显现（block）
           5.清除定时器，书写隐藏图片定时操作

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>定时弹出广告</title>
        <script type="text/javascript">
            function tim(){
                a=setTimeout("showAd()",3000);
                
            }
            function showAd(){
                adEle=document.getElementById("img");
                adEle.style.display="block"
                clearTimeout(a);
                b=setTimeout("hidAd()",3000)
            }
            function hidAd(){
                adEle.style.display="none"
            }
        </script>
    </head>
    <body onload="tim()">
        <img src="img/广告.jpg" style="display: none;" id="img"/>
    </body>
</html>