欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

前端基础系列(四)JavaScript基础(上篇)

程序员文章站 2022-05-08 08:44:44
...

一、使用JS完成表单检验

<!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_-])aaa@qq.com([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 src="../img/logo2.png" height="47px" />
                            </td>
                            <td width="33.3%">
                                <img src="../img/header.png" height="47px" />
                            </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">
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    <a href="#">
                        <font size="5" color="white">首页</font>
                    </a> &nbsp;&nbsp;&nbsp;&nbsp;
                    <a href="#">
                        <font color="white">手机数码</font>
                    </a>&nbsp;&nbsp;&nbsp;&nbsp;
                    <a href="#">
                        <font color="white">电脑办公</font>
                    </a>&nbsp;&nbsp;&nbsp;&nbsp;
                    <a href="#">
                        <font color="white">鞋靴箱包</font>
                    </a>&nbsp;&nbsp;&nbsp;&nbsp;
                    <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> &nbsp;&nbsp;&nbsp;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 src="../img/yanzhengma.png" />
                                </td>
                            </tr>
                            <tr>
                                <td colspan="2">
                                    <input type="submit" value="注册" />
                                </td>
                            </tr>
                        </table>
                    </form>
                </td>               
            </tr>
            <!--4.广告图片-->
            <tr>
                <td>
                    <img src="../img/footer.jpg"  width="100%"/>
                </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>

运行结果:
前端基础系列(四)JavaScript基础(上篇)

二、使用JS完成首页轮播图

(1)先看个小例子:切换图片

<!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 src="../../img/1.jpg" width="100%" height="100%" id="img1"/>
        </div>
    </body>
</html>

运行结果:点击按钮的时候会切换图片
前端基础系列(四)JavaScript基础(上篇)
再次点击按钮的时候切换图片
前端基础系列(四)JavaScript基础(上篇)

(2)先完成首页轮播图

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>首页</title>
        <style>
            #father{
                border: 0px solid red;
                width: 1300px;
                height: 2170px;
                margin: auto;
            }
            /*#logo{
                border: 0px solid black;
                width: 1300px;
                height: 50px;
            }*/
            .top{
                border: 0px solid blue;
                width: 431px;
                height: 50px;
                float: left;
            }
            #top{
                padding-top: 12px;
                height: 38px;
            }
            #menu{
                border: 0px solid red;
                width: 1300px;
                height: 50px;
                background-color: black;
                margin-bottom: 10px;
            }
            ul li{
                display: inline;
                color: white;
            }
            #clear{
                clear: both;
            }

            #product{
                border: 0px solid red;
                width: 1300px;
                height: 558px;
            }
            #product_top{
                border: 0px solid blue;
                width: 100%;
                height: 45px;
                padding-top: 8px;
            }
            #product_bottom{
                border: 0px solid green;
                width: 100%;
                height: 500px;
            }
            #product_bottom_left{
                border: 0px solid red;
                width: 200px;
                height: 500px;
                float: left;
            }
            #product_bottom_right{
                border: 0px solid blue;
                width: 1094px;
                height: 500px;
                float: left;
            }
            #big{
                border: 0px solid red;
                width: 544px;
                height: 248px;
                float: left;
            }
            .small{
                border: 0px solid blue;
                width: 180px;
                height: 248px;
                float: left;
                /*让里面的内容居中*/
                text-align: center;
            }

            #bottom{
                text-align: center;
            }

            a{
                text-decoration: none;
            }
        </style>
        <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>
    </head>
    <body onload="init()">
        <div id="father">
            <!--定时弹出广告图片位置-->
            <img src="../img/f001a62f-a49d-4a4d-b56f-2b6908a0002c_g.jpg" width="100%" style="display: none"/>

            <!--1.logo部分-->
            <div id="logo">
                <div class="top">
                    <img src="../img/logo2.png" height="46px"/>
                </div>
                <div class="top">
                    <img src="../img/header.png" height="46px" />
                </div>
                <div class="top" id="top">
                    <a href="#">登录</a>
                    <a href="#">注册</a>
                    <a href="#">购物车</a>
                </div>
            </div>
            <div id="clear">

            </div>
            <!--2.导航栏部分-->
            <div id="menu">
                <ul>
                    <a href="#"><li style="font-size: 20px;">首页</li></a>&nbsp;&nbsp;&nbsp;&nbsp;
                    <a href="#"><li>手机数码</li></a>&nbsp;&nbsp;&nbsp;&nbsp;
                    <a href="#"><li>家用电器</li></a>&nbsp;&nbsp;&nbsp;&nbsp;
                    <a href="#"><li>鞋靴箱包</li></a>&nbsp;&nbsp;&nbsp;&nbsp;
                    <a href="#"><li>孕婴保健</li></a>&nbsp;&nbsp;&nbsp;&nbsp;
                    <a href="#"><li>奢侈品</li></a>
                </ul>
            </div>
            <!--3.轮播图部分-->
            <div id="">
                <img src="../img/1.jpg" width="100%" id="img1"/>
            </div>
            <!--4.最新商品-->
            <div id="product">
                <div id="product_top">
                    &nbsp;&nbsp;&nbsp;
                    <span style="font-size: 25px;padding-top: 8px;">最新商品</span>&nbsp;&nbsp;&nbsp;
                    <img src="../img/title2.jpg" />
                </div>
                <div id="product_bottom">
                    <div id="product_bottom_left">
                        <img src="../img/big01.jpg" width="100%" height="100%"/>
                    </div>
                    <div id="product_bottom_right">
                        <div id="big">
                            <a href="#"><img src="../img/middle01.jpg" width="100%" height="100%"/></a>
                        </div>
                        <div class="small">
                            <img src="../img/small03.jpg" />
                            <a href="#"><p style="color: gray;">电炖锅</p></a>
                            <p style="color: red;">¥399</p>
                        </div>
                        <div class="small">
                            <img src="../img/small03.jpg" />
                            <a href="#"><p style="color: gray;">电炖锅</p></a>
                            <p style="color: red;">¥399</p>
                        </div>
                        <div class="small">
                            <img src="../img/small03.jpg" />
                            <a href="#"><p style="color: gray;">电炖锅</p></a>
                            <p style="color: red;">¥399</p>
                        </div>
                        <div class="small">
                            <img src="../img/small03.jpg" />
                            <a href="#"><p style="color: gray;">电炖锅</p></a>
                            <p style="color: red;">¥399</p>
                        </div>
                        <div class="small">
                            <img src="../img/small03.jpg" />
                            <a href="#"><p style="color: gray;">电炖锅</p></a>
                            <p style="color: red;">¥399</p>
                        </div>
                        <div class="small">
                            <img src="../img/small03.jpg" />
                            <a href="#"><p style="color: gray;">电炖锅</p></a>
                            <p style="color: red;">¥399</p>
                        </div>
                        <div class="small">
                            <img src="../img/small03.jpg" />
                            <a href="#"><p style="color: gray;">电炖锅</p></a>
                            <p style="color: red;">¥399</p>
                        </div>
                        <div class="small">
                            <img src="../img/small03.jpg" />
                            <a href="#"><p style="color: gray;">电炖锅</p></a>
                            <p style="color: red;">¥399</p>
                        </div>
                        <div class="small">
                            <img src="../img/small03.jpg" />
                            <a href="#"><p style="color: gray;">电炖锅</p></a>
                            <p style="color: red;">¥399</p>
                        </div>
                    </div>
                </div>
            </div>
            <!--5.广告图片-->
            <div id="">
                <img src="../img/ad.jpg" width="100%"  />
            </div>
            <!--6.热门商品-->
            <div id="product">
                <div id="product_top">
                    &nbsp;&nbsp;&nbsp;
                    <span style="font-size: 25px;padding-top: 8px;">热门商品</span>&nbsp;&nbsp;&nbsp;
                    <img src="../img/title2.jpg" />
                </div>
                <div id="product_bottom">
                    <div id="product_bottom_left">
                        <img src="../img/big01.jpg" width="100%" height="100%"/>
                    </div>
                    <div id="product_bottom_right">
                        <div id="big">
                            <a href="#"><img src="../img/middle01.jpg" width="100%" height="100%"/></a>
                        </div>
                        <div class="small">
                            <img src="../img/small03.jpg" />
                            <a href="#"><p style="color: gray;">电炖锅</p></a>
                            <p style="color: red;">¥399</p>
                        </div>
                        <div class="small">
                            <img src="../img/small03.jpg" />
                            <a href="#"><p style="color: gray;">电炖锅</p></a>
                            <p style="color: red;">¥399</p>
                        </div>
                        <div class="small">
                            <img src="../img/small03.jpg" />
                            <a href="#"><p style="color: gray;">电炖锅</p></a>
                            <p style="color: red;">¥399</p>
                        </div>
                        <div class="small">
                            <img src="../img/small03.jpg" />
                            <a href="#"><p style="color: gray;">电炖锅</p></a>
                            <p style="color: red;">¥399</p>
                        </div>
                        <div class="small">
                            <img src="../img/small03.jpg" />
                            <a href="#"><p style="color: gray;">电炖锅</p></a>
                            <p style="color: red;">¥399</p>
                        </div>
                        <div class="small">
                            <img src="../img/small03.jpg" />
                            <a href="#"><p style="color: gray;">电炖锅</p></a>
                            <p style="color: red;">¥399</p>
                        </div>
                        <div class="small">
                            <img src="../img/small03.jpg" />
                            <a href="#"><p style="color: gray;">电炖锅</p></a>
                            <p style="color: red;">¥399</p>
                        </div>
                        <div class="small">
                            <img src="../img/small03.jpg" />
                            <a href="#"><p style="color: gray;">电炖锅</p></a>
                            <p style="color: red;">¥399</p>
                        </div>
                        <div class="small">
                            <img src="../img/small03.jpg" />
                            <a href="#"><p style="color: gray;">电炖锅</p></a>
                            <p style="color: red;">¥399</p>
                        </div>
                    </div>
                </div>
            </div>
            <!--7.广告图片-->
            <div id="">
                <img src="../img/footer.jpg" width="100%"/>
            </div>
            <!--8.友情链接和版权信息-->
            <div id="bottom">
                <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-2018 火之意志 版权所有 
                </p>
            </div>
        </div>
    </body>
</html>

运行结果:
前端基础系列(四)JavaScript基础(上篇)
3秒之后图片切换:
前端基础系列(四)JavaScript基础(上篇)

三、JS引入方式

(1)内部引入方式:

<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;
        }
}
</script>

(2)外部引入方式:
在head标签里面加入代码:

<script type="text/javascript" src="1.js" ></script>