| 会员名: | （可包含 a-z、0-9 和下划线） |
||
| 密 码: | （至少包含 6 个字符） |
||
Web前端技术课后作业
练习列表
注意： ""理解级别 ""掌握级别 ""应用级别 "****"拔高级别
第01章: HTML基本结构
名称 描述 级别
第一个HTML页面 *
背景图案片和连接 **
超链接样式 ***
【逻辑题】
练习1.第一个HTML页面
案例描述:创建一个html文件，在页面写入”我的第一个网页”
关键代码:
效果图
练习2: 背景图案片和连接
案例描述:实现如效果图，背景图+多个H1标签
关键代码:
开始学习web技术了
开始学习web技术了
开始学习web技术了
效果图:练习3:自定义异常处理
案例描述:超链接伪类颜色控制，link=“blue” alink=“yellow” vlink="#000000"
关键代码:
点我试试
效果图:【逻辑题】:假设有一个池塘，里面有无穷多水，现有2个空水壶，容积分别为5升和6升。问题是如何只用这2个水壶从池塘里取得3升的水。
第02章: HTML基本标签
名称 描述 级别
基本块级元素 *
用于布局的块级元素 **
行级元素 **
综合联系 ***
【逻辑题】
练习1.基本块级元素
案例描述:实现效果图(使用标签有h1-h6，p，hr)
关键代码:
唐诗三百首
目录
第一首：静夜思
第二首：忆江南
第三首：长恨歌
静夜思
作者：李白
床前明月光,疑是地上霜。举头望明月，低头思故乡。
【李白简介】
李白，字太白，号青莲居士，自称与李堂皇室同宗，祖籍陇西成纪（今甘肃天水附近），生于中亚碎叶。据野史记载，幼时随父迁居绵州昌隆（今四川江油）青莲乡......
效果图
练习2:用于布局的块级元素
案例描述:实现效果图，背景图+多个H1标签(使用标签有:h1-hn,ul-li,dl-dt-dd,ol-li)
关键代码:
商品信息
产品类别
- 数码
-
- 笔记本
- 手机
- 家电
- 美容
- 服装
-
联想电脑
- 产品型号： 联想IdeaPad Y450A-TFU(NBA纪念版)
- 价格： 4999元
- 所在地： 北京
购物流程
- 确认购买信息
- 付款到淘宝
- 确认收货
- 付款给商家
- 双方评价
练习3:行级元素
案例描述: 实现效果图(使用标签有:dl-dt-dd)
关键代码:
促销信息
- 拍卖上网本
- 奔腾双核，1G内存，200G硬盘
- 跳楼疯抢价 1元起
练习4: 超链接与特殊字符
案例描述: 实现效果图(使用标签有:h1-hn,p,ol-li,ul-li,p,pre)
关键代码:
登录 | 关于淘宝 | 淘宝助理 | 联系我们
手机 - 诺基亚 - MOTO - 索爱
导购资讯
参观电玩达人的宝贝仓库
炎炎夏日，冰凉家具两折起
周末折扣，品牌三折热卖
网游专区
- QQ幻想100点卡只需￥8.8元
- 热血江湖250点只需￥8.8元
- 问道30元卡只需￥25.0元
- 跑跑点卡200点只需￥16.8元
- 最酷音乐手机导购
- 最强街机6300仅售1450
- 99元热销学生Mp3推荐
- 漫步者音箱76元搞定
MOTO E2 音乐手机
130W像素摄像头 Linux智能系统 Intel XScale 处理器 A2DP蓝牙立体声 市场价：1690 开学价：1045
版权信息： Copyright © 1998 - 2007 GuiMei Shopping Inc. All Rights Reserved 效果图:
【逻辑题】: 周雯的妈妈是豫林水泥厂的化验员。 一天，周雯来到化验室做作业。做完后想出去玩。 "等等，妈妈还要考你一个题目，“她接着说，“你看这6只做化验用的玻璃杯，前面3只盛满了水，后面3只是空的。你 能只移动1只玻璃杯，就便盛满水的杯子和空杯子间隔起来 吗?” 爱动脑筋的周雯，是学校里有名的"小机灵”，她只想了一会儿就做到了。 请你想想看，"小机灵"是怎样做的?
第03章: 表格的应用和布局
名称 描述 级别
表格的基本结构 *
跨行跨列表格 **
淘宝商品分类页 ***
表格嵌套 ****
【逻辑题】
练习1:表格的基本结构
案例描述:实现效果图(使用标签有:table-tr-td)
关键代码:
| 姓名 | 班级 | 成绩 |
| 刘德华 | 斧头帮 | 99 |
| 张学友 | 丐帮 | 59 |
效果图
练习2: 跨行跨列表格
案例描述:实现效果图，(使用标签有：table-tr-td,跨行,跨列)
关键代码:
商品类目 |
|||
| 虚拟 | 移动 | 联通 | 小灵通 |
| 充值卡 | 彩票 | 双色球 | |
| 梦幻 | 游戏币 | ||
| 护肤 | 美容护肤 | 美体 | 精油 |
| 彩妆 | 香水 | 美发 | |
| 个人护理 | 保健 | 按摩器械 | |
练习3: 淘宝商品分类页
案例描述: 实现效果图(使用标签有:dl-dt-dd)
关键代码:
综合案例：淘宝商品分类三国群英传免费区
卖家：lingture
收藏
一口价
283.30
三国群英传免费区
卖家：蓝天
收藏
一口价
486.00
效果图:练习4:表格嵌套
案例描述: 实现效果图(使用标签有:table-tr-td)
关键代码:
|
|
|
【逻辑题】: 一个球、一把长度大约是球的直径2/3长度的直尺.你怎样测出球的半径？方法很多看看谁的比较巧妙
第04章: 框架和表单
名称 描述 级别
用框架分多个窗口 *
淘宝注册表单 **
公共模板复用及链接 ***
【逻辑题】
练习1:用框架分多个窗口
案例描述:实现效果图(提供页面素材)
关键代码:
效果图
练习2:淘宝注册表单
案例描述:实现效果图
关键代码:
阅读淘宝网服务协议欢迎阅读服务条款协议…… |
|||
| 登录名： | （可包含 a-z、0-9 和下划线） | ||
| 密码： | （至少包含6个字符） | ||
| 再次输入密码： | |||
| 电子邮箱： | （必须包含@字符） | ||
| 性别： | 男 女 | ||
| 头像： | |||
| 爱好： | 运动 聊天 玩游戏 | ||
| 喜欢的城市： | [请选择] 北京 上海 | ||
练习3:公共模板复用及链接
案例描述: 实现效果图(使用标签有:dl-dt-dd)
关键代码:
id="head" src="head.htm" width="980px" height="136px" scrolling="no">
id="foot" src="foot.htm" width="980px" height="150px" scrolling="no">
效果图:
【逻辑题】: 五个大小相同的一元人民币硬币。要求两两相接触，应该怎么摆？
第05章: CSS及常用样式
名称 描述 级别
选择器淘宝商品分类 *
背景偏移圆角矩形 **
横向主菜单，鼠标移动背景变化 ***
制作淘宝顶部菜单 ***
【逻辑题】
练习1: 选择器淘宝商品分类
案例描述:实现效果图(提供页面素材)
关键代码:
效果图
练习2:背景偏移圆角矩形
案例描述:实现效果图(提供页面素材)
关键代码:
- 商品分类
- 分类名1
- 分类名2
- 分类名3
- 分类名4
练习3:横向主菜单，鼠标移动背景变化
案例描述:实现效果图(提供页面素材)
关键代码:
body{
background:url(…/images/h_bg.jpg) no-repeat 24px -88px;}
.nav ul{list-style:none;}
.nav li {
width:84px;
float:left;
text-align:center;
font-weight:bold;
line-height:24px;
}
.nav li a{padding:8px 10px;text-decoration:none;}
.nav li a:link,.nav li a:active,.nav li a:visited{
color:#333;
font-size:13px;
}
.nav li a:hover{
background:url(…/images/nav_bg.png) no-repeat;
}
效果图:
练习4:制作淘宝顶部菜单
案例描述:实现效果图(提供页面素材)
关键代码:
.top_menu{float:right;}
.top_menu ul{list-style:none;}
.top_menu li{float:left;}
.top_menu ul li a{font:12px/26px 宋体;}
.top_menu ul li a:link {color:#333333;text-decoration: none;}
.top_menu ul li a:visited {color:#333333;text-decoration: none;}
.top_menu ul li a:active {color:#333333;text-decoration: none;}
.top_menu ul li a:hover {color:#ff7300;}
.pic1{width:28px;height:26px;background:url(…/images/icon.gif) no-repeat;}
.pic2{width:28px;height:26px;background:url(…/images/icon.gif) no-repeat -28px 0px;}
.pic3{width:28px;height:26px;background:url(…/images/icon.gif) no-repeat -84px 0px;}
.pic4{width:28px;height:26px;background:url(…/images/icon.gif) no-repeat -112px 0px;}
.text{padding:0px 5px;text-align:center;}
.btn {padding:0px 5px;text-align:center;
width:38px;height:26px;background:url(…/images/icon.gif) no-repeat 0px -25px;}
效果图:
【逻辑题】: S先生、P先生、Q先生他们知道桌子的抽屉里有16张扑克牌：红桃A、Q、4 黑桃J、8、4、2、7、3 草花K、Q、5、4、6 方块A、5。约翰教授从这16张牌中挑出一张牌来，并把这张牌的点数告诉 P先生，把这张牌的花色告诉Q先生。这时，约翰教授问P先生和Q 先生：你们能从已知的点数或花色中推知这张牌是什么牌吗？ 于是，S先生听到如下的对话：P先生：我不知道这张牌。
Q先生：我知道你不知道这张牌。
P先生：现在我知道这张牌了。
Q先生：我也知道了。
听罢以上的对话，S先生想了一想之后，就正确地推出这张牌是什么牌。
请问：这张牌是什么牌？
第06章: Box模型及CSS布局
名称 描述 级别
首页布局 **
淘宝商品分类 **
淘宝中部内容 ***
淘宝右侧相关信息 ***
【逻辑题】
练习1: 选择器淘宝商品分类
案例描述:实现效果图(提供页面素材)
关键代码:
顶部(header)
商品分类(cat)
内容(content)
body{margin:0px;padding:0px;}
div{font:bold 36px 黑体;color:#fff;}
#container{width:980px;margin:0px auto;}
#header {width:100%;height:136px;
background:#ccc;color:#000;}
#main{width:100%;height:400px;}
.cat,.content,.sidebar{float:left;width:20%;height:100%;}
.cat {background:#666;}
.sidebar {background:blue;}
.content {width:60%;background:red;}
#footer{width:100%;height:100px;
background:#ccc;color:#000;}
效果图
练习2: 淘宝商品分类
案例描述:实现效果图(提供页面素材)
关键代码:
- 你好，欢迎访问淘宝商城！
家用电器
- 大家电
- 洗衣机
- 平板电视
- 电热水器
- 家庭音响
- 热水器
- 空调冰箱
- 冷柜
- DVD
- 电视附件
- 电燃气
- 家电下乡
- 家电服务
- 电饭煲
- 摄像机
书籍
- 大家电
- 洗衣机
- 平板电视
- 电热水器
- 家庭音响
- 热水器
- 空调冰箱
- 冷柜
- DVD
- 电视附件
- 电燃气
- 家电下乡
- 家电服务
- 电饭煲
- 摄像机
手机数码
- 大家电
- 洗衣机
- 平板电视
- 电热水器
- 家庭音响
- 热水器
- 空调冰箱
- 冷柜
- DVD
- 电视附件
- 电燃气
- 家电下乡
- 家电服务
- 电饭煲
- 摄像机
日用百货
- 大家电
- 洗衣机
- 平板电视
- 电热水器
- 家庭音响
- 热水器
- 空调冰箱
- 冷柜
- DVD
- 电视附件
- 电燃气
- 家电下乡
- 家电服务
- 电饭煲
- 摄像机
内容(content)
body{
padding:0px;
margin:0px;
font:12px Tahoma;
}
dl,ul,ol,h1{list-style:none;margin:0px;padding:0px;}
a {color:#333333;text-decoration: none;}
a:hover {color:#ff7300;}
a img{border:0px;}
#container{
width:980px;
margin:0 auto;
float:none;
}
/头部 从logo到服务热线/
#header {
width:100%;
height:136px;
background:url(…/images/h_bg.jpg) no-repeat -22px 0px;
}
#logo {
width:280px;
height:100px;
float:left;
background:url(../images/h_bg.jpg) no-repeat -22px 0px;
}
/*右上方菜单 购物车 帮助中心 加入收藏 设为首页等，.pic1至.pic4分别为菜单前的小图标，btn为注册登录按钮，h_text为头部文本*/
.upright_menu {width:45%;height:28px;float:right;padding:13px 0px 0px 0px;}
.upright_menu ul li{float:left;font:12px/28px 宋体;}
.pic{width:28px;height:28px;background:url(…/images/icon.gif) no-repeat;}
.pic2{background-position:-28px 0px;}
.pic3{background-position:-84px 0px;}
.pic4{background-position:-112px 0px;}
.h_text,.btn {padding:0px 5px;text-align:center;}
.btn {width:38px;background-position:0px -25px;}
.upright_bottom{width:62%;float:right;}
.hello {padding-top:36px;color:#636362;letter-spacing:3px;}
.nav{clear:both;width:100%;}
.nav li {
width:84px;
float:left;
text-align:center;
font-weight:bold;
}
.nav li a{
padding:8px 10px;line-height:32px;
color:#333;
font-size:14px;
}
.nav ul li a:hover{
background:url(…/images/nav_bg.gif) no-repeat;
}
#main,#footer{font:bold 36px 黑体;color:#fff;}
#main{width:100%;height:643px;}
.cat,.content,.sidebar {float:left;height:100%;}
.cat{
height:603px;
width:189px;padding:40px 0px 0px 15px;
background:url(…/images/bg.gif) no-repeat;}
.cat h1{
font:bold 14px 宋体;
color:#ff7300;
line-height:27px;
}
.cat li{font:12px/24px 宋体;color:#636362;width:60px;float:left;}
.sidebar {background:blue;width:185px;}
.content {width:60%;background:red;}
#footer{clear:both;width:100%;height:100px;
background:#ccc;color:#000;}
效果图:
练习3: 淘宝中部内容
案例描述:实现效果图(提供页面素材)
关键代码:
- 你好，欢迎访问淘宝商城！
家用电器
- 大家电
- 洗衣机
- 平板电视
- 电热水器
- 家庭音响
- 热水器
- 空调冰箱
- 冷柜
- DVD
- 电视附件
- 电燃气
- 家电下乡
- 家电服务
- 电饭煲
- 摄像机
书籍
- 大家电
- 洗衣机
- 平板电视
- 电热水器
- 家庭音响
- 热水器
- 空调冰箱
- 冷柜
- DVD
- 电视附件
- 电燃气
- 家电下乡
- 家电服务
- 电饭煲
- 摄像机
手机数码
- 大家电
- 洗衣机
- 平板电视
- 电热水器
- 家庭音响
- 热水器
- 空调冰箱
- 冷柜
- DVD
- 电视附件
- 电燃气
- 家电下乡
- 家电服务
- 电饭煲
- 摄像机
日用百货
- 大家电
- 洗衣机
- 平板电视
- 电热水器
- 家庭音响
- 热水器
- 空调冰箱
- 冷柜
- DVD
- 电视附件
- 电燃气
- 家电下乡
- 家电服务
- 电饭煲
- 摄像机
- 惠普商务移动应用英寸笔记本
- 夏新N6 GPS真人语音导航手机 超低特价疯抢 数量有限！
- 三星家庭影院 HT-TZ325 购机送好礼(超值性价比)
- 明基MP512投影机 2899元 送100元京卷 SVGA 2200流明
- 罗技数据1TB移动鼠标729元开抢了！
- 海森那尔极品耳机绝对不容错过！
- 亚马逊随时阅读，随时记录，时尚最佳选择！
- 优雅相框
- IBM 2009最新上网本，特色尽显
global.css
body{font:normal 12px Tahoma,宋体;}
body,ul,ol,tr,dl,dd,form,input,h1 {margin:0px;padding:0px;}
a {color:#333;text-decoration: none;}
#container a:hover {color:#ff7300;}
a img{border:0px;}
li{list-style:none;}
input{border:1px #ccc solid;height:17px;width:131px;}
layout.css
body{
padding:0px;
margin:0px;
font:12px Tahoma;
}
ul,ol,h1,dl,dd{list-style:none;margin:0px;padding:0px;}
a {color:#333333;text-decoration: none;}
a:hover {color:#ff7300;}
a img{border:0px;}
#container{
width:980px;
margin:0 auto;
float:none;
}
/头部 从logo到服务热线/
#header {
width:100%;
height:136px;
background:url(…/images/h_bg.jpg) no-repeat -22px 0px;
}
#logo {
width:280px;
height:100px;
float:left;
background:url(../images/h_bg.jpg) no-repeat -22px 0px;
}
/*右上方菜单 购物车 帮助中心 加入收藏 设为首页等，.pic1至.pic4分别为菜单前的小图标，btn为注册登录按钮，h_text为头部文本*/
.upright_menu {width:45%;height:28px;float:right;padding:13px 0px 0px 0px;}
.upright_menu ul li{float:left;font:12px/28px 宋体;}
.pic{width:28px;height:28px;background:url(…/images/icon.gif) no-repeat;}
.pic2{background-position:-28px 0px;}
.pic3{background-position:-84px 0px;}
.pic4{background-position:-112px 0px;}
.h_text,.btn {padding:0px 5px;text-align:center;}
.btn {width:38px;background-position:0px -25px;}
.upright_bottom{width:62%;float:right;}
.hello {padding-top:36px;color:#636362;letter-spacing:3px;}
.nav{clear:both;width:100%;}
.nav li {
width:84px;
float:left;
text-align:center;
font-weight:bold;
}
.nav li a{
padding:8px 10px;line-height:32px;
color:#333;
font-size:14px;
}
.nav ul li a:hover{
background:url(…/images/nav_bg.gif) no-repeat;
}
#main{width:100%;height:643px;
background:url(…/images/bg.gif) no-repeat 0px 0px;
}
.cat,.content,.sidebar{float:left;height:100%;}
.cat{
height:603px;width:189px;padding:40px 9px 0px 15px;}
.cat h1{
font:bold 14px 宋体;
color:#ff7300;
float:none;
line-height:27px;
}
.cat li{font:12px/24px 宋体;color:#636362;width:60px;float:left;}
.content,.content_top,.content_list{width:524px;}
.content{padding-right:10px;}
.content_top{height:190px;padding-bottom:13px;}
.content_list{height:403px;padding:37px 0px 0px 0px;text-align:center;}
.content_list dl{float:left;width:174px;height:134px;}
.content_list dt{height:91px;line-height:91px;}
.content_list dd{height:43px;}
.content_list dt img{vertical-align:middle;border:1px solid #ccc;}
.sidebar {background:blue;width:233px;}
.sidebar,#footer{font:bold 36px 黑体;color:#fff;}
#footer{width:100%;height:100px;clear:both;
background:#ccc;color:#000;}
效果图:
练习4: 淘宝右侧相关信息
案例描述:实现效果图(提供页面素材)
关键代码:
- 你好，欢迎访问淘宝商城！
家用电器
- 大家电
- 洗衣机
- 平板电视
- 电热水器
- 家庭音响
- 热水器
- 空调冰箱
- 冷柜
- DVD
- 电视附件
- 电燃气
- 家电下乡
- 家电服务
- 电饭煲
- 摄像机
书籍
- 大家电
- 洗衣机
- 平板电视
- 电热水器
- 家庭音响
- 热水器
- 空调冰箱
- 冷柜
- DVD
- 电视附件
- 电燃气
- 家电下乡
- 家电服务
- 电饭煲
- 摄像机
手机数码
- 大家电
- 洗衣机
- 平板电视
- 电热水器
- 家庭音响
- 热水器
- 空调冰箱
- 冷柜
- DVD
- 电视附件
- 电燃气
- 家电下乡
- 家电服务
- 电饭煲
- 摄像机
日用百货
- 大家电
- 洗衣机
- 平板电视
- 电热水器
- 家庭音响
- 热水器
- 空调冰箱
- 冷柜
- DVD
- 电视附件
- 电燃气
- 家电下乡
- 家电服务
- 电饭煲
- 摄像机
- 惠普商务移动应用英寸笔记本
- 夏新N6 GPS真人语音导航手机 超低特价疯抢 数量有限！
- 三星家庭影院 HT-TZ325 购机送好礼(超值性价比)
- 明基MP512投影机 2899元 送100元京卷 SVGA 2200流明
- 罗技数据1TB移动鼠标729元开抢了！
- 海森那尔极品耳机绝对不容错过！
- 亚马逊随时阅读，随时记录，时尚最佳选择！
- 优雅相框
- IBM 2009最新上网本，特色尽显
body{
padding:0px;
margin:0px;
font:12px Tahoma;
}
ul,ol,h1,dl,dd{list-style:none;margin:0px;padding:0px;}
a {color:#333333;text-decoration: none;}
a:hover {color:#ff7300;}
a img{border:0px;}
#container{
width:980px;
margin:0 auto;
float:none;
}
/头部 从logo到服务热线/
#header {
width:100%;
height:136px;
background:url(…/images/h_bg.jpg) no-repeat -22px 0px;
}
#logo {
width:280px;
height:100px;
float:left;
background:url(../images/h_bg.jpg) no-repeat -22px 0px;
}
/*右上方菜单 购物车 帮助中心 加入收藏 设为首页等，.pic1至.pic4分别为菜单前的小图标，btn为注册登录按钮，h_text为头部文本*/
.upright_menu {width:45%;height:28px;float:right;padding:13px 0px 0px 0px;}
.upright_menu ul li{float:left;font:12px/28px 宋体;}
.pic{width:28px;height:28px;background:url(…/images/icon.gif) no-repeat;}
.pic2{background-position:-28px 0px;}
.pic3{background-position:-84px 0px;}
.pic4{background-position:-112px 0px;}
.h_text,.btn {padding:0px 5px;text-align:center;}
.btn {width:38px;background-position:0px -25px;}
.upright_bottom{width:62%;float:right;}
.hello {padding-top:36px;color:#636362;letter-spacing:3px;}
.nav{clear:both;width:100%;}
.nav li {
width:84px;
float:left;
text-align:center;
font-weight:bold;
}
.nav li a{
padding:8px 10px;line-height:32px;
color:#333;
font-size:14px;
}
.nav ul li a:hover{
background:url(…/images/nav_bg.gif) no-repeat;
}
#main{width:100%;height:643px;
background:url(…/images/bg.gif) no-repeat 0px 0px;
}
.cat,.content,.sidebar{float:left;height:100%;}
.cat{
height:603px;width:189px;padding:40px 9px 0px 15px;}
.cat h1{
font:bold 14px 宋体;
color:#ff7300;
float:none;
line-height:27px;
}
.cat_li{font:12px/24px 宋体;color:#636362;width:60px;float:left;}
.content,.content_top,.content_list{width:524px;}
.content{padding-right:10px;}
.content_top{height:190px;padding-bottom:13px;}
.content_list{height:403px;padding:37px 0px 0px 0px;text-align:center;}
.content_list dl{float:left;width:174px;height:134px;}
.content_list dt{height:91px;line-height:91px;}
.content_list dd{height:43px;}
.content_list dt img{vertical-align:middle;border:1px solid #ccc;}
.sidebar {width:233px;}
.r1{height:135px;}
.r2{width:230px;height:270px;padding-top:50px;}
.r2 dl{width:230px;height:60px;}
.r2 dl dt{float:left;;width:95px;padding:2px 0px;text-align:center;}
.r2 dl dt img{border:1px solid #9ea0a2;width:60px;height:47px;vertical-align:middle;}
.r2 dl dd a{font:12px/50px 宋体;color:#333;text-decoration: none;}
.r2 dl dd a:hover{color:#ff7300;}
#footer{width:100%;height:100px;
background:#ccc;color:#000;
clear:both;
font:bold 36px 黑体;
}
效果图:
【逻辑题】: 一个教授逻辑学的教授，有三个学生，而且三个学生均非常聪明！ 一天教授给他们出了一个题，教授在每个人脑门上贴了一张纸条并告诉他们，每个人的纸条上都写了一个正整数，且某两个数的和等于第三个！（每个人可以看见另两个数，但看不见自己的）教授问第一个学生：你能猜出自己的数吗？回答：不能，问第二个，不能，第三个，不能，再问第一个，不能，第二个，不能，第三个：我猜出来了，是144！教授很满意的笑了。请问您能猜出另外两个人的数吗？
第07章: JavaScript语法、函数和对象
名称 描述 级别
打印直角三角形 *
简易购物车 **
计算器 ***
【逻辑题】
练习1: 打印直角三角形
案例描述:使用JS实现效果图
关键代码:
这是没有用JAVASCRIPT的显示
效果图
练习2:简易购物车
案例描述: 使用JS实现效果图
关键代码:
}
| 简易购物车 | ||||
|---|---|---|---|---|
| 商品名称 | 数量(件) | 单价(美元) | 运费(美元) | |
| 跑跑道具 | 美元 | |||
练习3: 计算器
案例描述: 使用JS实现效果图
关键代码:
计算器 |
||
| 第一个数 | |
|
| 第二个数 | ||
| 计算结果 | ||
【逻辑题】: 有一人有240公斤 水，他想运往干旱地区赚钱。他每次最多携带60公斤，并且每前进一公里须耗水1公斤（均匀耗水）。假设水的价格在出发地为0，以后，与运输路程成正比， （即在10公里处为10元/公斤，在20公里处为20元/公斤…），又假设他必须安全返回，请问，他最多可赚多少钱？
第08章: 浏览器对象模型BOM
名称 描述 级别
各种模式化窗口 *
时刻表 **
全选 ***
图片轮换
【逻辑题】
练习1: 打印直角三角形
案例描述:使用JS实现效果图
关键代码:
function open2( ){
open(“adv.htm”, “mywindow”, “toolbar=0, scrollbars=0, location=0, statusbar=0, menubar=0, resizable=0, width=320, height=380”);
}
function open3 ( ){
var address=window.showModalDialog(“modalDialog.html”,"",“dialogWidth=400px;dialogHeight=200px”);
document.myform.txtInfo.value=address;
}
function open4 ( ){
open(document.location,"", “fullscreen=yes”) ;
}
function open5( ){
if(confirm(“你相信自己是最棒的吗？”)){
alert(“有信心未必会赢,没信心一定会输！！！”);
}
}
modalDialog.html
打开窗口
模式窗口的返回值:
模式窗口 请填写你的家庭住址:
效果图
练习2:时刻表
案例描述: 使用JS实现效果图(时间自动更新)
关键代码:
}
练习3: 全选
案例描述: 使用JS实现效果图
关键代码:
你喜欢喝哪种类型咖啡
蓝山咖啡
摩卡
拿铁
卡布其诺
爱尔兰咖啡
效果图:
练习4:图片轮换
案例描述: 使用JS实现效果图(点击连接图片变动，并且每隔3秒图片自动切换)
关键代码:
1 2 3 4
效果图:
【逻辑题】: 现在共有100匹马跟100块石头，马分3种，大型马；中型马跟小型马。其中一匹大马一次可以驮3块石头，中型马可以驮2块，而小型马2头可以驮一块石头。问需要多少匹大马，中型马跟小型马？（问题的关键是刚好必须是用完100匹马）
第09章: DOM编程和CSS操作
名称 描述 级别
层的显示和隐藏 **
JS控制表格 **
图片的切换 ***
【逻辑题】
练习1:层的显示和隐藏
案例描述:使用JS实现效果图(点击按钮,显示和隐藏层)
关键代码:
| 拍拍协议 | 腾讯公司依据本协议的规定提供服务，本协议具有合同效力。您必须完全同意本协议，才能够享受本网站提供的服务。您在拍拍网登录即表示您完全接受本协议的全部条款。 重要须知： 腾讯在此特别提醒用户认真阅读本《拍拍网用户服务协议》--- 用户应认真阅读本《拍拍网用户服务协议》 (下称《协议》)中各条款，包括免除或者限制腾讯责任的免责条款及对用户的权利限制。请您审阅并接受或不接受本《协议》（未成年人应在法定监护人陪同下审阅）。除非您接受本《协议》条款，否则您无权使用本网站提供的相关服务。您的使用行为将视为对本《协议》的接受，并同意接受本《协议》各项条款的约束。 |
效果图
练习2: JS控制表格
案例描述: 使用JS实现效果图(时间自动更新)
关键代码:
| 编号 | 姓名 | 电话号码 | 月薪 |
| 100 | 斯蒂芬 | 515.123.4567 | 24000 |
| 103 | 亚历山大 | 515.123.4567 | 9000 |
| 105 | 大卫 | 590.423.4569 | 4800 |
效果图:
练习3: 图片的切换
案例描述: 使用JS实现效果图
关键代码:
}
【逻辑题】: 1=5 2=15 3=215 4=2145 那么5=?
第10章: 表单验证
名称 描述 级别
简易验证 *
复杂验证 **
级联操作 ***
div显示隐藏验证 ***
【逻辑题】
练习1:层的显示和隐藏
案例描述:使用JS实现效果图 验证用户名非空，两次密码必须相同 即可
关键代码:
//用户名非空验证
function checkUserName(){
var name = document.myform.txtUser;
if(name.value==""){
alert(“请输入用户名”);
name.focus();
return false;
}
return true;
}
//密码非空验证+确认验证
function checkPass(){
var pass=document.myform.txtPass;
var rpass=document.myform.txtRPass;
if(pass.value==""){
alert(“密码不能为空”);
pass.focus();
return false;
}
//确认密码的验证
if(rpass.value!=pass.value){
alert(“确认密码与密码输入不一致”);
rpass.select();
return false;
}
return true;
}
效果图
练习2: 复杂验证
案例描述:使用JS实现效果图
验证如下:
a.用户名非空+长度+合法性验证
b.密码非空+长度+密码确认验证
c.出生日期验证(出生日期格式yyyy-mm-dd",年月日必须是数字,年月日必须合法)
d.电子邮件验证
关键代码:
function checkForm(){
if(checkUserName()&&checkPass()&&checkBirth()&&checkEmail()){
return true;
}else{
return false;
}
}
//用户名非空+长度+合法性验证
function checkUserName(){
var name = document.myform.txtUser;
if(name.value==""){
alert(“请输入用户名”);
name.focus();
return false;
}
if(name.value.length<4||name.value.length>16){
alert(“用户名输入的长度4-16个字符”);
name.select();
return false;
}
for(var i=0;i
var charTest=name.value.toLowerCase().charAt(i);
if( (!(charTest>=‘0’ && charTest<=‘9’)) && (!(charTest>=‘a’ && charTest<=‘z’)) && (charTest!=’_’) )
{
alert(“用户名包含非法字符，只能包括字母,数字和下划线”);
name.select();
return false;
}
}
return true;
}
//密码非空+长度+密码确认验证
function checkPass(){
var pass=document.myform.txtPass;
var rpass=document.myform.txtRPass;
if(pass.value==""){
alert(“密码不能为空”);
pass.focus();
return false;
}if(pass.value.length<6||pass.value.length>16){
alert(“密码长度为6-16个字符”);
pass.select();
return false;
}
if(rpass.value!=pass.value){
alert(“确认密码与密码输入不一致”);
rpass.select();
return false;
}
return true;
}
//出生日期验证
function checkBirth(){
var birth=document.myform.txtBirth.value;
if(birth==""){
alert(“请填写出生日期”);
return false;
}else if(birth.length<10){
alert(“出生日期格式错误”);
return false;
}else{
//截取字符串分别获得年月日
var year=birth.substring(0,4);
var month=birth.substring(5,7);
var day=birth.substring(8,birth.length);
if(birth.charAt(4)!="-"||birth.charAt(7)!="-"){//判断日期是否符合格式要求
alert(“出生日期格式yyyy-mm-dd”);
document.myform.txtBirth.select();
return false;
}else if(isNaN(year)||isNaN(month)||isNaN(day)){
alert(“年月日必须是数字”);
document.myform.txtBirth.select();
return false;
}
var time=new Date();
if(parseInt(year,10)<1900||parseInt(year,10)>time.getYear()){
alert(“出生日期范围从1900年-”+time.getYear()+“年”);
document.myform.txtBirth.select();
return false;
}else if(parseInt(month,10)<1||parseInt(month,10)>12){
alert(“您输入的月份不在1-12月之间”);
document.myform.txtBirth.select();
return false;
}else if(parseInt(day,10)<1||parseInt(day,10)>31){
alert(“您输入的天数不在1-31之间”);
document.myform.txtBirth.select();
return false;
}
}
return true;
}
//电子邮件验证
function checkEmail(){
var strEmail=document.myform.txtEmail;
if (strEmail.value.length0)
{
alert(“电子邮件不能为空!”);
strEmail.focus();
return false;
}
if (strEmail.value.indexOf("@",0)-1)
{
alert(“电子邮件格式不正确\n必须包含@符号！”);
strEmail.select();
return false;
}
if (strEmail.value.indexOf(".",0)==-1)
{
alert(“电子邮件格式不正确\n必须包含.符号！”);
strEmail.select();
return false;
}
return false;
}
效果图:
练习3: 级联操作
案例描述:使用JS实现效果图
实现级联操作
游戏分类有:纸牌游戏,棋牌游戏,其他游戏
纸牌游戏:斗地主,拖拉机,桥牌,拱猪等
棋牌游戏:军旗,跳棋,五子棋等
其他游戏:连连看,俄罗斯方块等
关键代码:
function changeGame( )
{
var gameType = new Array( );
gameType[‘牌类’]=[‘斗地主’, ‘拖拉机’, ‘桥牌’, ‘拱猪’, ‘打百分’, ‘跑得快’];
gameType[‘棋类’]=[‘军棋’, ‘跳棋’, ‘五子棋’, ‘围棋’, ‘中国象棋’, ‘国际象棋’, ‘飞行棋’, ‘黑白棋’];
gameType[‘其他类’] = [‘连连看’, ‘俄罗斯方块’, ‘麻将’, ‘台球’, ‘挑错’];
//获得 游戏类别的选项值
var typeName=document.myform.gameType.value;
var newOption;
//清空游戏名称列表框的内容
document.myform.gameList.options.length=0;
//循环添加游戏名称
for(var j=0;j
document.myform.gameList.options.add(newOption);
}
//设置游戏名称列表框内容显示的索引
document.myform.gameList.selectedIndex=0;
}
效果图:
练习3:表单提示效果及下拉级联框
案例描述:使用JS实现效果图
a.用户名不能以下划线开头，最长只能占20位字符，最短6个字符名字中只能用数字、字母、下划线和汉字
b.密码不能少于6位, 只能是数字、字母、字符
c.两次输入的密码一致
d.电子邮件地址必须正确
e.省份,市区 级联
北京=朝阳区,东城区,西城区,海淀区,宣武区,丰台区,怀柔,延庆,房山;
上海=宝山区,长宁区,丰贤区,虹口区,黄浦区,青浦区,南汇区,徐汇区,卢湾区;
河南省=郑州,洛阳,开封,新乡,焦作,周口,南阳,安阳,信阳;
山东省=济南,青岛,淄博,枣庄,东营,烟台,潍坊,济宁,泰安,威海,日照;
四川省=成都,绵阳,德阳,自贡,内江,乐山,南充,雅安,眉山,甘孜,凉山,泸州;
湖北省=武汉,宜昌,荆州,襄樊,黄石,荆门,黄冈,十堰,恩施,潜江;
关键代码:
function $ ( pElementID ) {
return document.getElementById(pElementID);
}
function checkUser ( pUserName ) {
var oContainer = KaTeX parse error: Expected 'EOF', got '\w' at position 74: … var reg = /^(\̲w̲|[\u4E00-\u9FA5…/; //用户名验证的正则表达式
if ( pUserName.value == "" ) {
oContainer.innerHTML = "请输入用户名！"
return false;
}
if ( pUserName.value.charAt(0) == "_" ) {
oContainer.innerHTML = "用户名不能以下划线开头，请重新填写！"
return false;
}
if (pUserName.value.length> 20 || pUserName.value.length< 6 ) {
oContainer.innerHTML = "用户名最长只能占20位字符，最短6个字符，请重新填写！"
return false;
}
if ( !reg.test(pUserName.value) ) {
oContainer.innerHTML = "名字中只能用数字、字母、下划线和汉字，请重新填写！";
return false;
}
oContainer.className = "font_true";
oContainer.innerHTML = "你填写的用户名是有效的！";
return true;
}
function checkpass(pass){ //密码验证
var pwd = KaTeX parse error: Expected 'EOF', got '#' at position 48: …/^[A-Za-z0-9_!@#̲%^&*()]+$/; //密码验证正则表达式，英文、数字及字符
if(pass.value==""){
pwd.className=“font_error”
pwd.innerHTML=“密码不能为空”;
return false;
}
if(pass.value.length<6){
pwd.className=“font_error”
pwd.innerHTML=“密码不能少于6位”;
return false;
}
if(!pattern.test(pass.value)){
pwd.className=“font_error”
pwd.innerHTML = “密码只能是数字、字母、字符！”;
return false;
}
pwd.className=“font_true”
pwd.innerHTML = “您设置的密码符合要求！”;
return true;
}
function checkrepass(pass,repass){ //确认密码验证
var repwd=$(“repassinfor”);
repwd.className=“font_error”
if(repass.value==""){
repwd.className=“font_error”
repwd.innerHTML=“确认密码不能为空”;
return false;
}
if(pass.value != repass.value){ //确认密码是否与密码一致
repwd.className=“font_error”
repwd.innerHTML=“两次输入的密码不一样，请重新输入！”;
return false;
}
repwd.className=“font_true”;
repwd.innerHTML=“两次输入的密码一致！”;
return true;
}
function checkemail(email){
var einfor=KaTeX parse error: Expected group after '^' at position 43: …l.value.match(/^̲\w+((-{1,2}\w+)…/) ){
// if(email.value.indexOf(’@’,0)==-1){
einfor.className=“font_error”;
einfor.innerHTML=“您输入的电子邮件格式不正确，请重新输入！”;
return false;
}
einfor.className=“font_true”;
einfor.innerHTML=“你输入的电子邮件地址正确！”;
return true;
}
var cityList = new Array( );
cityList[‘北京’] = [‘朝阳区’,‘东城区’,‘西城区’, ‘海淀区’,‘宣武区’,‘丰台区’,‘怀柔’,‘延庆’,‘房山’];
cityList[‘上海’] = [‘宝山区’,‘长宁区’,‘丰贤区’, ‘虹口区’,‘黄浦区’,‘青浦区’,‘南汇区’,‘徐汇区’,‘卢湾区’];
cityList[‘河南省’] = [‘郑州’,‘洛阳’,‘开封’, ‘新乡’,‘焦作’,‘周口’,‘南阳’,‘安阳’,‘信阳’];
cityList[‘山东省’] = [‘济南’, ‘青岛’, ‘淄博’, ‘枣庄’, ‘东营’, ‘烟台’, ‘潍坊’, ‘济宁’, ‘泰安’, ‘威海’, ‘日照’];
cityList[‘四川省’] =[‘成都’, ‘绵阳’, ‘德阳’, ‘自贡’, ‘内江’, ‘乐山’, ‘南充’, ‘雅安’, ‘眉山’, ‘甘孜’, ‘凉山’, ‘泸州’];
cityList[‘湖北省’] = [‘武汉’, ‘宜昌’, ‘荆州’, ‘襄樊’, ‘黄石’, ‘荆门’, ‘黄冈’, ‘十堰’, ‘恩施’, ‘潜江’];
function changeCity( )
{
var province=document.myform.province.value;
document.myform.city.options.length=0;
for (var i in cityList)
{
if (i == province)
{
for (var j in cityList[i])
{
document.myform.city.options.add(new Option(cityList[i][j], cityList[i][j]));
}
}
}
document.myform.city.options.selctIndex=0;
}
function loadAll( )
{ for (var i in cityList)
{ document.myform.province.options.add(new Option(i, i));
}
document.myform.province.selectedIndex = 0;
}
效果图:
【逻辑题】: 有2n个人排队进电影院，票价是50美分。在这2n个人当中，其中n个人只有50美分，另外n个人有1美元（纸票子）。愚蠢的电影院开始卖票时1分钱也没有。问： 有多少种排队方法 使得 每当一个拥有1美元买票时，电影院都有50美分找钱
注： 1美元=100美分 拥有1美元的人，拥有的是纸币，没法破成2个50美分