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” /> <img src=”../img/header.jpg” /> <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> |
