JavaScript的应用

javascript的应用

校验表单

一、步骤分析

  1. 第一步: 确定事件(onsubmit)并为其绑定一个函数
  2. 第二步:书写这个函数(获取用户输入的数据<获取数据时需要在指定位置定义一个 id>)
  3. 第三步: 对用户输入的数据进行判断
  4. 第四步: 数据合法(让表单提交)
  5. 第五步:数据非法(给出错误提示信息, 不让表单提交)

问题: 如何控制表单提交?

关于事件 onsubmit: 一般用于表单提交的位置,那么需要在定义函数的时候给出一个
返回值。

onsubmit = return checkForm()

二、代码实现

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>注册页面</title>
        <script>
            function checkForm(){
                //alert("aa");
                /**校验用户名*/
                //1.获取用户输入的数据
                var uValue = document.getElementById("user").value;
                //alert(uValue);
                if(uValue==""){
                    //2.给出错误提示信息
                    alert("用户名不能为空!");
                    return false;
                }
                
                /*校验密码*/
                var pValue = document.getElementById("password").value;
                if(pValue==""){
                    alert("密码不能为空!");
                    return false;
                }
                
                /**校验确认密码*/
                var rpValue = document.getElementById("repassword").value;
                if(rpValue!=pValue){
                    alert("两次密码输入不一致!");
                    return false;
                }
                
                /*校验邮箱*/
                var eValue = document.getElementById("eamil").value;
                if(!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(eValue)){
                    alert("邮箱格式不正确!");
                    return false;
                }
                
            }
        </script>
    </head>
    <body>
        <table border="1px" align="center" width="1300px" cellpadding="0px" cellspacing="0px">
            <!--1.logo部分-->
            <tr>
                <td>
                    <!--嵌套一个一行三列的表格-->
                    <table border="1px" width="100%">
                        <tr height="50px">
                            <td width="33.3%">
                                ![](../img/logo2.png)
                            </td>
                            <td width="33.3%">
                                ![](../img/header.png)
                            </td>
                            <td width="33.3%">
                                <a href="#">登录</a>
                                <a href="#">注册</a>
                                <a href="#">购物车</a>
                            </td>
                        </tr>
                    </table>
                </td>               
            </tr>
            <!--2.导航栏部分-->
            <tr height="50px">
                <td bgcolor="black">
                        
                    <a href="#">
                        <font size="5" color="white">首页</font>
                    </a>     
                    <a href="#">
                        <font color="white">手机数码</font>
                    </a>    
                    <a href="#">
                        <font color="white">电脑办公</font>
                    </a>    
                    <a href="#">
                        <font color="white">鞋靴箱包</font>
                    </a>    
                    <a href="#">
                        <font color="white">家用电器</font>
                    </a>
                </td>
            </tr>
            <!--3.注册表单-->
            <tr>
                <td height="600px" background="../img/regist_bg.jpg">
                    <!--嵌套一个十行二列的表格-->
                    <form action="#" method="get" name="regForm" onsubmit="return checkForm()">
                        <table border="1px" width="750px" height="400px" align="center" cellpadding="0px" cellspacing="0px" bgcolor="white">
                            <tr height="40px">
                                <td colspan="2">
                                    <font size="4">会员注册</font>    USER REGISTER 
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    用户名
                                </td>
                                <td>
                                    <input type="text" name="user" size="34px" id="user"/>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    密码
                                </td>
                                <td>
                                    <input type="password" name="password" size="34px" id="password"/>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    确认密码
                                </td>
                                <td>
                                    <input type="password" name="repassword" size="34px" id="repassword"></input>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    Emaile
                                </td>
                                <td>
                                    <input type="text" name="email" size="34px" id="eamil"/>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    姓名
                                </td>
                                <td>
                                    <input type="text" name="username" size="34px"/>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    性别
                                </td>
                                <td>
                                    <input type="radio" name="sex" value="男"/>男
                                    <input type="radio" name="sex" value="女"/>女
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    出生日期
                                </td>
                                <td>
                                    <input type="text" name="birthday" size="34px"/>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    验证码
                                </td>
                                <td>
                                    <input type="text" name="yzm" />
                                    ![](../img/yanzhengma.png)
                                </td>
                            </tr>
                            <tr>
                                <td colspan="2">
                                    <input type="submit" value="注册" />
                                </td>
                            </tr>
                        </table>
                    </form>
                </td>               
            </tr>
            <!--4.广告图片-->
            <tr>
                <td>
                    ![](../img/footer.jpg)
                </td>
            </tr>
            <!--5.友情链接和版权信息-->
            <tr>
                <td align="center">
                    <a href="#">关于我们</a>
                    <a href="#">联系我们</a>
                    <a href="#">招贤纳士</a>
                    <a href="#">法律声明</a>
                    <a href="#">友情链接</a>
                    <a href="#">支付方式</a>
                    <a href="#">配送方式</a>
                    <a href="#">服务声明</a>
                    <a href="#">广告声明</a>
                    <p>
                        Copyright © 2005-2016 版权所有 
                    </p>
                </td>
            </tr>
        </table>
    </body>
</html>

JS代码:

