第十节 小例子
2018-06-13 本文已影响5人
最美下雨天
1、轮播效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
a {
text-decoration: none;
}
.cle {
clear: both;
}
/*logo 部分的div*/
.header {
width: 100%;
}
.header div {
float: left;
width: 33.33%;
height: 60px;
line-height: 50px;
}
.header a {
padding: 15px;
}
/*菜单部分*/
.menu {
width: 100%;
background-color: #000;
height: 50px;
padding-top: 1px
}
.menu ul li {
list-style-type: none;
display: inline;
}
.menu a {
font-size: 25px;
color: #fff;
}
/*轮播图*/
.lunbo {
width: 100%;
margin-top: 10px;
margin-bottom: 10px;
}
.lunbo img {
width: 100%;
}
/*热门商品*/
/*.left,.right{
float:left;
}*/
.left {
float: left;
width: 16%;
height: 500px;
}
.right {
float: left;
width: 84%;
text-align: center;
height: 500px;
}
.middle {
float: left;
width: 50%;
height: 250px;
}
.item {
float: left;
width: 16.66%;
height: 250px;
}
/*给广告*/
.ad1 {
width: 100%;
}
.ad1 img {
width: 100%;
}
/*版权*/
.foot {
width: 100%;
}
.foot p {
text-align: center;
}
</style>
<!--
实现一个定时器
-->
<script src="../js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
// 入口函数,等价于window.onload
$(function() {
setInterval("changeSrc()", 3000);
})
var index = 1;
function changeSrc() {
index++;
$("#imgId").attr("src", "../img/" + index + ".jpg");
if(index == 3) {
index = 0;
}
}
</script>
</head>
<body>
<!--
一个大div中放置8个div
-->
<div>
<!--logo
嵌套三个div
-->
<div class="header">
<div>
<img src="../img/logo2.png" height="40px" />
</div>
<div>
<img src="../img/header.jpg" />
</div>
<div>
<a href="#">登录</a>
<a href="#">注册</a>
<a href="#">购物车</a>
</div>
</div>
<div class="cle"></div>
<!--菜单-->
<div class="menu">
<ul>
<li>
<a href="#">首页</a>
</li>
<li>
<a href="#">首页</a>
</li>
<li>
<a href="#">首页</a>
</li>
<li>
<a href="#">首页</a>
</li>
</ul>
</div>
<!--轮播图-->
<div class="lunbo">
<img id="imgId" src="../img/1.jpg" />
</div>
<!--热门
将起划分成两个div
左边放图片
右边的放商品
-->
<div class="hot">
<!--存放热门商品和一张图片-->
<div>
<h2 style="display: inline;">热门商品</h2>
<img src="../img/title2.jpg" />
</div>
<div>
<!--存放左边的图片-->
<div class="left">
<img src="../img/big01.jpg" />
</div>
<!--存放商品图片-->
<div class="right">
<div class="middle">
<img src="../img/middle01.jpg" />
</div>
<div class="item">
<img src="../img/small08.jpg" />
<p align="center">
<a href="#">电饭煲</a>
</p>
<p align="center">200</p>
</div>
<div class="item">
<img src="../img/small08.jpg" />
<p align="center">
<a href="#">电饭煲</a>
</p>
<p align="center">200</p>
</div>
<div class="item">
<img src="../img/small08.jpg" />
<p align="center">
<a href="#">电饭煲</a>
</p>
<p align="center">200</p>
</div>
<div class="item">
<img src="../img/small08.jpg" />
<p align="center">
<a href="#">电饭煲</a>
</p>
<p align="center">200</p>
</div>
<div class="item">
<img src="../img/small08.jpg" />
<p align="center">
<a href="#">电饭煲</a>
</p>
<p align="center">200</p>
</div>
<div class="item">
<img src="../img/small08.jpg" />
<p align="center">
<a href="#">电饭煲</a>
</p>
<p align="center">200</p>
</div>
<div class="item">
<img src="../img/small08.jpg" />
<p align="center">
<a href="#">电饭煲</a>
</p>
<p align="center">200</p>
</div>
<div class="item">
<img src="../img/small08.jpg" />
<p align="center">
<a href="#">电饭煲</a>
</p>
<p align="center">200</p>
</div>
<div class="item">
<img src="../img/small08.jpg" />
<p align="center">
<a href="#">电饭煲</a>
</p>
<p align="center">200</p>
</div>
</div>
</div>
</div>
<div class="cle"></div>
<!--广告-->
<div class="ad1">
<img src="../img/ad.jpg" />
</div>
<!--最新-->
<div></div>
<!--广告-->
<div class="ad1">
<img src="../img/footer.jpg" />
</div>
<!--版权foot-->
<div class="foot">
<p>
<a href="#">关于我们</a>
<a href="#">关于我们</a>
<a href="#">关于我们</a>
<a href="#">关于我们</a>
<a href="#">关于我们</a>
</p>
<p>
Copyright © 2005-2016 传智商城 版权所有
</p>
</div>
</div>
</body>
</html>
2、弹出广告
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
a {
text-decoration: none;
}
.cle {
clear: both;
}
/*logo 部分的div*/
.header {
width: 100%;
}
.header div {
float: left;
width: 33.33%;
height: 60px;
line-height: 50px;
}
.header a {
padding: 15px;
}
/*菜单部分*/
.menu {
width: 100%;
background-color: #000;
height: 50px;
padding-top: 1px
}
.menu ul li {
list-style-type: none;
display: inline;
}
.menu a {
font-size: 25px;
color: #fff;
}
/*轮播图*/
.lunbo {
width: 100%;
margin-top: 10px;
margin-bottom: 10px;
}
.lunbo img {
width: 100%;
}
/*热门商品*/
/*.left,.right{
float:left;
}*/
.left {
float: left;
width: 16%;
height: 500px;
}
.right {
float: left;
width: 84%;
text-align: center;
height: 500px;
}
.middle {
float: left;
width: 50%;
height: 250px;
}
.item {
float: left;
width: 16.66%;
height: 250px;
}
/*给广告*/
.ad1 {
width: 100%;
}
.ad1 img {
width: 100%;
}
/*版权*/
.foot {
width: 100%;
}
.foot p {
text-align: center;
}
</style>
<!--
页面打开2秒之后,显示广告,广告显示2秒钟,然后广告消失
-->
<script src="../js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function() {
setTimeout("showAd()", 2000)
})
function showAd() {
$("#ad").slideDown(1000, function() {
setTimeout("hideAd()", 2000)
})
}
function hideAd() {
$("#ad").slideUp(1000)
}
</script>
</head>
<body>
<div id="ad" style="width:100%;display: none;">
<img src="../img/ad_.jpg" width="100%" />
</div>
<!--
一个大div中放置8个div
-->
<div>
<!--logo
嵌套三个div
-->
<div class="header">
<div>
<img src="../img/logo2.png" height="40px" />
</div>
<div>
<img src="../img/header.jpg" />
</div>
<div>
<a href="#">登录</a>
<a href="#">注册</a>
<a href="#">购物车</a>
</div>
</div>
<div class="cle"></div>
<!--菜单-->
<div class="menu">
<ul>
<li>
<a href="#">首页</a>
</li>
<li>
<a href="#">首页</a>
</li>
<li>
<a href="#">首页</a>
</li>
<li>
<a href="#">首页</a>
</li>
</ul>
</div>
<!--轮播图-->
<div class="lunbo">
<img src="../img/1.jpg" />
</div>
<!--热门
将起划分成两个div
左边放图片
右边的放商品
-->
<div class="hot">
<!--存放热门商品和一张图片-->
<div>
<h2 style="display: inline;">热门商品</h2>
<img src="../img/title2.jpg" />
</div>
<div>
<!--存放左边的图片-->
<div class="left">
<img src="../img/big01.jpg" />
</div>
<!--存放商品图片-->
<div class="right">
<div class="middle">
<img src="../img/middle01.jpg" />
</div>
<div class="item">
<img src="../img/small08.jpg" />
<p align="center">
<a href="#">电饭煲</a>
</p>
<p align="center">200</p>
</div>
<div class="item">
<img src="../img/small08.jpg" />
<p align="center">
<a href="#">电饭煲</a>
</p>
<p align="center">200</p>
</div>
<div class="item">
<img src="../img/small08.jpg" />
<p align="center">
<a href="#">电饭煲</a>
</p>
<p align="center">200</p>
</div>
<div class="item">
<img src="../img/small08.jpg" />
<p align="center">
<a href="#">电饭煲</a>
</p>
<p align="center">200</p>
</div>
<div class="item">
<img src="../img/small08.jpg" />
<p align="center">
<a href="#">电饭煲</a>
</p>
<p align="center">200</p>
</div>
<div class="item">
<img src="../img/small08.jpg" />
<p align="center">
<a href="#">电饭煲</a>
</p>
<p align="center">200</p>
</div>
<div class="item">
<img src="../img/small08.jpg" />
<p align="center">
<a href="#">电饭煲</a>
</p>
<p align="center">200</p>
</div>
<div class="item">
<img src="../img/small08.jpg" />
<p align="center">
<a href="#">电饭煲</a>
</p>
<p align="center">200</p>
</div>
<div class="item">
<img src="../img/small08.jpg" />
<p align="center">
<a href="#">电饭煲</a>
</p>
<p align="center">200</p>
</div>
</div>
</div>
</div>
<div class="cle"></div>
<!--广告-->
<div class="ad1">
<img src="../img/ad.jpg" />
</div>
<!--最新-->
<div></div>
<!--广告-->
<div class="ad1">
<img src="../img/footer.jpg" />
</div>
<!--版权foot-->
<div class="foot">
<p>
<a href="#">关于我们</a>
<a href="#">关于我们</a>
<a href="#">关于我们</a>
<a href="#">关于我们</a>
<a href="#">关于我们</a>
</p>
<p>
Copyright © 2005-2016 传智商城 版权所有
</p>
</div>
</div>
</body>
</html>
3、隔行换色
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--
隔行换色,标题行不换色
tr
-->
<script src="../js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>
<script>
$(function() {
$("tr:gt(0):odd").css("background-color", "red")
$("tr:gt(0):even").css("background-color", "blue")
})
</script>
</head>
<body>
<table id="tab1" border="1" width="800" align="center">
<tr style="background-color: #999999;">
<th>分类ID</th>
<th>分类名称</th>
<th>分类描述</th>
<th>操作</th>
</tr>
<tr>
<td>1</td>
<td>手机数码</td>
<td>手机数码类商品</td>
<td>
<a href="">修改</a>|
<a href="">删除</a>
</td>
</tr>
<tr>
<td>2</td>
<td>电脑办公</td>
<td>电脑办公类商品</td>
<td>
<a href="">修改</a>|
<a href="">删除</a>
</td>
</tr>
<tr>
<td>3</td>
<td>鞋靴箱包</td>
<td>鞋靴箱包类商品</td>
<td>
<a href="">修改</a>|
<a href="">删除</a>
</td>
</tr>
<tr>
<td>4</td>
<td>家居饰品</td>
<td>家居饰品类商品</td>
<td>
<a href="">修改</a>|
<a href="">删除</a>
</td>
</tr>
</table>
</body>
</html>
4、全选、取消全选
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function() {
// 绑定点击事件
$("#input_all").click(function() {
// 当前复选框的状态
var status = $(this).prop("checked")
$(".itemSelect").prop("checked",status)
})
})
</script>
</head>
<body>
<table id="tab1" border="1" width="800" align="center">
<tr>
<td colspan="5"><input type="button" value="添加" /> <input type="button" value="删除"></td>
</tr>
<tr>
<th><input type="checkbox" id="input_all"></th>
<th>分类ID</th>
<th>分类名称</th>
<th>分类描述</th>
<th>操作</th>
</tr>
<tr>
<td><input type="checkbox" class="itemSelect"></td>
<td>1</td>
<td>手机数码</td>
<td>手机数码类商品</td>
<td>
<a href="">修改</a>|
<a href="">删除</a>
</td>
</tr>
<tr>
<td><input type="checkbox" class="itemSelect"></td>
<td>2</td>
<td>电脑办公</td>
<td>电脑办公类商品</td>
<td>
<a href="">修改</a>|
<a href="">删除</a>
</td>
</tr>
<tr>
<td><input type="checkbox" class="itemSelect"></td>
<td>3</td>
<td>鞋靴箱包</td>
<td>鞋靴箱包类商品</td>
<td>
<a href="">修改</a>|
<a href="">删除</a>
</td>
</tr>
<tr>
<td><input type="checkbox" class="itemSelect"></td>
<td>4</td>
<td>家居饰品</td>
<td>家居饰品类商品</td>
<td>
<a href="">修改</a>|
<a href="">删除</a>
</td>
</tr>
</table>
</body>
</html>
5、省市联动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
// 定义二维数组:
var arr = new Array(4);
arr[0] = new Array("哈尔滨", "齐齐哈尔", "大庆", "佳木斯");
arr[1] = new Array("长春市", "吉林市", "四平市", "通化市");
arr[2] = new Array("沈阳市", "锦州市", "大连市", "铁岭市");
arr[3] = new Array("郑州市", "洛阳市", "安阳市", "南阳市");
</script>
<script src="../js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>
<script>
$(function() {
$('[name="pro"]').change(function() {
// this 代表的是省的下拉列表
var cityArr = arr[this.value];
// 清空的操作
$('[name="city"]').html("<option>-请选择-</option>")
$.each(cityArr, function() {
// this 代表的是二维数组中每一个城市
// 新建的option节点
$('[name="city"]').append($("<option>").html(this))
});
})
})
</script>
</head>
<body>
<form action="#" method="get">
<input type="hidden" name="id" value="007" /> 姓名:
<input name="username" value="xuduoduo" /><br> 密码:
<input type="password" name="password" value="123"><br> 性别:
<input type="radio" name="sex" value="1" checked="checked">男
<input type="radio" name="sex" value="0">女
<br> 爱好:
<input type="checkbox" name="hobby" value="eat">吃
<input type="checkbox" name="hobby" value="drink" checked="checked">喝
<input type="checkbox" name="hobby" value="sleep" checked="checked">睡
<br> 头像:
<input type="file" name="photo"><br> 籍贯:
<select name="pro">
<option>-请选择-</option>
<option value="0">黑龙江</option>
<option value="1">吉林</option>
<option value="2">辽宁</option>
<option value="3">河南</option>
</select>
<select name="city">
<option>-请选择-</option>
</select>
<br> 自我介绍:
<textarea name="intr" cols="40" rows="4">good!</textarea>
<br>
<input type="submit" value="保存" />
<input type="reset" />
<input type="button" value="普通按钮" />
</form>
</body>
</html>
<!--
-->
6、左右选中
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>左右选中.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
</script>
<style>
input[type='button'] {
width: 50px;
}
</style>
<script src="../js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>
<script>
$(function() {
// 把选中的数据中第一条数据添加到右侧
$("#toRight1").click(function() {
$("#right").append($("#left option:selected:first"))
})
// 把选中的数据添加到右侧
$("#toRight2").click(function() {
$("#right").append($("#left option:selected"))
})
// 把左侧所有的数据添加到右侧
$("#toRight3").click(function() {
$("#right").append($("#left option"))
})
})
</script>
</head>
<body>
<table>
<tr>
<td>
<!--
multiple : 能否多选
size: 一次可以展示多少条数据
-->
<select id="left" multiple="true" style="width:100px" size="10">
<option>環</option>
<option>芈</option>
<option>琅</option>
<option>琊</option>
<option>爨</option>
<option>甄</option>
<option>槑</option>
<option>夔</option>
</select>
</td>
<td>
<input type="button" value=">" id="toRight1"><br>
<input type="button" value=">>" id="toRight2"><br>
<input type="button" value=">>>" id="toRight3"><br><br>
<input type="button" value="<" id="toLeft1"><br>
<input type="button" value="<<" id="toLeft2"><br>
<input type="button" value="<<<" id="toLeft3">
</td>
<td>
<select id="right" multiple="true" style="width:100px" size="10">
</select>
</td>
</tr>
</table>
</body>
</html>
