下載本文檔
版權說明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權,請進行舉報或認領
文檔簡介
教案23案例23限時促銷計劃學時2學時知識目標了解面向?qū)ο蟮母拍钫莆諆?nèi)置對象Date的使用了解BOM對象的概念掌握window對象計時器的相關方法能力目標能使用JavaScript編寫代碼實現(xiàn)倒計時器會使用開發(fā)者工具調(diào)試JavaScript的程序素質(zhì)目標在編寫代碼中遵循正確的編寫代碼規(guī)范在編寫代碼中培養(yǎng)認真細致、精益求精的工匠精神教學重點JavaScript的Date對象window對象的定時器功能教學難點window對象的setInterval方法教學模式教學做一體化線上+線下混合式教學教學活動及主要環(huán)節(jié)素質(zhì)培養(yǎng)第1學時(案例分析與實現(xiàn))=1\*ROMANI.問題討論:(5分鐘)對同學們課前觀看微課過程中的疑難問題展開討論。=2\*ROMANII.案例分析與實現(xiàn):(40分鐘)案例描述圖23-1小米產(chǎn)品限時促銷創(chuàng)建小米產(chǎn)品的限時促銷頁面,運行效果如圖23-1所示。具體要求如下。(1)通過腳本代碼設定限時促銷結束時間,將時間以時、分、秒的形式顯示到網(wǎng)頁中。(2)倒計時的時、分、秒都用兩位數(shù)顯示,不足兩位數(shù)時前面補0。案例分析在頁面上添加盒子,在盒子中添加四對<p>標記,在<p>標記中放入文字、圖像和<span>標記等,將時、分、秒數(shù)值和時、分、秒之間的分隔符放入<span>標記。定義盒子、<p>標記和<span>標記的樣式。創(chuàng)建腳本文件,編寫JavaScript代碼,定義顯示時、分、秒的函數(shù),使用window對象的setInterval()方法使函數(shù)每隔1s執(zhí)行一次。案例實現(xiàn)學生同步操作,做學教一體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.創(chuàng)建JavaScript腳本文件<script
type="text/javascript">
function
fresh()
{
//定義函數(shù)
var
endtime
=
new
Date("2023/01/29,23:59:59"); //促銷結束時間
var
nowtime
=
new
Date();
//當前時間
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,則前面補0
else
if
(h
<
0)
h
=
"00"
//剩余小時數(shù)為0時,顯示00
if
(m
<
10
&&
m
>=
0)
m
=
"0"
+
m;
//剩余如果不足10min,則前面補0
else
if
(m
<
0)
m
=
"00"
//剩余分鐘數(shù)為0時,顯示00
if
(s
<
10
&&
s
>=
0)
s
=
"0"
+
s;
//剩余如果不足10s,則前面補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學時(相關知識點)一、面向?qū)ο蠛喗?.對象概述2.內(nèi)置對象內(nèi)置對象說明Math數(shù)學對象,用于實現(xiàn)數(shù)學運算功能Date日期對象,用于定義日期對象String字符串對象,用于定義字符串對象和處理字符串Array數(shù)組對象,用于定義數(shù)組對象Number原始數(shù)值對象,可以在原始數(shù)值和對象之間轉(zhuǎn)換Boolean布爾值對象,用于將非布爾型的值轉(zhuǎn)換成布爾型的值(true或false)Object基類,所有JavaScript內(nèi)置類都是從基類Object派生(繼承)出來的RegExp正則表達式對象,用于完成有關正則表達式的操作和功能Date對象1.創(chuàng)建Date對象①創(chuà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()彈出確認對話框,顯示一條確認信息、一個“確定”按鈕、一個“取消”按鈕prompt()彈出提示對話框,提示用戶輸入信息open()打開一個新的瀏覽器窗口close()關閉瀏覽器窗口setInterval()按照指定的毫秒數(shù)來調(diào)用函數(shù)或執(zhí)行一段代碼setTimeout()在指定的毫秒數(shù)后調(diào)用函數(shù)或執(zhí)行一段代碼clearInterval()取消由setInterval()設置的效果clearTimeout()取消由setTimeout()設置的效果例23-2:使用confirm()方法彈出確認對話框<script
type="text/javascript">
if(confirm("確定刪除嗎?")){
alert("確定!");
}else{
alert("不確定!");
}</script>2.定時器setInterval()方法:讓操作每隔一定時間間隔反復執(zhí)行setTimeout()方法:執(zhí)行一次后就停止操作,因此該方法可以實現(xiàn)延時操作
溫馨提示
- 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請聯(lián)系上傳者。文件的所有權益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁內(nèi)容里面會有圖紙預覽,若沒有圖紙預覽就沒有圖紙。
- 4. 未經(jīng)權益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫網(wǎng)僅提供信息存儲空間,僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理,對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對任何下載內(nèi)容負責。
- 6. 下載文件中如有侵權或不適當內(nèi)容,請與我們聯(lián)系,我們立即糾正。
- 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 陶瓷制品在戶外運動裝備中的應用考核試卷
- 相機軟件編程與固件更新考核試卷
- 軟件行業(yè)電子商務實戰(zhàn)考核試卷
- 樂器零售業(yè)的人力資源戰(zhàn)略規(guī)劃考核試卷
- 2024-2030年中國智能家居行業(yè)市場發(fā)展分析及前景預測與戰(zhàn)略規(guī)劃研究報告
- 2024-2030年中國日式面包屑市場營銷策略探討與未來消費趨勢預測研究報告
- 2024-2030年中國無襯紙行業(yè)市場現(xiàn)狀分析及競爭格局與投資發(fā)展研究報告
- 2024-2030年中國無線城市行業(yè)發(fā)展展望與未來方向預測報告
- 2024-2030年中國無機試劑行業(yè)發(fā)展分析及發(fā)展前景與趨勢預測研究報告
- 2024-2030年中國無機消光劑行業(yè)運營狀況及市場前景深度調(diào)查研究報告
- 做有溫度的教育
- 中小學教師育德能力及其培育
- 董事會對高級管理人員經(jīng)營業(yè)績考核暫行辦法
- 小學音樂人教版 二年級下冊唱歌山谷回音真好聽 課件
- 高中人教物理選擇性必修一第1章第3節(jié)動量守恒定律教學設計
- 南京信息工程大學典型天氣過程分析北方氣旋
- 政府采購代理人員專項測試題附答案
- 綜合管網(wǎng)遷改設計說明
- 化工儀表及自動化ppt完整版(第三版-厲玉鳴)課件
- 國防光纜保護方案
- 服裝色彩學作業(yè)3
評論
0/150
提交評論