Heml简单案例实现

案例一:实现简单的用户注册js校验:

 

代码:

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style>

            /*CSS渲染*/

            

            body {

                height: 500px;

            }

        
 

            #out {

                background: url(../img/regist_bg.jpg);

                height: 100%;

                padding-top: 80px;

            }

            

            #inner {

                border: 5px double blueviolet;

                width: 800px;

                margin: 0 auto;

                padding: 20px;

                background-color: white;

            }

        </style>

        <script>

            function fsub() {

                /*

                 * 步骤一:先来一个页面

                 * 步骤二:onsubmit绑定事件

                 * 步骤三:得到用户名和密码的值

                 * 步骤四:判断用户名和密码是否为空

                 * 步骤五:正常提交

                 */

                //获取用户名值

                var username = document.getElementById("username").value;

                //获取密码值

                var password = document.getElementById("password").value;

                //获取确认密码值

                var password2 = document.getElementById("password2").value;

                //获取Email的值

                var email = document.getElementById("email").value;

                //获取出生日期的值

                var date = document.getElementById("date").value;

                //获取验证码值

                var yzm = document.getElementById("yzm").value;

                

                //判断

                if (username == "") {

                    //alert("用户名不能为空");

                    document.getElementById("sp1").innerHTML = "<font color='red'>用户名不能为空</font>";

                    return false;

                } else {

                    document.getElementById("sp1").innerHTML = "";

                }

                if (password == "") {

                    //alert("密码不能为空");

                    document.getElementById("sp2").innerHTML = "<font color='red'>密码不能为空</font>";

                    return false;

                } else {

                    document.getElementById("sp2").innerHTML = "";

                }

 

                if (password2 == "") {

                    document.getElementById("sp3").innerHTML = "<font color='red'>确认密码不能为空</font>";

                    return false;

                } else {

                    document.getElementById("sp3").innerHTML = "";

                }

                if (password != password2) {

                    document.getElementById("sp3").innerHTML = "<font color='red'>两次密码输入不同</font>";

                    return false;

                } else {

                    document.getElementById("sp3").innerHTML = "";

                }

 

                if (email == "") {

                    document.getElementById("sp4").innerHTML = "<font color='red'>Email不能为空</font>";

                    return false;

                } else {

                    document.getElementById("sp4").innerHTML = "";

                }

 

                if (date == "") {

                    document.getElementById("sp5").innerHTML = "<font color='red'>还未选择出生日期</font>";

                    return false;

                } else {

                    document.getElementById("sp5").innerHTML = "";

                }

 

                if (yzm == "") {

                    document.getElementById("sp6").innerHTML = "<font color='red'>验证码不能为空</font>";

                    return false;

                } else {

                    document.getElementById("sp6").innerHTML = "";

 

                }

                return true;

            }

        </script>

    </head>

 

    <body>

        <div id="out">

            <div id="inner">

                <form action="success.html" method="get" onsubmit="return fsub()">

 

                    <table width="60%" align="center">

                        <tr>

                            <td colspan="3">

                                <font color="blueviolet" size="4">会员注册</font>

                                USER REGISTER

                            </td>

                        </tr>

 

                        <tr>

                            <td align="right">用户名:</td>

                            <td colspan="2">

                                <input type="text" id="username" name="username" size="30" />

                                <span id="sp1"></span>

                            </td>

                        </tr>

 

                        <tr>

                            <td align="right">密码:</td>

                            <td colspan="2">

                                <input type="password" id="password" name="password" size="30" />

                                <span id="sp2"></span>

                            </td>

                        </tr>

 

                        <tr>

                            <td align="right">确认密码:</td>

                            <td colspan="2">

                                <input type="password" id="password2" name="password2" size="30" />

                                <span id="sp3"></span>

                            </td>

                        </tr>

 

                        <tr>

                            <td align="right">Email:</td>

                            <td colspan="2">

                                <input type="text" id="email" name="email" size="30" />

                                <span id="sp4"></span>

                            </td>

                        </tr>

 

                        <tr>

                            <td align="right">性别:</td>

                            <td colspan="2">

                                <input type="radio" name="sex" value="1" checked="checked" />男

                                <input type="radio" name="sex" value="0" />女

                            </td>

                        </tr>

 

                        <tr>

                            <td align="right">出生日期:</td>

                            <td colspan="2">

                                <input type="date" id="date" name="date" />

                                <span id="sp5"></span>

                            </td>

                        </tr>

 

                        <tr>

                            <td align="right">验证码:</td>

                            <td colspan="2">

                                <input type="text" id="yzm" name="yzm" size="7" maxlength="4" />

                                <input type="image" src="../img/captcha.jhtml" />

                                <span id="sp6"></span>

                            </td>

                        </tr>

 

                        <tr>

                            <td colspan="3" align="center">

                                <input type="submit" width="100" value="注册" style="background: url(../img/register.gif)

                                 no-repeat scroll 0 0 rgba(0, 0, 0, 0); height:35px;width:100px;color:white;" />

                            </td>

                        </tr>

 

                    </table>

 

                </form>

 

            </div>

        </div>

    </body>

 

