使用JQuery快速高效制作网页交互特效第二章所有上机
2024-05-11 17:50:25
上机一
样式
body,ul,li,div,p,h1,h2{margin: 0;padding: 0;}
ul,li{list-style: none;}
.content{width: 810px; margin: 0 auto;}
.logo{margin: 10px 0;}
.logo span{display: inline-block;float: right;width: 60px;height: 30px;line-height: 30px;font-size: 14px;font-family: "微软雅黑";background: #ff0000;color: #ffffff;text-align: center;border-radius: 10px;margin-top: 5px;margin-right: 10px;cursor: pointer;font-weight: bold;
}
.cartList{background: url("../Image/sj1(2).jpg") no-repeat;height: 414px;overflow: hidden;
}
.cartList ul{float: right;width: 100px;margin-top: 110px;
}
.cartList ul li{font-family: "微软雅黑";font-size: 12px;color: #666666;text-align: center;line-height: 25px;cursor: pointer;
}
.cartList ul li:nth-of-type(3){margin-top: 60px;}
.cartList ul li:nth-of-type(5){margin-top: 80px;}
.cartList span{display: inline-block;float: right;width: 80px;height: 35px;line-height: 35px;font-size: 14px;font-family: "微软雅黑";background: #ff0000;color: #ffffff;text-align: center;margin-top: 5px;margin-right: 15px;cursor: pointer;font-weight: bold;
}
代码
<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title>广告页面</title>
</head>
<body><img src="../image/adver.jpg" />;
</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 onload="open_adv();">
<div class="content"><div class="logo"><img src="../image/sj1(1).jpg"><span onclick="close_plan();">关闭</span></div><div class="cartList"><ul><li onclick="shouc()">移入收藏</li><li onclick="deletes()">删除</li><li onclick="shouc()">移入收藏</li><li onclick="deletes()">删除</li><li><span onclick="jiesuan()">结 算</span></li></ul></div><script type="text/javascript" >//弹出窗口function open_adv() {window.open("GuangKao.html", "", "height=500,width=600,left=500,top=300");}//关闭窗口function close_plan() {window.close();}//收藏function shouc(){var flag = confirm("移入收藏后,将不在购物车显示,是否继续操作?");if (flag == true) {alert("移入收藏成功!");} else {alert("移入收藏取消!");}}//删除function deletes(){var flag = confirm("您确定要删除商品吗?");if (flag == true) {alert("删除成功!");} else {alert("删除取消!");}}//结算function jiesuan(){var flag = confirm("您本次购买的商品信息如下:\n商品名称:白岩松\n商品数量:2件\n商品总计:46.00元\n运费:0元\n请确认以上信息是否有误!!!");if (flag == true) {alert("您的订单已提交!");} else {alert("您的订单已取消!");}}</script>
</div>
</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="../Image/autumn.jpg" alt="秋天" /></td><td>秋雨――高楼目尽欲黄昏，梧桐叶上萧萧雨<br />秋夜――睡起秋声无觅处，满阶梧叶日明中<br />秋声――未觉池塘春草梦，阶前梧叶已秋声<br />秋叶――夜深风竹敲秋韵，万叶千声皆是恨<br />秋色――雨侵坏瓮新苔绿，秋入横林数叶红<br />秋月――月光浸水水浸天，一派空明互回荡<br />秋菊――宁可枝头抱香死，何曾吹落北风中<br />秋思――故人万里无消息，便拟江头问断鸿<br />秋愁――莫道身闲总是，孤灯夜夜写清愁 <br />秋兴――西风吹叶满湖边，初换秋衣独慨然<br />秋怀――出门未免流年叹，又见湖边木叶飞<br />秋梦――清梦初回秋夜阑，床前耿耿一灯残<br /><a href="spring.html">春天</a> <a href="summer.html">夏天</a> <a href="winter.html">冬天</a> <ahref="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">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="../Image/1.jpg" /></td><td><img src="../Image/2.jpg" /></td></tr><tr><td><a href="spring.html">春</a></td><td><a href="summer.html">夏</a></td></tr><tr><td><img src="../Image/3.jpg" /></td><td><img src="../Image/4.jpg" /></td></tr><tr><td><a href="autumn.html">秋</a></td><td><a 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="../Image/spring.jpg" alt="春天"/></td><td>春来――爆竹声中一岁除，春风送暖入屠苏<br/>春雨――小楼一夜听春雨，深巷明朝卖杏花<br/>春花――惆怅东栏一株雪，人生看得几清明<br/>春风――春风又绿江南岸，明月何时照我还<br/>春光――等闲识得东风面，万紫千红总是春<br/>春景――试上超然台上看，半壕春水一城花<br/>春游――东风知我欲山，吹断檐间积雨声 <br/>春思――春心莫共花争发，一寸相思一寸灰<br/>春寂――春潮带雨晚来急，野渡无人舟自横<br/>春愁――问君能有几多愁，恰似一江春水向东流<br/>春梦――枕上片时春梦中，行尽江南数千里<br/>春恨――人生自是有情痴，此恨不关风和月<br/>春归――落红不是无情物，化作春泥更护花<br/><a href="summer.html">夏天</a> <a href="autumn.html">秋天</a> <a href="winter.html">冬天</a> <ahref="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: 20px;}</style>
</head>
<body>
<table border="0" cellspacing="0" cellpadding="0"><tr><td><img src="../Image/summer.jpg" alt="夏天" /></td><td>夏颂――纳清风台榭开怀，傍流水亭轩赏心<br />夏初――槐柳成阴雨洗尘，樱桃乳酪并尝新<br />夏热――日轮当午凝不去，万国如在洪炉中<br />夏雨――风声撼山翻怒涛，雨点飞空射强弩<br />夏水――涧影见藤竹，潭香闻芰荷<br />夏夜――散发乘夕凉，开轩卧闲敞<br />夏花――荷叶罗裙一色裁，芙蓉向脸两边开<br />夏鸟――漠漠水田飞白鹭，阴阴夏木啭黄鹂<br />夏蝉――垂缍饮清露，流响出疏桐<br />夏节――彩线轻缠红玉臂，小符斜桂绿云鬟<br />夏游――松风涧水杂清音，空山如弄琴<br />夏趣――懒摇白羽扇，裸体青林中<br /><a href="summer.html">夏天</a> <a href="autumn.html">秋天</a> <a href="winter.html">冬天</a> <ahref="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: 20px;}</style>
</head>
<body>
<table border="0" cellspacing="0" cellpadding="0"><tr><td><img src="../Image/winter.jpg" alt="冬天" /></td><td>冬雪――忽如一夜春风来，千树万树梨花开<br />冬梅――不是一番寒彻骨，争得梅花扑鼻香<br />冬景――岸容待腊将舒柳，山意冲寒欲放梅<br />冬天――琥珀珠海黏行处雪，棕榈帚扫卧来云<br />冬夜――岁华皆采获，冬晚共严枯<br />冬风――飘飘送下遥天雪，飒飒吹干旅命烟<br />冬思――岁寒，然后知柏之后凋也<br />冬狩――会挽雕弓如满月，西北望，射天狼<br />冬愁――云横秦岭家何在，雪拥蓝关马不前<br />冬行――草枯鹰眼疾，雪尽马蹄轻<br />冬恨――夜阑卧听风吹雨，铁马冰河入梦来<br /><a href="spring.html">春天</a> <a href="summer.html">夏天</a> <a href="autumn.html">秋天</a> <ahref="javascript:history.back()">后退</a> <a href="javascript:history.forward()">前进</a></td></tr>
</table>
</body>
</html>
上机三
样式
body,ul,li,div,p,h1,h2,ol{margin: 0;padding: 0;}
ul,li,ol{list-style: none;}
.content{width: 810px; margin: 0 auto; font-family: "微软雅黑";}
.logo{margin: 10px 0;}
.logo span{display: inline-block;float: right;width: 60px;height: 30px;line-height: 30px;font-size: 14px;background: #ff0000;color: #ffffff;text-align: center;border-radius: 10px;margin-top: 5px;margin-right: 10px;cursor: pointer;font-weight: bold;
}
.cartList{background: url("../Image/sj3(2).jpg") no-repeat;height: 414px;overflow: hidden;
}
.cartList ul{float: right;width: 450px;
}
.cartList ul:nth-of-type(1){margin-top: 125px;
}
.cartList ul:nth-of-type(2){margin-top:70px;
}
.cartList ul li{font-family: "微软雅黑";font-size: 12px;color: #666666;text-align: center;line-height: 25px;float: left;
}
.cartList ul li input[name="price"]{border: none;background: transparent;width: 45px;text-align: center;
}
.cartList ul li input[name="amount"]{width: 45px;text-align: center;border: 1px solid #999999;border-left: none;border-right: none;height: 21px;
}
.cartList ul li input[name="minus"],.cartList ul li input[name="plus"]{height: 25px;border: 1px #999999 solid;width: 25px;text-align: center;
}
.cartList ul li:nth-of-type(1){width: 130px;}
.cartList ul li:nth-of-type(2){width: 100px;}
.cartList ul li:nth-of-type(3){width: 130px;}
.cartList ul li p{cursor: pointer;}
.cartList ol{float: right;clear: both;margin-top: 60px;
}
.cartList ol li{float: left;
}
.cartList ol li:nth-of-type(1){color: #ff0000;width: 120px;
}
.cartList ol li span{display: inline-block;float: right;width: 80px;height: 35px;line-height: 35px;font-size: 14px;font-family: "微软雅黑";background: #ff0000;color: #ffffff;text-align: center;margin-top: 5px;margin-right: 15px;cursor: pointer;font-weight: bold;
}
代码
<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><link type="text/css" rel="stylesheet" href="../css/sj3.css" />
</head>
<body>
<div class="content"><div class="logo"><img src="../Image/sj3(1).jpg"><span onclick="close_plan();">关闭</span></div><div class="cartList"><ul><li>¥<input type="text" name="price" value="21.90"></li><li><input type="button" name="minus" value="-" onclick="jian(0)"><input type="text" name="amount" value="1"><input type="button" name="plus" value="+" onclick="add(0)"></li><li id="price0">¥21.90</li><li><p onclick="shouc()">移入收藏</p><p onclick="deletes()">删除</p></li></ul><ul><li>¥<input type="text" name="price" value="24.00"></li><li><input type="button" name="minus" value="-" onclick="jian(1)"><input type="text" name="amount" value="1"><input type="button" name="plus" value="+" onclick="add(1)">></li><li id="price1">¥24.00</li><li><p onclick="shouc()">移入收藏</p><p onclick="deletes()">删除</p></li></ul><ol><li id="totalPrice" onclick="total()"> </li><li><span onclick="total()">结 算</span></li></ol></div><script type="text/javascript" >//关闭窗口function close_plan() {window.close();}//收藏function shouc(){var flag = confirm("移入收藏后,将不在购物车显示,是否继续操作?");if (flag == true) {alert("移入收藏成功!");} else {alert("移入收藏取消!");}}//删除function deletes(){var flag = confirm("您确定要删除商品吗?");if (flag == true) {alert("删除成功!");} else {alert("删除取消!");}}//加function add(num) {var prices = document.getElementsByName("price")[num].value;var count = parseInt(document.getElementsByName("amount")[num].value) + 1;document.getElementsByName("amount")[num].value = count;var totals = parseFloat(prices * count);document.getElementById("price" + num).innerHTML = "￥" + totals;total();}//减function jian(num){var prices=document.getElementsByName("price")[num].value;var count=parseInt(document.getElementsByName("amount")[num].value)-1;if(count<1){alert("不能再减了,再减就没有了!");}else{document.getElementsByName("amount")[num].value=count;var totals=parseFloat(prices*count);document.getElementById("price"+num).innerHTML="￥"+totals;}total();}//计算所有商品总和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;}total();</script>
</div>
</body>
</html>
上机四
<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title>
</head>
<body>
<h4>您好,欢迎访问贵美商城!</h4><div id="myclock"><script type="text/javascript">function disptime() {var today = new Date();var hour = today.getHours();//时var min = today.getMinutes();//分var sec = today.getSeconds();//秒var year = today.getFullYear();//年份var mon = today.getMonth();//月var day = today.getDate();//日var week = today.getDay();//星期var weeks;var wu;if (hour > 12) {wu = "PM";} else {wu = "AM";}if (week == 1) {weeks = "星期一";} else if (week == 2) {weeks = "星期二";} else if (week == 3) {weeks = "星期三";} else if (week == 4) {weeks = "星期四";} else if (week == 5) {weeks = "星期五";} else if (week == 6) {weeks = "星期六";} else if (week == 0) {weeks = "星期天";}document.getElementById("myclock").innerHTML = year + "年" + (mon + 1) + "月" + day + " " + hour + ":" + min + ":" + sec + " " + wu + " " + weeks;}var myTime = setInterval("disptime()", 1000);</script>
</div>
</body>
</html>
使用JQuery快速高效制作网页交互特效第二章所有上机相关推荐
- 使用JQuery快速高效制作网页交互特效第九章所有上机
这里是引用 上机一 样式 body{border:0px;padding:0px;margin:0px auto;font:12px Tahoma; } div,ul,li,dt,dl {float: ...
- 使用JQuery快速高效制作网页交互特效第六章所有上机
上机一 样式 body,h1,h2,h3,p,ul,li,dl,dt,dd,div,section{margin: 0;padding: 0;} body{font-family: "微软雅 ...
- 使用jQuery快速高效制作网页交互特效
第四章:JQuery选择器 1.Jquery选择器简介 (1) Jquery中的选择器完全继承了CSS的风格,利用Jquery选择器,可以非常便捷和快速的找出特定的Dom元素,然后为他们添加相应的行为 ...
- 使用JQuery快速高效制作网页交互特效第五章所有上机
上机一 <!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8& ...
- 使用jQuery快速高效制作网页交互特效 第五章 上机练习四 制作广告图片轮播切换效果
轮播应有的功能大致都有,分享给一些在学的朋友参考学习. <!DOCTYPE html> <html> <head lang="en"><m ...
- 使用jQuery 快速高效制作 网页特效
使用jQuery 快速高效制作 网页特效 第一章:JavaScript基础 DOM:document object model 文档对 ...
- 北大青鸟 JQuery制作特效 第二章 （上机练习
北大青鸟 JQuery制作特效 第二章 (上机练习 练习一丶制作简易的当当购物车页面 <!DOCTYPE html> <html> <head lang="en ...
- 北大青鸟 使用JQuery制作特效 第一章（上机练习
北大青鸟 使用JQuery制作特效 第一章(上机练习 练习一丶--统计包含"a"或"A"的字符串个数 <!DOCTYPE html> <htm ...
- [开源] OpWeb 框架 －－快速高效的实时交互框架（更新至 0.0.4.0）
一个轻量高效的实时交互开发框架,用于开发实时Web App 或者 网络游戏. 这是什么? 这是一个Web在线对战射击游戏(MMOA)的开源版本,该游戏依然在运行中. 原有平台为C#,现在我通过Shar ...
- Python快速编程入门#学习笔记03# |第二章 ：Python基础（代码格式、标识符关键字、变量和数据类型、数字类型以及运算符）
全文目录 ==先导知识== 学习目标: 2.1 代码格式 2.1.1 注释 2.1.2 缩进 2.1.3 语句换行 2.2 标识符和关键字 2.2.1 标识符 2.2.2 关键字 2.3 变量和数据类 ...
最新文章
- JZOJ 5461 购物 —— 贪心
- 线程里面添加参数，并解决多个参数问题[原创]
- 从 2017 OpenStack Days China 看国内云计算的发展现状
- x86汇编语言-从实模式到保护模式----第五章
- RF新手常见问题总结--(基础篇)
- adb 静默安装_怎么实现Android APP静默安装
- 示例演示公告通知标题无缝向上滚动，文字段落无缝向上滚动，简单的wangeditor富文本编辑器，简单的音乐播放demo...
- jsp 页面刷新，EasyUI刷新、加载
- QT 中QComboBox控件鼠标事件过滤
- 30分钟一部动画短片！从MMD入门3D世界，边玩边学的3D教程！（一）“MMD快速入门教程CSDN”
- python 汉字转拼音拼音转汉字
- [架构之路-13]：目标系统 - 硬件平台 - 五种主流CPU架构的比较（CISC X86、RISC ARM、RISC PowerPC、RISC MIPS、RISC-V）
- Java Resources是什么
- 电商APP：移动电子商务新趋势
- 卸载网易邮箱大师邮件从服务器删除,网易邮箱大师怎么删除邮箱 删除邮箱其实很简单...
- 【无人机组装与调试】第四章 F450四轴装机实例-选择机型、需要的器材工具材料
- 嵌入式面试_面试宝典整理（包括内核）
- 人工智能轨道交通行业周刊-第2期（2022.6.13-6.19）
- 关于债券付息的一些日期计算方式
- clap与slap_(2xslap,slap,slap,clap,slap)Doinapos;theFACTSNowthatapos;s.ppt