网页设计与制作案例教程（HTML5 CSS3 JavaScript）（微课版）（第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()方法：执行一次后就停止操作，因此该方法可以实现延时操作