<script>
            function checkForm(){
                //alert("aa");
                /**校验用户名*/
                //1.获取用户输入的数据
                var uValue = document.getElementById("user").value;
                //alert(uValue);
                if(uValue==""){
                    //2.给出错误提示信息
                    alert("用户名不能为空!");
                    return false;
                }
                
                /*校验密码*/
                var pValue = document.getElementById("password").value;
                if(pValue==""){
                    alert("密码不能为空!");
                    return false;
                }
                
                /**校验确认密码*/
                var rpValue = document.getElementById("repassword").value;
                if(rpValue!=pValue){
                    alert("两次密码输入不一致!");
                    return false;
                }
                
                /*校验邮箱*/
                var eValue = document.getElementById("eamil").value;
                if(!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(eValue)){
                    alert("邮箱格式不正确!");
                    return false;
                }
                
            }
        </script>

HTML部分:

<form action="#" method="get" name="regForm"
onsubmit="return checkForm()">
需要在指定位置添加 id

使用 JS 完成首页轮播图效果案例

一、技术分析:

  • 获取元素 document.getElementById(“id 名称”)
  • 事件(onload)
  • 定时操作: setInterval(“changeImg()”,3000);

二、步骤分析:

  1. 第一步: 确定事件(onload)并为其绑定一个函数
  2. 第二步:书写绑定的这个函数
  3. 第三步: 书写定时任务(setInterval)
  4. 第四步: 书写定时任务里面的函数
  5. 第五步: 通过变量的方式, 进行循环(获取轮播图的位置,并设置 src 属性)(在循环的时候需要注意到了最后一张图片的时候要重置。)

三、代码实现:

图片切换:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>切换图片</title>
        <style>
            div{
                border: 1px solid white;
                width:500px ;
                height: 350px;
                margin: auto;
                text-align: center;
            }
        </style>
        <script>
            var i=1;
            function changeImg(){
                i++;
                document.getElementById("img1").src="../../img/"+i+".jpg";
                if(i==3){
                    i=0;
                }
            }
        </script>
    </head>
    <body>
        <div>
            <input type="button" value="下一张" onclick="changeImg()"/>
            ![](../../img/1.jpg)
        </div>
    </body>
</html>

javascript代码:

<script>
        function init(){
            //书写轮图片显示的定时操作
            setInterval("changeImg()",3000);
        }
        
        //书写函数
        var i=0
        function changeImg(){
            i++;
            //获取图片位置并设置src属性值
            document.getElementById("img1").src="../img/"+i+".jpg";
            if(i==3){
                i=0;
            }
        }
</script>

三、使用 JS 完成页面定时弹出广告

1.需求分析

我们希望在首页中的顶部做一个定时弹出广告图片。

2.技术分析

  • 获取图片的位置(document.getElementById(“”))
  • 隐藏图片: display: none
  • 定时操作: setInterval(“显示图片的函数”, 3000);

3.步骤分析

  • 第一步: 在页面指定位置隐藏一个广告图片(使用 display 属性的 none 值)
  • 第二步: 确定事件(onload)并为其绑定一个函数
  • 第三步: 书写这个函数(设置一个显示图片的定时操作)
  • 第四步: 书写定时器中的函数(获取广告图片的位置并设置属性style的display值block)
  • 第五步: 清除显示图片的定时操作()
  • 第六步: 书写隐藏图片的定时操作
  • 第七步:书写定时器中的函数(获取广告图片的位置并设置属性 style 的 display 值 none)
  • 第八步: 清除隐藏图片的定时操作()

4.代码实现

<script type="text/javascript">
            function init(){
                //书写轮图片显示的定时操作
                setInterval("changeImg()",3000);
                
                //1.设置显示广告图片的定时操作
                time = setInterval("showAd()",3000);
            }
            
            //书写函数
            var i=0
            function changeImg(){
                i++;
                //获取图片位置并设置src属性值
                document.getElementById("img1").src="../img/"+i+".jpg";
                if(i==3){
                    i=0;
                }
            }
            
            //2.书写显示广告图片的函数
            function showAd(){
                //3.获取广告图片的位置
                var adEle = document.getElementById("img2");
                //4.修改广告图片元素里面的属性让其显示
                adEle.style.display = "block";
                //5.清除显示图片的定时操作
                clearInterval(time);
                //6.设置隐藏图片的定时操作
                time = setInterval("hiddenAd()",3000);
            }
            
            //7.书写隐藏广告图片的函数
            function hiddenAd(){
                //8.获取广告图片并设置其style属性的display值为none
                document.getElementById("img2").style.display= "none";
                //9.清除隐藏广告图片的定时操作
                clearInterval(time);
            }
            
</script>

html代码:

<body onload="init()">
    <!--定时弹出广告图片位置-->
    ![](../img/f001a62f-a49d-4a4d-b56f-2b6908a0002c_g.jpg)

总结

javascript 的引入方式

  • 内部引入方式:

    直接将 javascript 代码写到<script type=”text/javascript”></script>

  • 外部引入方式:

    需要创建一个.js文件,在里面书写 javascript代码,然后在 html文件中通过 script标签的 src 属性引入该外部的 js 文件

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,456评论 5 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,370评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,337评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,583评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,596评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,572评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,936评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,595评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,850评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,601评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,685评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,371评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,951评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,934评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,167评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,636评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,411评论 2 342

推荐阅读更多精彩内容