網(wǎng)頁設(shè)計與制作案例教程（HTML5 CSS3 JavaScript）（微課版）（第2版） 教案 案例23限時促銷

教案23案例23限時促銷計劃學(xué)時2學(xué)時知識目標(biāo)了解面向?qū)ο蟮母拍钫莆諆?nèi)置對象Date的使用了解BOM對象的概念掌握window對象計時器的相關(guān)方法能力目標(biāo)能使用JavaScript編寫代碼實(shí)現(xiàn)倒計時器會使用開發(fā)者工具調(diào)試JavaScript的程序素質(zhì)目標(biāo)在編寫代碼中遵循正確的編寫代碼規(guī)范在編寫代碼中培養(yǎng)認(rèn)真細(xì)致、精益求精的工匠精神教學(xué)重點(diǎn)JavaScript的Date對象window對象的定時器功能教學(xué)難點(diǎn)window對象的setInterval方法教學(xué)模式教學(xué)做一體化線上+線下混合式教學(xué)教學(xué)活動及主要環(huán)節(jié)素質(zhì)培養(yǎng)第1學(xué)時（案例分析與實(shí)現(xiàn)）=1\*ROMANI.問題討論：（5分鐘）對同學(xué)們課前觀看微課過程中的疑難問題展開討論。=2\*ROMANII.案例分析與實(shí)現(xiàn)：（40分鐘）案例描述圖23-1小米產(chǎn)品限時促銷創(chuàng)建小米產(chǎn)品的限時促銷頁面，運(yùn)行效果如圖23-1所示。具體要求如下。（1）通過腳本代碼設(shè)定限時促銷結(jié)束時間，將時間以時、分、秒的形式顯示到網(wǎng)頁中。（2）倒計時的時、分、秒都用兩位數(shù)顯示，不足兩位數(shù)時前面補(bǔ)0。案例分析在頁面上添加盒子，在盒子中添加四對<p>標(biāo)記，在<p>標(biāo)記中放入文字、圖像和<span>標(biāo)記等，將時、分、秒數(shù)值和時、分、秒之間的分隔符放入<span>標(biāo)記。定義盒子、<p>標(biāo)記和<span>標(biāo)記的樣式。創(chuàng)建腳本文件，編寫JavaScript代碼，定義顯示時、分、秒的函數(shù)，使用window對象的setInterval()方法使函數(shù)每隔1s執(zhí)行一次。案例實(shí)現(xiàn)學(xué)生同步操作，做學(xué)教一體1．搭建結(jié)構(gòu)：<div

class="seckill">

<p>小米促銷專場</p>

<p><img

src="images/shandian.png"

width="49"

alt="圖片"></p>

<p>距離結(jié)束還有</p>

<p></span><span

id="second"></span></p></div>2．定義CSS樣式3．創(chuàng)建JavaScript腳本文件<script

type="text/javascript">

function

fresh()

{

//定義函數(shù)

var

endtime

=

new

Date("2023/01/29,23:59:59"); //促銷結(jié)束時間

var

nowtime

=

new

Date();

//當(dāng)前時間

var

leftsecond

=

parseInt((endtime.getTime()

-

nowtime.getTime())

/

1000); //剩余毫秒數(shù)

h

=

parseInt(leftsecond

/

3600);

//剩余小時數(shù)

m

=

parseInt((leftsecond

/

60)

%

60);

//剩余分鐘數(shù)

s

=

parseInt(leftsecond

%

60);

//剩余秒數(shù)

if

(h

<

10

&&

h

>=

0)

h

=

"0"

+

h;

//剩余如果不足10h，則前面補(bǔ)0

else

if

(h

<

0)

h

=

"00"

//剩余小時數(shù)為0時，顯示00

if

(m

<

10

&&

m

>=

0)

m

=

"0"

+

m;

//剩余如果不足10min，則前面補(bǔ)0

else

if

(m

<

0)

m

=

"00"

//剩余分鐘數(shù)為0時，顯示00

if

(s

<

10

&&

s

>=

0)

s

=

"0"

+

s;

//剩余如果不足10s，則前面補(bǔ)0

else

if

(s

<

0)

s

=

"00"

//剩余秒數(shù)為0時，顯示00

document.getElementById("hour").innerHTML

=

h;//顯示剩余小時數(shù)

document.getElementById("minute").innerHTML

=

m; //顯示剩余分鐘數(shù)

document.getElementById("second").innerHTML

=

s; //顯示剩余秒數(shù)

if

(leftsecond

<

0)

{

clearInterval(sh);

//停止倒計時

}

}

var

sh

=

setInterval("fresh()",

1000);

//每隔1s執(zhí)行一次fresh()函數(shù)

</script>第2學(xué)時（相關(guān)知識點(diǎn)）一、面向?qū)ο蠛喗?．對象概述2.內(nèi)置對象內(nèi)置對象說明Math數(shù)學(xué)對象，用于實(shí)現(xiàn)數(shù)學(xué)運(yùn)算功能Date日期對象，用于定義日期對象String字符串對象，用于定義字符串對象和處理字符串Array數(shù)組對象，用于定義數(shù)組對象Number原始數(shù)值對象，可以在原始數(shù)值和對象之間轉(zhuǎn)換Boolean布爾值對象，用于將非布爾型的值轉(zhuǎn)換成布爾型的值（true或false）Object基類，所有JavaScript內(nèi)置類都是從基類Object派生（繼承）出來的RegExp正則表達(dá)式對象，用于完成有關(guān)正則表達(dá)式的操作和功能Date對象1．創(chuàng)建Date對象①創(chuàng)建當(dāng)前時刻的Date()對象，例如，下面的代碼。var

now=new

Date();②創(chuàng)建指定日期的Date對象，例如，下面的代碼。var

date1

=

new

Date("2023-3-1");var

date1

=

new

Date("2023/3/1");var

date1

=

new

Date("2023,3,1");

③創(chuàng)建一個指定日期和時間的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位數(shù)字的年份值（如2024）getHour()返回用本地時間表示的小時數(shù)（1～23）getMinutes()返回用本地時間表示的分鐘數(shù)（0～59）…………例<script

type="text/javascript">

var

now

=

new

Date();

//創(chuàng)建Date對象

var

week

=

now.getDay();

//獲取數(shù)字形式的星期幾

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()彈出確認(rèn)對話框，顯示一條確認(rèn)信息、一個“確定”按鈕、一個“取消”按鈕prompt()彈出提示對話框，提示用戶輸入信息open()打開一個新的瀏覽器窗口close()關(guān)閉瀏覽器窗口setInterval()按照指定的毫秒數(shù)來調(diào)用函數(shù)或執(zhí)行一段代碼setTimeout()在指定的毫秒數(shù)后調(diào)用函數(shù)或執(zhí)行一段代碼clearInterval()取消由setInterval()設(shè)置的效果clearTimeout()取消由setTimeout()設(shè)置的效果例23-2：使用confirm()方法彈出確認(rèn)對話框<script

type="text/javascript">

if(confirm("確定刪除嗎?")){

alert("確定!");

}else{

alert("不確定!");

}</script>2．定時器setInterval()方法：讓操作每隔一定時間間隔反復(fù)執(zhí)行setTimeout()方法：執(zhí)行一次后就停止操作，因此該方法可以實(shí)現(xiàn)延時操作