</html>

案例二:网站首页页面显示及轮播广告(table实现)

 

代码:

<!DOCTYPE html>

<html>

 

    <head>

        <meta charset="UTF-8">

        <title></title>

        <script>

 

header 1 | header 2

---|---

row 1 col 1 | row 1 col 2

row 2 col 1 | row 2 col 2

 

header 1 | header 2

---|---

row 1 col 1 | row 1 col 2

row 2 col 1 | row 2 col 2

 

 

header 1 | header 2

---|---

row 1 col 1 | row 1 col 2

row 2 col 1 | row 2 col 2

 

 

            function init() {

                ////调用定时器,设置时间间隔3s

                setInterval("changeimage()", 3000);

            }

 

            var i = 1;

 

            function changeimage() {

                //得到引入标签对象    

                var im = document.getElementById("img1");

                i++;

                if (i == 4) {

                    i = 1;

                    //获取图片的src属性,通过src属性改变图片的地址

                    im.src = "../img/" + i + ".jpg";

                } else {

                    im.src = "../img/" + i + ".jpg";

                }

            }

        </script>

 

    </head>

 

    <body onload="init()">

        <!--

    作者:843516185@qq.com

    时间:2016-08-12

    描述:网站首页显示

-->

 

        <table width="95%" align="left">

            <tr>

                <td>

                    <img src="../img/logo2.png" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

                    <img src="../img/header.jpg" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

                    <a href="#">登录</a>

                    <a href="#">注册</a>

                    <a href="#">购物车</a>

                </td>

            </tr>

 

            <tr>

                <td bgcolor="black" height="50px">

                    <font color="white">首页</font>

                    <font color="white">手机数码</font>

                    <font color="white">电脑办公</font>

                </td>

            </tr>

 

            <tr>

                <td>

                    <img id="img1" src="../img/1.jpg" width="100%" />

                </td>

            </tr>

 

            <tr>

                <td>

                    <h2>热门商品<img src="../img/title2.jpg" /></h2>

                </td>

            </tr>

 

            <tr>

                <td>

                    <table width="100%">

                        <tr>

                            <td rowspan="2">

                                <img src="../img/big01.jpg" />

                            </td>

                            <td colspan="3">

                                <img src="../img/middle01.jpg" />

                            </td>

                            <td align="center">

                                <img src="../img/small01.jpg" width="150px" />

                                <p><a href="#">¥998</a></p>

                            </td>

                            <td align="center">

                                <img src="../img/small02.jpg" width="150px" />

                                <p><a href="#">¥998</a></p>

                            </td>

                            <td align="center">

                                <img src="../img/small03.jpg" width="150px" />

                                <p><a href="#">¥998</a></p>

                            </td>

                        </tr>

                        <tr>

                            <td align="center">

                                <img src="../img/small04.jpg" width="150px" />

                                <p><a href="#">¥998</a></p>

                            </td>

                            <td align="center">

                                <img src="../img/small05.jpg" width="150px" />

                                <p><a href="#">¥998</a></p>

                            </td>

                            <td align="center">

                                <img src="../img/small06.jpg" width="150px" />

                                <p><a href="#">¥998</a></p>

                            </td>

                            <td align="center">

                                <img src="../img/small07.jpg" width="150px" />

                                <p><a href="#">¥998</a></p>

                            </td>

                            <td align="center">

                                <img src="../img/small08.jpg" width="150px" />

                                <p><a href="#">¥998</a></p>

                            </td>

                            <td align="center">

                                <img src="../img/small09.jpg" width="150px" />

                                <p><a href="#">¥998</a></p>

                            </td>

                        </tr>

                    </table>

                </td>

 

            </tr>

 

            <tr>

                <td>

                    <img src="../img/ad.jpg" width="100%" />

                </td>

            </tr>

 

            <!--热门商品 start-->

            <tr>

                <td>

                    <h2>热门商品<img src="../img/title2.jpg"</h2>

                </td>

            </tr>

            <!--热门商品 end-->

 

            <tr>

                <td>

                    <table width="100%">

                        <tr>

                            <td align="center">

                                <img src="../products/5632c2eeNbc918af0.jpg" width="150px" />

                                <p><a href="#">¥6.9</a></p>

                                <p>惊爆价</p>

                            </td>

                            <td align="center">

                                <img src="../products/c_0001.jpg" width="150px" />

                                <p><a href="#">¥6.9</a></p>

                                <p>惊爆价</p>

                            </td>

                            <td align="center">

                                <img src="../products/c_0002.jpg" width="150px" />

                                <p><a href="#">¥6.9</a></p>

                                <p>惊爆价</p>

                            </td>

                            <td align="center">

                                <img src="../products/c_0003.jpg" width="150px" />

                                <p><a href="#">¥6.9</a></p>

                                <p>惊爆价</p>

                            </td>

                            <td align="center">

                                <img src="../products/c_0004.jpg" width="150px" />

                                <p><a href="#">¥6.9</a></p>

                                <p>惊爆价</p>

                            </td>

                            <td align="center">

                                <img src="../products/c_0005.jpg" width="150px" />

                                <p><a href="#">¥6.9</a></p>

                                <p>惊爆价</p>

                            </td align="center">

                            <td rowspan="2">

                                <img src="../img/big01.jpg" />

                            </td>

                        </tr>

 

                        <tr>

                            <td align="center">

                                <img src="../products/c_0006.jpg" width="150px" />

                                <p><a href="#">¥6.9</a></p>

                                <p>惊爆价</p>

                            </td>

                            <td align="center">

                                <img src="../products/c_0007.jpg" width="150px" />

                                <p><a href="#">¥6.9</a></p>

                                <p>惊爆价</p>

                            </td>

                            <td align="center">

                                <img src="../products/dn2.jpg" width="150px" />

                                <p><a href="#">¥6.9</a></p>

                                <p>惊爆价</p>

                            </td>

 

                            <td colspan="3" align="center">

                                <img src="../products/hao/middle01.jpg"></img>

                            </td>

                        </tr>

                    </table>

                </td>

            </tr>

 

            <tr>

                <td>

                    <img src="../img/footer.jpg" width="100%" />

                </td>

            </tr>

 

            <tr>

                <td align="center">

                    <a href="../案例一:网站信息页面显示/网站信息页面显示.html">关于我们</a>

                    <a href="">联系我们</a>

                    <a href="">招贤纳士</a>

                    <a href="">法律声明</a>

                    <a href="link.html">友情链接</a>

                    <a href="">支付方式</a>

                    <a href="">配送方式</a>

                    <a href="">服务声明</a>

                    <a href="">广告声明</a>

                    <br/> Copyright © 2005-2016 传智商城 版权所有

                </td>

            </tr>

 

    </body>

 

