北大青鸟 JQuery制作特效 第二章 （上机练习
练习一丶制作简易的当当购物车页面
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>制作简易的当当购物车页面</title>
<link type="text/css" rel="stylesheet" href="css/cartStyle.css" />
</head>
<body onload="open();">
<div class="content">
<div class="logo">
<img src="images/dd_logo.jpg"><span onclick="closeAll()">关闭</span>
</div>
<div class="cartList">
<ul7>
<li>移入收藏</li>
<li>删除</li>
<li>移入收藏</li>
<li>删除</li>
<li><span>结 算</span></li>
</ul7>
</div>
<script type="text/javascript">
//开
function open(){
window.open("adv.html","","");
}
function closeAll(){
window.close();
}
</script>
</div>
</body>
</html>
//这是adv.html内容：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1><span>我是弹出来的</span></h1>
</body>
</html>
练习二丶查看一年四季的变化
主页面：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>查看一年四季的变化</title>
<style type="text/css">
table{
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
border-top:1px #cccccc solid;
border-left:1px #cccccc solid;
width:400px;
}
img{
border:0;
padding:5px;
}
td{
font-size:14px;
line-height:25px;
text-align:center;
border-bottom:1px #cccccc solid;
border-right:1px #cccccc solid;
}
</style>
</head>
<body><table border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="images/1.jpg" /></td>
<td><img src="images/2.jpg" /></td>
</tr>
<tr>
<td><a href="javascript:location.href = 'spring.html'">春</a></td>
<td><a href="javascript:location.href = 'summer.html'">夏</a></td>
</tr>
<tr>
<td><img src="images/3.jpg" /></td>
<td><img src="images/4.jpg" /></td>
</tr>
<tr>
<td><a href="javascript:location.href = 'autumn.html'">秋</a></td>
<td><a href="javascript:location.href = 'winter.html'">冬</a></td>
</tr>
<tr>
<td colspan="2"><a href="javascript:location.reload()">刷新本页</a></td>
</tr>
</table>
</body>
</html>
春：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>春</title>
<style type="text/css">
body{margin:0;}
img{
border:0;
padding:5px;
}
td{
font-size:14px;
line-height:20px;
}
</style>
</head>
<body><table border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="images/spring.jpg" alt="春天" /></td>
<td>春来――爆竹声中一岁除，春风送暖入屠苏<br />
春雨――小楼一夜听春雨，深巷明朝卖杏花<br />
春花――惆怅东栏一株雪，人生看得几清明<br />
春风――春风又绿江南岸，明月何时照我还<br />
春光――等闲识得东风面，万紫千红总是春<br />
春景――试上超然台上看，半壕春水一城花<br />
春游――东风知我欲山，吹断檐间积雨声 <br />
春思――春心莫共花争发，一寸相思一寸灰<br />
春寂――春潮带雨晚来急，野渡无人舟自横<br />
春愁――问君能有几多愁，恰似一江春水向东流<br />
春梦――枕上片时春梦中，行尽江南数千里<br />
春恨――人生自是有情痴，此恨不关风和月<br />
春归――落红不是无情物，化作春泥更护花<br />
<a href="javascript:location.href = 'summer.html'">夏天</a> <a href="javascript:location.href = 'autumn.html'">秋天</a> <a href="javascript:location.href = 'winter.html'">冬天</a> <a href="javascript:history.back()">后退</a> <a href="javascript:history.forward()">前进</a></td>
</tr>
</table>
</body>
</html>
夏：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>夏</title>
<style type="text/css">
body{margin:0;}
img{
border:0;
padding:5px;
}
td{
font-size:14px;
line-height:23px;
}
</style>
</head>
<body><table border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="images/summer.jpg" alt="夏天" /></td>
<td>夏颂――纳清风台榭开怀，傍流水亭轩赏心<br />
夏初――槐柳成阴雨洗尘，樱桃乳酪并尝新<br />
夏热――日轮当午凝不去，万国如在洪炉中<br />
夏雨――风声撼山翻怒涛，雨点飞空射强弩<br />
夏水――涧影见藤竹，潭香闻芰荷<br />
夏夜――散发乘夕凉，开轩卧闲敞<br />
夏花――荷叶罗裙一色裁，芙蓉向脸两边开<br />
夏鸟――漠漠水田飞白鹭，阴阴夏木啭黄鹂<br />
夏蝉――垂缍饮清露，流响出疏桐<br />
夏节――彩线轻缠红玉臂，小符斜桂绿云鬟<br />
夏游――松风涧水杂清音，空山如弄琴<br />
夏趣――懒摇白羽扇，裸体青林中<br />
<a href="javascript:location.href = 'spring.html'">春天</a> <a href="javascript:location.href = 'autumn.html'">秋天</a> <a href="javascript:location.href = 'winter.html'">冬天</a> <a href="javascript:history.back()">后退</a> <a href="javascript:history.forward()">前进</a></td>
</tr>
</table>
</body>
</html>
秋：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>秋</title>
<style type="text/css">
body{margin:0;}
img{
border:0;
padding:5px;
}
td{
font-size:14px;
line-height:22px;
}
</style>
</head>
<body><table border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="images/autumn.jpg" alt="秋天" /></td>
<td>秋雨――高楼目尽欲黄昏，梧桐叶上萧萧雨<br />
秋夜――睡起秋声无觅处，满阶梧叶日明中<br />
秋声――未觉池塘春草梦，阶前梧叶已秋声<br />
秋叶――夜深风竹敲秋韵，万叶千声皆是恨<br />
秋色――雨侵坏瓮新苔绿，秋入横林数叶红<br />
秋月――月光浸水水浸天，一派空明互回荡<br />
秋菊――宁可枝头抱香死，何曾吹落北风中<br />
秋思――故人万里无消息，便拟江头问断鸿<br />
秋愁――莫道身闲总是，孤灯夜夜写清愁 <br />
秋兴――西风吹叶满湖边，初换秋衣独慨然<br />
秋怀――出门未免流年叹，又见湖边木叶飞<br />
秋梦――清梦初回秋夜阑，床前耿耿一灯残<br />
<a href="javascript:location.href = 'spring.html'">春天</a> <a href="javascript:location.href = 'summer.html'">夏天</a> <a href="javascript:location.href = 'winter.html'">冬天</a> <a href="javascript:history.back()">后退</a> <a href="javascript:history.forward()">前进</a></td>
</tr>
</table>
</body>
</html>
冬：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>冬</title>
<style type="text/css">
body{margin:0;}
img{
border:0;
padding:5px;
}
td{
font-size:14px;
line-height:25px;
}
</style>
</head>
<body><table border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="images/winter.jpg" alt="冬天" /></td>
<td>冬雪――忽如一夜春风来，千树万树梨花开<br />
冬梅――不是一番寒彻骨，争得梅花扑鼻香<br />
冬景――岸容待腊将舒柳，山意冲寒欲放梅<br />
冬天――琥珀珠海黏行处雪，棕榈帚扫卧来云<br />
冬夜――岁华皆采获，冬晚共严枯<br />
冬风――飘飘送下遥天雪，飒飒吹干旅命烟<br />
冬思――岁寒，然后知柏之后凋也<br />
冬狩――会挽雕弓如满月，西北望，射天狼<br />
冬愁――云横秦岭家何在，雪拥蓝关马不前<br />
冬行――草枯鹰眼疾，雪尽马蹄轻<br />
冬恨――夜阑卧听风吹雨，铁马冰河入梦来<br />
<a href="javascript:location.href = 'spring.html'">春天</a> <a href="JavaScript:location.href = 'summer.html'">夏天</a> <a href="javascript:location.href = 'autumn.html'">秋天</a> <a href="javascript:history.back()">后退</a> <a href="javascript:history.forward()">前进</a></td>
</tr>
</table>
</body>
</html>
练习三丶完善当当购物车页面
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>完善当当购物车页面</title>
<link type="text/css" rel="stylesheet" href="css/cartStyle.css" />
</head>
<body>
<div class="content">
<div class="logo">
<img src="images/dd_logo.jpg"><span>关闭</span>
</div>
<div class="cartList">
<ul>
<li>¥<input type="text" name="price" value="21.90"></li>
<li><input type="button" name="minus" value="-"><input type="text" name="amount" value="1"><input type="button" name="plus" value="+"></li>
<li id="price0">¥21.90</li>
<li><p>移入收藏</p><p>删除</p></li>
</ul>
<ul>
<li>¥<input type="text" name="price" value="24.00"></li>
<li><input type="button" name="minus" value="-"><input type="text" name="amount" value="1"><input type="button" name="plus" value="+"></li>
<li id="price1">¥24.00</li>
<li><p>移入收藏</p><p>删除</p></li>
</ul>
<ol>
<li id="totalPrice"> </li>
<li><span onclick="total()">结 算</span></li>
</ol>
</div>
</div>
<script type="text/javascript">
function total(){
var prices = document.getElementsByName("price");
var count = document.getElementsByName("amount");
var sum = 0;
for(var i = 0; i < prices.length;i++){
sum += prices[i].value*count[i].value;
}
document.getElementById("totalPrice").innerHTML = "￥"+sum;
}
</script>
</body>
</html>
练习四丶制作12进制的时钟特效
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>制作12进制的时钟特效</title>
</head>
<body onload="clock_12h()">
<h4>您好,欢迎访问贵美商城!</h4>
<h4 id="times"></h4>
<script>
function clock_12h(){
var today = new Date();
var add = "";
if(today.getHours()<12){
add = "AM";
}else{
add = "PM";
}
document.getElementById("times").innerHTML=today.getFullYear()+"年"+today.getMonth()+"月"+today.getDate()+"日"+"\t"+today.getHours()+":"+today.getMinutes()+":"+today.getSeconds()+"\t"+add+"\t"+"星期"+today.getDay();
}
setInterval("clock_12h()",1000);
</script>
</body>
</html>
更多推荐
北大青鸟 JQuery制作特效 第二章 （上机练习
发布评论