课程门户-章节详情

王梅等

案例一：页面加载时的弹窗功能实现
- ● 1.1 知识点一：JavaScript的用途、发展简史和特点
- ● 1.2 知识点二：将JavaScript脚本加入HTML网页的方法
- ● 1.3 知识点三：JavaScript的基本语法
- ● 1.4 案例实现：打开网页时弹窗显示欢迎词
- ● 1.5 闯关练习
案例二：简易购物计算器功能的实现
- ● 2.1 知识点一：变量和数据类型
  - ● 2.1.1 变量
  - ● 2.1.2 数据类型
  - ● 2.1.3 动手实战：判断变量的数据类型决定是否递增
- ● 2.2 知识点二：运算符
  - ● 2.2.1 运算符和优先级
  - ● 2.2.2 动手实战：十六、八和十进制的简单算术运算
- ● 2.3 案例实现：简易购物计算器
- ● 2.4 闯关练习
案例三：输入年份生成年历功能的实现
- ● 3.1 知识点一：选择结构
  - ● 3.1.1 选择结构控制语句（if和switch语句）
  - ● 3.1.2 动手实战：根据年龄值显示年龄段
- ● 3.2 知识点二：循环结构
  - ● 3.2.1 循环结构控制语句（for、while和do...while语句））
  - ● 3.2.2 动手实战：用最简单代码实现年月日下拉选择列表
- ● 3.3 案例实现：根据指定年份生成年历
- ● 3.4 闯关练习
案例四：跑马灯功能的实现
- ● 4.1 知识点一：普通函数
  - ● 4.1.1 函数的定义和调用
  - ● 4.1.2 动手实战：用函数实现网页版计算器
- ● 4.2 知识点二：匿名函数
  - ● 4.2.1 匿名函数、箭头函数和回调函数
  - ● 4.2.2 动手实战：用匿名函数实现网页版计算器
- ● 4.3 知识点三：变量的作用域
  - ● 4.3.1 全局变量和局部变量
  - ● 4.3.2 动手实战：计算1到100的和
- ● 4.4 知识点四：内部函数
  - ● 4.4.1 常用内部函数介绍
  - ● 4.4.2 动手实战：使用内部函数确认操作是否结束
- ● 4.5 案例实现：文本框中的跑马灯效果
- ● 4.6 闯关练习
案例五：限定范围拖动特效功能的实现
- ● 5.1 知识点一：事件
  - ● 5.1.1 事件介绍
  - ● 5.1.2 动手实践：同一位置两图片切换特效
- ● 5.2 知识点二：event事件对象
  - ● 5.2.1 event事件对象介绍
  - ● 5.2.2 动手实战：控制文本域中仅能输入数字或字母
- ● 5.3 案例实现：限定范围的拖动特效
- ● 5.4 闯关练习
案例六：不一样的月历生成功能的实现
- ● 6.1 知识点一：对象概述
- ● 6.2 知识点二：自定义对象
  - ● 6.2.1 自定义对象的方法
  - ● 6.2.2 动手实战：用自定义对象方法求商品总价
- ● 知识点三：String对象
  - ● 6.3.1 String对象介绍
  - ● 6.3.2 动手实践：生成上传图片预览
- ● 6.4 知识点四：Date对象
  - ● 6.4.1 Date对象介绍
  - ● 6.4.2 动手实战：案显示当前日期星期
- ● 6.5 知识点五：Math对象
  - ● 6.5.1 Math对象介绍
  - ● 6.5.2 动手实战：网页版猜数小游戏
- ● 6.6 知识点六：Array对象
  - ● 6.6.1 Array对象介绍
  - ● 6.6.2 动手实战：图片轮播
- ● 6.7 知识点七：RegExp对象
  - ● 6.7.1 RegExp对象介绍
  - ● 6.7.2 动手实践：表单数据的验证
- ● 6.8 案例实现：生成月历并凸显当日号数
- ● 6.9 闯关练习
案例七：浮动广告与滚动新闻功能的实现
- ● 7.1 知识点一：浏览器对象模型概述
- ● 7.2 知识点二：window 对象
  - ● 7.2.1 动手实践1：带圆点的图片轮播
  - ● 7.2.2 动手实践2：选号抽奖
  - ● 7.2.3 动手实践3：控制网页加载时显示的广告窗口
- ● 7.3 知识点三：screen对象与location对象
  - ● 7.3.1 动手实践：根据不同的屏幕分辨率打开不同布局的网站首页
- ● 7.4 知识点四：history对象与navigator对象
  - ● 7.4.1 动手实践：识别网页运行的操作平台
- ● 7.5 知识点五：document对象
  - ● 7.5.1 动手实践1：滚动图片
  - ● 7.5.2 动手实践2：形成随屏而生的置顶图标
- ● 7.6 案例实现：浮动广告与滚动新闻
- ● 7.7 闯关练习
案例八：增加删除员工信息功能的实现
- ● 8.1 知识点一：DOM文档对象模型概述和DOM节点
- ● 8.2 知识点二：节点对象的属性
  - ● 8.2.1 动手实践：使用节点属性实现诗句的隐藏
- ● 8.3 知识点三：DOM节点操作
- ● 8.4 知识点四：DOM操作元素的属性
- ● 8.5 知识点五：DOM操作元素的内容
- ● 8.6 知识点六：DOM操作元素的样式
  - ● 8.6.1 动手实践：手风琴特效菜单
- ● 8.7 案例实现：增加删除员工信息
- ● 8.8 闯关练习
综合应用案例：教师资格证面试管理系统的实现
- ● 9.1 系统登录与注册页面的交互功能实现
- ● 9.2 系统主界面的交互功能实现

2.3 案例实现：简易购物计算器

1 简易购物计算器
2 能力提升训练

根据给定的网页基础架构，实现简单车贷计算器的功能：

	<!DOCTYPE html ">
	<html >
	<head>
	<meta charset="utf-8" />
	<title>简单的车贷计算器</title>
	<style>
	body{background-color:lightgray;}
	#box{
	width:650px;
	height:450px;
	border:1px solid gray;
	font-size:20px;
	margin:auto;
	padding:20px;
	font-family:'隶书';}
	input,select{font-size:20px;
	border-radius:5px;
	font-family:'隶书';}
	.c1{color:red;}
	</style>
	</head>
	<body>
	<div id="box">
	<h2 style="text-align:center">简单车贷计算器</h2>
	<p class="c1">说明：假设贷款年利率为5.5%</p>
	<p><b>输入购车总价，并选择首付比例和贷款年限，然后点击计算按钮计算首付款和加上利息后的购车总费用。
	首付比例为2到9成，贷款年限为1到5年。</b></p>
	<form name="f1">
	<p>购车总价<input type="text" name="price" id="price" >元</p>
	<p>首付比例<select name="pro" id="pro">
	<option value="0.2">2</option>
	<option value="0.3">3</option>
	<option value="0.4">4</option>
	<option value="0.5">5</option>
	<option value="0.6">6</option>
	<option value="0.7">7</option>
	<option value="0.8">8</option>
	<option value="0.9">9</option>
	</select>成
	</p>
	<p>贷款年限<select name="year" id="year">
	<option value="1">1</option>
	<option value="2">2</option>
	<option value="3">3</option>
	<option value="4">4</option>
	<option value="5">5</option>
	</select>年
	</p>
	<p><input type="reset" value="重置" >
	<input type="button" value="计算" >
	</p>
	<p>首付款<input type="text" name="first" id="first">元
	购车总费用<input type="text" name="sum" id="sum">元
	</p>
	</form>
	</div>

	</body>
	</html>

网页界面截图如下：

图片预览