版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
模块五使用JavaScript添加动态效果本模块通过5个案例的实现，介绍使用JavaScript添加网页动态效果的方法。这5个案例包括输出信息、表单验证、简单计算器、限时促销和轮播图等，通过这些案例的实现掌握使用JavaScript的基本使用方法。知识目标：掌握将JavaScript引入网页的方式；掌握JavaScript的基本语法；掌握JavaScript的事件与事件调用；掌握BOM对象的常用方法和属性；掌握DOM对象的常用方法和属性。能力目标：会编写简单的JavaScript程序；能阅读并理解简单的JavaScript程序；使用
JavaScript
编写代码添加网页动态效果。素质目标：在编写代码中提升逻辑思维能力；在编写代码中培养认真细致、精益求精的工匠精神。教案20案例20输出信息计划学时2学时知识目标了解JavaScript的常见应用熟悉JavaScript的语法规则掌握JavaScript的引入方式掌握JavaScript的常用的输入输出方法能力目标能说出JavaScript的常见应用会使用JavaScript编写简单的脚本程序素质目标在编写代码中遵循正确的编写代码规范在编写代码中培养认真细致、精益求精的工匠精神教学重点JavaScript的引入方式prompt、alert、write方法的使用教学难点prompt、alert、write方法的灵活使用教学模式教学做一体化线上+线下混合式教学教学活动及主要环节素质培养第1学时（案例分析实现）=1\*ROMANI.问题讨论：（5分钟）对同学们课前观看微课过程中的疑难问题展开讨论。=2\*ROMANII.案例分析与实现：（40分钟）一、案例描述创建JavaScript程序，运行效果如图20-1~图20-3所示。具体要求如下。（1）弹出输入对话框，输入姓名，单击“确定”按钮后，弹出显示信息对话框，显示××您好！。（2）单击显示信息对话框中的“确定”按钮后，在网页上显示信息“欢迎学习JavaScript！”。（3）“欢迎学习JavaScript！”为一级标题、红色，在浏览器中水平居中显示。图20-1输入对话框图20-2显示信息对话框图20-3在网页上输出信息案例分析图20-1所示的用于输入姓名的输入框需要使用prompt()方法定义，图20-2所示的显示信息对话框需要使用alert()方法定义，图20-3所示的在网页上输出的信息需要使用document对象的write()方法定义。“欢迎学习JavaScript！”文字需要使用CSS定义标题的样式。案例实现学生同步操作，做学教一体<!DOCTYPE
html><html>
<head>
<meta
charset="utf-8"
/>
<title>显示信息</title>
<style
type="text/css">
h1{
color:#F00;
text-align:center;
}
</style>
</head>
<body>
<script
type="text/javascript">
var
name=prompt("请输入您的姓名");
//弹出输入对话框，输入姓名,存入变量name
alert(name+"您好！");
//弹出显示信息对话框
document.write("<h1>欢迎学习JavaScript!</h1>");
//在网页上输出信息
</script>
</body></html>第2学时（相关知识点）一、JavaScript的常见应用（5分钟）1．动态交互效果2．数据验证3．结合流行框架开发移动应用二、JavaScript的语法规则（5分钟）（1）JavaScript严格区分大小写，在编写代码时一定注意大小写的正确性。（2）一般在每条语句结束后加分号。（3）JavaScript的注释符号是//（单行注释）和/*
……
*/（多行注释）。三、JavaScript的引入方式（20分钟）1．直接将JavaScript代码嵌入HTML中（内嵌式）<script
type="text/javascript">
JavaScript语句</script>例20-1<!DOCTYPE
html><html>
<head>
<meta
charset="utf-8"
/>
<title>嵌入式</title>
</head>
<body>
<script
type="text/javascript">
alert("李华，欢迎来到JavaScript的世界！");
//在弹出的对话框中显示信息
</script>
</body></html>
2．链接外部的JavaScript代码（外链式）例20-2<!DOCTYPE
html><html>
<head>
<meta
charset="utf-8">
<title>外链式</title>
<script
src="js/01.js"
type="text/javascript"></script>
</head>
<body>
</body></html>3．直接在HTML标记中使用（行内式）（1）使用“javascript:”调用。<a
href="javascript:alert('希望你成为前端开发的高手')">
欢迎来到JavaScript世界！</a>（2）结合事件调用。<input
type="button"
value="显示信息"
onclick="alert('Hello,
Welcome!');"
/>四、输入/输出方法（10分钟）1．prompt()方法2．alert()方法3．write()方法五=2\*ROMAN、小结（5分钟）重点掌握JavaScript脚本代码引入的三种方式（内嵌式、外链式、行内式）和输入输出的方法。作业1：课本课后习题与实训作业2：扫码观看案例21中的微课，自学表单验证在案例分析时培养学生分析问题解决问题的能力。在代码实现中遵循正确的代码编写规范。教案21案例21表单验证计划学时2学时知识目标掌握JavaScript中变量命名、声明和赋值熟悉JavaScript中常用的数据类型掌握JavaScript的运算符和函数使用方法了解JavaScript的DOM(文档对象模型)能力目标能使用JavaScript编写代码进行表单验证会使用开发者工具调试JavaScript的程序素质目标在编写代码中遵循正确的编写代码规范在编写代码中培养认真细致、精益求精的工匠精神教学重点JavaScript的基本语法表单验证的方法教学难点使用JavaScript获取元素教学模式教学做一体化线上+线下混合式教学教学活动及主要环节素质培养第1学时（案例分析实现）=1\*ROMANI.问题讨论：（5分钟）对同学们课前观看微课过程中的疑难问题展开讨论。=2\*ROMANII.案例分析与实现：（40分钟）一、案例描述创建注册表单，编写JavaScript代码，在表单提交时进行数据验证，运行效果如图21-1和图21-2所示。具体要求如下。（1）在注册表单中添加一个文本输入框、两个密码输入框和一个命令按钮。（2）表单样式如图21-1所示。（3）如果小米ID和密码输入不符合要求或者密码输入和确认密码输入不一致，则在单击“注册”按钮时会弹出警示对话框，如图21-2所示。图21-1注册表单图21-2单击“注册”按钮时对表单进行验证案例分析创建注册表单，使用<form>标记定义表单，在表单中添加3个<input>标记用于输入小米ID和密码，添加一个“注册”按钮，定义表单和控件的样式。创建脚本文件，编写JavaScript代码，使用document对象的getElementById()方法获取输入框中的数据，判断是否满足要求。案例实现学生同步操作，做学教一体1．创建表单：<form
action=""
method="get"
class="register"
onsubmit="validate()">
<h1>小米用户注册</h1>
"required"
/>
<p><input
type="password"
id="txtPwd1"
class="pwd"
placeholder="密码"
required="required"/></p>
<p
required="required"/></p>
<p><input
type="submit"
class="sub"
value="注册"
/></p></form>2．定义表单的CSS样式3．创建JavaScript脚本文件function
validate()
{var
userID
=
document.getElementById('txtID').value; //获取输入的小米IDif
(userID.length
<
6
||
userID.length
>
20)
{
//判断小米ID的长度
alert("小米ID必须为6～20个字符，请重新输入！");
//在警示对话框中显示提示信息
return
false;
}
var
password1
=
document.getElementById('txtPwd1').value;
//获取输入的密码
if
(password1.length
<
6
||
password1.length
>
10)
{
alert("密码必须为6～10个字符，请重新输入！");
//在警示对话框中显示提示信息
return
false;
}
var
password2
=
document.getElementById('txtPwd2').value;
//获取输入的确认密码
if(password1!==password2){
alert("两次输入密码不一致！");
return
false;
}}第2学时（相关知识点）一、变量1．变量的命名必须以字母或下画线开头，中间可以是数字、字母或下画线。变量名不能包含空格、加号、减号等字符。不能使用JavaScript的关键字，如var、int等。JavaScript的变量名是严格区分大小写的2．变量的声明和赋值var
name;
//一次声明一个变量var
name,gender,age;
//一次声明多个变量var
name="李华";
//在声明的同时初始化变量var
name="李华",gender="男",age;
//在声明的同时初始化全部或者部分变量二、数据类型分类类型说明基本数据类型数值型整型，用十进制数、八进制数和十六进制数来表示浮点型，使用普通形式和指数形式字符串型表示文本数据，主要由字母、数字、汉字和其他特殊字符组成，字符串型数据必须用单引号或者双引号引起来布尔型逻辑型，布尔型数据只有两个值，即逻辑真和逻辑假引用数据类型支持对象编程的类型对象、函数等特殊数据类型null表示空类型，当前为空值undefined未定义类型的变量，表示这个变量还没有被赋值NaNJavaScript特有的特殊数据类型，表示“非数值”，是指程序运行时由于某种原因发生计算错误，产生没有意义的数值转义字符控制字符，它是以“\”开头、不可显示的特殊字符，利用转义字符可以在字符串中添加不可显示的特殊字符或者避免引号匹配问题例21-1：
<script
type="text/javascript">
var
a,
type_a;
a
=
100;
type_a
=
typeof
a;
document.write(a
+
"的类型是："
+
type_a
+
"<br
/>");
a
=
true;
type_a
=
typeof
a;
document.write(a
+
"的类型是："
+
type_a
+
"<br
/>");
a
=
"hello";
type_a
=
typeof
a;
document.write(a
+
"的类型是："
+
type_a
+
"<br
/>");
a
=
null;
type_a
=
typeof
a;
document.write(a
+
"的类型是："
+
type_a
+
"<br
/>");
a
=
2023
+
"明天会更好";
type_a
=
typeof(a);
document.write(a
+
"的类型是："
+
type_a
+
"<br
/>");
</script>三、运算符例21-2：判断输入的年份是否是闰年<script>
var
year
=
mpt("请输入要判断的年份");
year
=
parseInt(year);
var
str
=
year
%
4
==
0
&&
year
%
100
!=
0
||
year
%
400
==
0;
var
result
=
str
?
"是闰年"
:
"不是闰年";
document.write(year
+
"年"
+
result);</script>四、函数1．定义函数function函数名（[参数1,参数2…]）{
函数体；
[return表达式]}2．调用函数函数名（[参数1,参数2…]）；例<script
type="text/javascript">
function
printStr()
{
//定义函数
alert("苟日新，日日新。");
}
printStr();
//调用函数
</script>五、DOM简介1．DOM文档对象模型（DocumentObjectModel，DOM）是JavaScript操作网页的接口，它的作用是将网页转换为JavaScript对象，从而可以使用JavaScript对网页进行各种操作。2．获取元素表21-2获取元素和集合的方法分类方法说明获取元素document.getElementById(id)获取指定id的页面元素对象document.querySelector(selector);获取指定选择器的页面元素对象获取元素集合documnet.getElementsByName(name)获取指定name属性值的页面元素对象集合documnet.getElementsByTagName(tag)获取指定标记的页面元素对象集合documnet.getElementsByClassName(class)获取指定类的页面元素对象集合document.querySelectorAll(selector);获取指定选择器的页面元素对象集合六=2\*ROMAN、小结重点掌握JavaScript的基本语法。作业1：课本课后习题与实训作业2：扫码观看案例22中的微课，自学简单计算器的内容。在案例分析时培养学生分析问题解决问题的能力。在代码实现中引导学生遵循正确的代码编写规范。教案22案例22简单计算器计划学时2学时知识目标掌握JavaScript的分支语句的使用语法掌握JavaScript中数据类型转换的方法熟悉JavaScript的事件及事件调用方法能力目标能使用JavaScript编写代码实现简单计算器会使用开发者工具调试JavaScript的程序素质目标在编写代码中遵循正确的编写代码规范在编写代码中培养认真细致、精益求精的工匠精神教学重点JavaScript的分支语句数据类型转换教学难点事件及事件调用教学模式教学做一体化线上+线下混合式教学教学活动及主要环节素质培养第1学时（案例分析实现）=1\*ROMANI.问题讨论：（5分钟）对同学们课前观看微课过程中的疑难问题展开讨论。=2\*ROMANII.案例分析与实现：（40分钟）一、案例描述创建简单计算器，编写JavaScript代码，实现四则运算，当输入数据不合法时（输入非数值型数据或除数为0）进行提示，运行效果如图22-1所示。具体要求如下。（1）添加3个文本框，用于输入两个数和显示计算结果。（2）添加下拉列表框，用于选择运算符。（3）添加“计算”按钮，单击该按钮时进行计算，将结果显示到“结果”文本框中。（4）输入非数值型数据或者除数为0时，出现警示对话框，给予操作提示。图22-1简单计算器案例分析在页面上添加盒子，在盒子中添加标题<h2>标记和四对<p>标记，在<p>标记中放入提示信息和相应控件，输入数据和显示结果的控件使用<input>标记定义，下拉列表框使用<select>标记定义，“计算”按钮使用<input>标记定义，定义盒子和控件的样式。创建脚本文件，编写JavaScript代码，使用document对象的getElementById()方法获取输入的数据和运算符，通过多分支语句完成运算。案例实现学生同步操作，做学教一体1．创建表单：<div
id="box">
<h2>简单计算器</h2>
<p>请输入第一个数：<input
id="num1"
type="text"></p>
<p>请输入第二个数：<input
id="num2"
type="text"></p>
<p>运算符：
<select
id="opt">
<option
value="+"
selected>+</option>
<option
value="-">-</option>
<option
value="*">*</option>
<option
value="/">/</option>
</select>
<input
type="button"
value="计算"
onclick="calc()">
</p>
<p>结果：<input
id="result"
type="text"></p>
</div>2．定义表单的CSS样式3．创建JavaScript脚本文件<script
type="text/javascript">
function
calc()
{
//定义函数
var
num1
=
document.getElementById('num1').value; //获取第一个数
var
num2
=
document.getElementById('num2').value;
//获取第二个数
num1
=
parseFloat(num1)
&&
Number(num1);
//
num2
=
parseFloat(num2)
&&
Number(num2);
//
var
result;
//定义存放结果的变量
if
(isNaN(num1)
||
isNaN(num2))
{
//如果输入数据不是数值型
alert('请输入数字');
//显示提示信息
return
false;
//返回
}
else
{
var
opt
=
document.getElementById('opt').value
//获取运算符
switch
(opt)
{
//根据运算符选择不同的分支进行计算
case
'+':
result
=
num1
+
num2;
break;
case
'-':
result
=
num1
-
num2;
break;
case
'*':
result
=
num1
*
num2;
break;
case
'/':
if
(num2
==
0)
{
//除数如果为0，则显示提示信息，不计算
alert("除数不能为0");
return;
}
else
{
result
=
num1
/
num2;
}
break;
}
d
}
}</script>第2学时（相关知识点）一、分支语句1．单分支<script
type="text/javascript">
var
score=prompt("请输入你的考试成绩："); //定义变量接收输入的数值
if(score>=90){
//如果条件成立，则弹出“你真棒！”
alert("你真棒！");
}
</script>2.双分支
<script
type="text/javascript">
var
score=prompt("请输入你的考试成绩：");
//定义变量接收输入的数值
if(score>=60){
alert("恭喜你，顺利通过！");
//条件成立，弹出“恭喜你，顺利通过！”
}
else{
alert("很不幸，你没通过！");
//条件不成立，弹出“很不幸，你没通过！”
}
</script>3．多分支<script
type="text/javascript">
var
score=prompt("请输入你的考试成绩：");
//定义变量接收输入的数值
if(score>=90){
//如果条件成立，则弹出“优秀！”
alert("优秀！");
}
else
if(score>=80){
alert("良好！");
}
else
if(score>=70){
alert("一般！");
}
else
if(score>=60){
alert("及格！");
}
else{
alert("不及格！");
}</script>4．多分支语句（switch语句）<script
type="text/javascript">
var
score=prompt("请输入你的考试成绩：");
//定义变量接收输入的数值
var
n=
Math.floor(score/10);
//向下取整
switch(n){
case
10:case
9:
alert("优秀！");break;
case
8:
alert("良好！");break;
case
7:
alert("一般！");break;
case
6:
alert("及格！");break;
default:
alert("不及格！");
}</script>二、数据类型转换1．隐式类型转换2．显式类型转换方法说明示例parseInt()将数据转换成整型parseInt("123.567")//返回123parseInt("123abc")//返回123parseInt("abc123")//返回NaNparseFloat()将数据转换为浮点型parseFloat("123.567")//返回123.567parseFloat("123abc")//返回123parseFloat("abc123")//返回NaNNumber()将数据转换成数字Number("3.14")
//返回3.14
Number("99a88")
//返回NaNNumber(false)
//返回0
Number(true)
//返回1Boolean()将数据转换成布尔型Boolean(undefined)//falseBoolean(1)//trueBoolean(0)//falseBoolean(NaN)//falseString()将数据转换成字符串型String(123)
//返回"123"toString()将数据转换成字符串型123.toString()//返回"123"例22-5：输入两个数，计算两数之和。略。三、事件与事件调用1．事件事件事件触发时机onclick单击时触发ondblclick双击时触发onmousedown按下任意鼠标按键时触发onmouseover鼠标指针进入时触发onmouseup释放任意鼠标按键时触发onkeydown键盘按键按下时触发onkeyup键盘按键弹起时触发onsubmit提交表单时触发onfocus获得焦点时触发onblur失去焦点时触发onload页面载入完毕后触发2．事件调用（1）行内绑定（2）动态绑定四=2\*ROMAN、小结重点掌握JavaScript的分支语句的语法、数据类型转换方法，常用的事件及事件调用方法。作业1：课本课后习题与实训作业2：扫码观看案例23中的微课，自学限时促销的内容。在案例分析时培养学生分析问题解决问题的能力。在代码实现中引导学生遵循正确的代码编写规范。教案23案例23限时促销计划学时2学时知识目标了解面向对象的概念掌握内置对象Date的使用了解BOM对象的概念掌握window对象计时器的相关方法能力目标能使用JavaScript编写代码实现倒计时器会使用开发者工具调试JavaScript的程序素质目标在编写代码中遵循正确的编写代码规范在编写代码中培养认真细致、精益求精的工匠精神教学重点JavaScript的Date对象window对象的定时器功能教学难点window对象的setInterval方法教学模式教学做一体化线上+线下混合式教学教学活动及主要环节素质培养第1学时（案例分析与实现）=1\*ROMANI.问题讨论：（5分钟）对同学们课前观看微课过程中的疑难问题展开讨论。=2\*ROMANII.案例分析与实现：（40分钟）案例描述图23-1小米产品限时促销创建小米产品的限时促销页面，运行效果如图23-1所示。具体要求如下。（1）通过脚本代码设定限时促销结束时间，将时间以时、分、秒的形式显示到网页中。（2）倒计时的时、分、秒都用两位数显示，不足两位数时前面补0。案例分析在页面上添加盒子，在盒子中添加四对<p>标记，在<p>标记中放入文字、图像和<span>标记等，将时、分、秒数值和时、分、秒之间的分隔符放入<span>标记。定义盒子、<p>标记和<span>标记的样式。创建脚本文件，编写JavaScript代码，定义显示时、分、秒的函数，使用window对象的setInterval()方法使函数每隔1s执行一次。案例实现学生同步操作，做学教一体1．搭建结构：<div
class="seckill">
<p>小米促销专场</p>
<p><img
src="images/shandian.png"
width="49"
alt="图片"></p>
<p>距离结束还有</p>
<p></span><span
id="second"></span></p></div>2．定义CSS样式3．创建JavaScript脚本文件<script
type="text/javascript">
function
fresh()
{
//定义函数
var
endtime
=
new
Date("2023/01/29,23:59:59"); //促销结束时间
var
nowtime
=
new
Date();
//当前时间
var
leftsecond
=
parseInt((endtime.getTime()
-
nowtime.getTime())
/
1000); //剩余毫秒数
h
=
parseInt(leftsecond
/
3600);
//剩余小时数
m
=
parseInt((leftsecond
/
60)
%
60);
//剩余分钟数
s
=
parseInt(leftsecond
%
60);
//剩余秒数
if
(h
<
10
&&
h
>=
0)
h
=
"0"
+
h;
//剩余如果不足10h，则前面补0
else
if
(h
<
0)
h
=
"00"
//剩余小时数为0时，显示00
if
(m
<
10
&&
m
>=
0)
m
=
"0"
+
m;
//剩余如果不足10min，则前面补0
else
if
(m
<
0)
m
=
"00"
//剩余分钟数为0时，显示00
if
(s
<
10
&&
s
>=
0)
s
=
"0"
+
s;
//剩余如果不足10s，则前面补0
else
if
(s
<
0)
s
=
"00"
//剩余秒数为0时，显示00
document.getElementById("hour").innerHTML
=
h;//显示剩余小时数
document.getElementById("minute").innerHTML
=
m; //显示剩余分钟数
document.getElementById("second").innerHTML
=
s; //显示剩余秒数
if
(leftsecond
<
0)
{
clearInterval(sh);
//停止倒计时
}
}
var
sh
=
setInterval("fresh()",
1000);
//每隔1s执行一次fresh()函数
</script>第2学时（相关知识点）一、面向对象简介1．对象概述2.内置对象内置对象说明Math数学对象，用于实现数学运算功能Date日期对象，用于定义日期对象String字符串对象，用于定义字符串对象和处理字符串Array数组对象，用于定义数组对象Number原始数值对象，可以在原始数值和对象之间转换Boolean布尔值对象，用于将非布尔型的值转换成布尔型的值（true或false）Object基类，所有JavaScript内置类都是从基类Object派生（继承）出来的RegExp正则表达式对象，用于完成有关正则表达式的操作和功能Date对象1．创建Date对象①创建当前时刻的Date()对象，例如，下面的代码。var
now=new
Date();②创建指定日期的Date对象，例如，下面的代码。var
date1
=
new
Date("2023-3-1");var
date1
=
new
Date("2023/3/1");var
date1
=
new
Date("2023,3,1");
③创建一个指定日期和时间的Date对象，例如，下面的代码。var
date1=new
Date(“2023,3,1,10:20:30:50”);var
date1=new
Date(2023,3,1,10,20,30,50);2．Date对象的方法方法说明get方法getDate()返回用本地时间表示的一个月中的日期值（1～31）getDay()返回用本地时间表示的一周中的星期值（0～6）getFullYear()返回用本地时间表示的4位数字的年份值（如2024）getHour()返回用本地时间表示的小时数（1～23）getMinutes()返回用本地时间表示的分钟数（0～59）…………例<script
type="text/javascript">
var
now
=
new
Date();
//创建Date对象
var
week
=
now.getDay();
//获取数字形式的星期几
var
result;
switch
(week)
{
case
1:result
=
"星期一";break;
case
2:result
=
"星期二";break;
case
3:result
=
"星期三";break;
case
4:result
=
"星期四";break;
case
5:result
=
"星期五";break;
case
6:result
=
"星期六";break;
default:result
=
"星期日";break;
}
document.write("今天是"
+
result);
//输出信息</script>BOM简介BOM简介浏览器对象模型（BrowserObjectModel，BOM）提供与浏览器交互的方法和接口。图23-5BOM对象模型1．window对象方法描述alert()弹出警示对话框，显示一条提示信息和一个“确定”按钮confirm()弹出确认对话框，显示一条确认信息、一个“确定”按钮、一个“取消”按钮prompt()弹出提示对话框，提示用户输入信息open()打开一个新的浏览器窗口close()关闭浏览器窗口setInterval()按照指定的毫秒数来调用函数或执行一段代码setTimeout()在指定的毫秒数后调用函数或执行一段代码clearInterval()取消由setInterval()设置的效果clearTimeout()取消由setTimeout()设置的效果例23-2：使用confirm()方法弹出确认对话框<script
type="text/javascript">
if(confirm("确定删除吗?")){
alert("确定!");
}else{
alert("不确定!");
}</script>2．定时器setInterval()方法：让操作每隔一定时间间隔反复执行setTimeout()方法：执行一次后就停止操作，因此该方法可以实现延时操作。clearInterval()方法：取消定时器clearTimeout()方法：取消定时器例代码略。四=2\*ROMAN、小结重点掌握Date对象的使用和定时器的setInterval()方法和setTimeout()方法的使用。作业1：课本课后习题与实训作业2：扫码观看案例24中的微课，提前学习轮播图的内容。在案例分析时培养学生分析问题解决问题的能力。在代码实现中引导学生遵循正确的代码编写规范。教案24案例24轮播图计划学时2学时知识目标掌握设置元素样式的语法格式掌握获取元素的尺寸和位置的语法格式掌握轮播图的实现方法能力目标能编写JavaScript代码实现轮播图效果会使用开发者工具调试JavaScript的程序素质目标在编写代码中遵循正确的编写代码规范在编写代码中培养认真细致、精益求精的工匠精神教学重点设置元素样式获取或改变元素的尺寸和位置教学难点获取或改变元素的尺寸和位置教学模式教学做一体化线上+线下混合式教学教学活动及主要环节素质培养第1学时（案例分析实现）=1\*ROMANI.问题讨论：（5分钟）对同学们课前观看微课过程中的疑难问题展开讨论。=2\*ROMANII.案例分析与实现：（40分钟）一、案例描述创建小米产品广告展示轮播图，页面浏览效果如图24-1所示。具体要求如下。（1）轮流展示5张图片，每隔2s切换一次。（2）切换图片时有过渡效果。图24-1轮播图案例分析在页面上添加盒子，在盒子中添加无序列表标记<ul>，在<ul>标记中添加6对<li>标记，在每个<li>标记中放入一张图片，在最后的<li>标记中再次放入第一张图片，使图片切换时实现无缝衔接。定义盒子、<ul>标记、<li>标记和<img>标记的样式。创建脚本文件，编写JavaScript代码，定义切换图片的函数，使用window对象的setInterval()方法使函数每隔2s执行一次。案例实现学生同步操作，做学教一体1．搭建轮播图结构：<div
id="silder">
<ul
id="list">
<li><img
src="images/banner1.jpg"></li>
<li><img
src="images/banner2.jpg"></li>
<li><img
src="images/banner3.jpg"></li>
<li><img
src="images/banner4.jpg"></li>
<li><img
src="images/banner5.jpg"></li>
<
</ul></div>2．定义CSS样式3．创建JavaScript脚本文件<script>
//第一轮结束，切换图片时有从头开始的效果
var
slider
=
document.querySelector("#slider"); //获取盒子元素
var
list
=
document.querySelector("#list");
//获取ul元素
var
img
=
document.querySelector("img");
//获取图像集合
var
uli
=
list.children;
//获取图片列表
var
index
=
0;
//图片序号
setInterval(move,
2000);
//每隔2s执行一次move()函数
function
move()
{
if
(index
<
uli.length
-
1)
{
//如果不是最后一张图片
index++;//图片序号加1
list.style.left
=
-index
*
img.offsetWidth
+
"px";
//
图片向左移出，offsetWidth是图像的布局宽度
list.style.transition
=
'left
1s';
//移出图片时有过渡效果,用时1s
if
(index
==
uli.length
-
1)
{
//如果是最后一张图片，则切换到第一张图片
温馨提示
- 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 吉林师范大学《实变函数》2021-2022学年第一学期期末试卷
- 吉林师范大学《固体废物处理与处置》2021-2022学年第一学期期末试卷
- 智慧金融数据中台建设方案
- 妇科临床试验应急响应预案
- 2024代理合同代理商合作协议
- 2024工程设备安装合同书
- 2024工业品买卖合同模板「」
- 2024广州市存量房买卖合同范本
- 展览会消防安全应急救援预案
- 吉林大学《内科学》2021-2022学年第一学期期末试卷
- 四年级上册科学课件《12让灯泡亮起来》共10张PPT冀人版
- 公司授权委托管理办法
- Q∕SY 05267-2016 钢质管道内检测开挖验证规范
- 【审计工作底稿模板】SA营业收入
- 埋地铸铁钢管结构计算
- 提高血液透析治疗质量的新策略课件
- 统编小学语文四年级上册教材解读及教学建议课件（19页）
- 铁塔基础施工方案(完整版)
- 子儿吐吐（绘本） (2)
- 王浦劬《政治学基础》笔记详细版
- 信息资产管理制度管理办法
评论
0/150
提交评论