</html>

 

 

案例三: 网站首页显示及定时首页弹广告(div与css实现)

 

 

代码:

<!DOCTYPE html>

<html>

 

    <head>

        <meta charset="UTF-8">

        <title>网站的首页</title>

        <link href="../css/main.css" rel="stylesheet" type="text/css" />

        <style>

            .product {

                border: 1px solid gray;

                width: 16%;

                height: 250px;

                float: left;

            }

        </style>

        <script>

            /*步骤一:来一个页面。

            步骤二:页面上写一个广告图片。

            步骤三:将图片隐藏。

            步骤四:写一个定时器,指定时间显示。

            步骤五:指定时间隐藏。*/

 

            var t;

            function init() {

 

                /*写一个定时器,指定时间显示。*/

                t = setTimeout("shows()", 3000);

            }

 

            function shows() {

 

                document.getElementById("addiv").style.display = "block"; //显示

                clearTimeout(t);

 

                t = setTimeout("hides()", 3000);

 

            }

 

            function hides() {

 

                document.getElementById("addiv").style.display = "none"; //隐藏

 

                clearTimeout(t);

            }

        </script>

    </head>

 

    <body onload="init()" >

        <!-- 整体的DIV -->

        <div>

            <div id="addiv" style="display: none;">

                <img src="../img/f001a62f-a49d-4a4d-b56f-2b6908a0002c_g.jpg" width="99%" />

            </div>

            <!-- LOGO部分的DIV -->

            <div>

                <!--分成三个小的DIV-->

                <div class="top">

                    <img src="../img/logo2.png" height="48" />

                </div>

                <div class="top">

                    <img src="../img/header.png" height="48" />

                </div>

                <div class="top" style="padding-top: 10px;height: 40px;">

                    <a href="#">登录</a>

                    <a href="#">注册</a>

                    <a href="#">购物车</a>

                </div>

            </div>

 

            <!--清除浮动-->

            <div class="clear"></div>

            <!-- 菜单部分的DIV-->

            <div class="menu">

                <ul>

                    <li style="display: inline;">首页</li>

                    <li style="display: inline;">电脑办公</li>

                    <li style="display: inline;">手机数码</li>

                    <li style="display: inline;">鞋靴箱包</li>

                </ul>

            </div>

            <!-- 图片轮播的DIV -->

            <div style="width: 99%;">

                <img src="../img/1.jpg" width="100%">

            </div>

            <!-- 商品展示的DIV -->

            <div style="border:1px solid green;width: 99%;">

                <!--标题的DIV-->

                <div>

                    <h2>最新商品<img src="../img/title2.jpg"></h2></div>

                <!-- 左侧的广告位的DIV -->

                <div style="width:15%;height:500px;border: 1px solid red;float:left;">

                    <img src="../products/hao/big01.jpg" width="100%" height="100%" />

                </div>

                <!-- 右侧的商品显示的DIV -->

                <div style="border:1px solid blue;width:84%;float: left;">

                    <div>

                        <!-- 横向广告部分 -->

                        <div style="border:1px solid blue;width:50%;height: 250px;float:left;">

                            <img src="../products/hao/middle01.jpg" width="100%" height="100%" />

                        </div>

                        <!--商品的DIV-->

                        <div class="product" align="center">

                            <img src="../products/hao/small04.jpg" />

                            <p>电饭煲</p>

                            <p style="color:red;">¥299</p>

                        </div>

                        <div class="product" align="center">

                            <img src="../products/hao/small04.jpg" />

                            <p>电饭煲</p>

                            <p style="color:red;">¥299</p>

                        </div>

                        <div class="product">

                            <img src="../products/hao/small04.jpg" />

                            <p>电饭煲</p>

                            <p style="color:red;">¥299</p>

                        </div>

                        <div class="product" align="center">

                            <img src="../products/hao/small04.jpg" />

                            <p>电饭煲</p>

                            <p style="color:red;">¥299</p>

                        </div>

                        <div class="product" align="center">

                            <img src="../products/hao/small04.jpg" />

                            <p>电饭煲</p>

                            <p style="color:red;">¥299</p>

                        </div>

                        <div class="product" align="center">

                            <img src="../products/hao/small04.jpg" />

                            <p>电饭煲</p>

                            <p style="color:red;">¥299</p>

                        </div>

                        <div class="product" align="center">

                            <img src="../products/hao/small04.jpg" />

                            <p>电饭煲</p>

                            <p style="color:red;">¥299</p>

                        </div>

                        <div class="product" align="center">

                            <img src="../products/hao/small04.jpg" />

                            <p>电饭煲</p>

                            <p style="color:red;">¥299</p>

                        </div>

                        <div class="product" align="center">

                            <img src="../products/hao/small04.jpg" />

                            <p>电饭煲</p>

                            <p style="color:red;">¥299</p>

                        </div>

 

                    </div>

                </div>

            </div>

            <div style="width:99%;">

                <img src="../products/hao/ad.jpg" width="100%" />

            </div>

            <div style="border:1px solid green;width: 99%;">

                <!--标题的DIV-->

                <div>

                    <h2>最新商品<img src="../img/title2.jpg"></h2></div>

                <!-- 左侧的广告位的DIV -->

                <div style="width:15%;height:500px;border: 1px solid red;float:left;">

                    <img src="../products/hao/big01.jpg" width="100%" height="100%" />

                </div>

                <!-- 右侧的商品显示的DIV -->

                <div style="border:1px solid blue;width:84%;float: left;">

                    <div>

                        <!-- 横向广告部分 -->

                        <div style="border:1px solid blue;width:50%;height: 250px;float:left;">

                            <img src="../products/hao/middle01.jpg" width="100%" height="100%" />

                        </div>

                        <!--商品的DIV-->

                        <div class="product" align="center">

                            <img src="../products/hao/small04.jpg" />

                            <p>电饭煲</p>

                            <p style="color:red;">¥299</p>

                        </div>

                        <div class="product" align="center">

                            <img src="../products/hao/small04.jpg" />

                            <p>电饭煲</p>

                            <p style="color:red;">¥299</p>

                        </div>

                        <div class="product" align="center">

                            <img src="../products/hao/small04.jpg" />

                            <p>电饭煲</p>

                            <p style="color:red;">¥299</p>

                        </div>

                        <div class="product" align="center">

                            <img src="../products/hao/small04.jpg" />

                            <p>电饭煲</p>

                            <p style="color:red;">¥299</p>

                        </div>

                        <div class="product" align="center">

                            <img src="../products/hao/small04.jpg" />

                            <p>电饭煲</p>

                            <p style="color:red;">¥299</p>

                        </div>

                        <div class="product" align="center">

                            <img src="../products/hao/small04.jpg" />

                            <p>电饭煲</p>

                            <p style="color:red;">¥299</p>

                        </div>

                        <div class="product" align="center">

                            <img src="../products/hao/small04.jpg" />

                            <p>电饭煲</p>

                            <p style="color:red;">¥299</p>

                        </div>

                        <div class="product" align="center">

                            <img src="../products/hao/small04.jpg" />

                            <p>电饭煲</p>

                            <p style="color:red;">¥299</p>

                        </div>

                        <div class="product" align="center">

                            <img src="../products/hao/small04.jpg" />

                            <p>电饭煲</p>

                            <p style="color:red;">¥299</p>

                        </div>

 

                    </div>

                </div>

            </div>

            <div>

                <img src="../img/footer.jpg" />

            </div>

            <div align="center">

                <a href="../案例一:网站信息页面显示/网站信息页面显示.html">关于我们</a>

                <a href="">联系我们</a>

                <a href="">招贤纳士</a>

                <a href="">法律声明</a>

                <a href="link.html">友情链接</a>

                <a href="">支付方式</a>

                <a href="">配送方式</a>

                <a href="">服务声明</a>

                <a href="">广告声明</a>

                <br/> Copyright © 2005-2016 传智商城 版权所有

            </div>

        </div>

    </body>

 

</html>

小温

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: