北大青鸟 JQuery制作特效第二章（上机练习

最新推荐文章于 2024-01-02 19:46:16 发布

SpicyStriplt

最新推荐文章于 2024-01-02 19:46:16 发布

阅读量1.6w

点赞数 19

CC 4.0 BY-SA版权

分类专栏： JQuery 文章标签：北大青鸟 JQuery制作特效第二章（上机练习

本文链接：https://blog.youkuaiyun.com/SpicyStriplt/article/details/94855058

这篇博客是北大青鸟JQuery特效制作的第二章上机练习，包括四个部分：一、创建简易当当购物车页面；二、展示一年四季变化的交互效果；三、进一步完善购物车页面；四、实现12进制时钟特效。通过这些实践，读者将加深对JQuery的理解和应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

北大青鸟 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