發表文章

目前顯示的是 4月, 2023的文章

Part6 月曆表格日期資料(第九週)

圖片
第一步: 日曆上的日期根據月份正確的顯示出來,使用閏年的判斷式和迴圈。 程式碼: 套用程式後: 第二步: 接著將上個月的和下個月的日期正確的顯示出來,也是使用迴圈。 程式碼: 套用程式後:

Part5 JavaScript-日期的更新(第八週)

圖片
第一步: 使用函式將原本數字顯示改成英文顯示,有星期的還有月份的。 程式碼: 也可使用陣列: 這是之前的結果: 套用函式程式後: 第二步: 將原本14號利用函式改成日期的縮寫,像是3號是這個月的第三天所以是 third, 所以個位數是3的就是rd結尾,為了能讓 縮寫小一點所以設定大小為50% 。 程式碼: 套用函式程式後: 第三步: 接著把取得年份跟日期的程式碼都包裝成一個函式,然後呼叫結果是跟之前一樣的。 程式碼: 第四步: 再把所有script裡的函式都丟到js資料夾裡updateDateinfo.js的檔案中,再使用script連結,原本的html檔就可以呼叫 updateDateinfo.js的檔案中的函式,這樣會使維護程式更容易,結果是一樣的。 程式碼:

Part2 右欄_月曆(第六週)

圖片
第一步: 一開始先加入背景文字background - text。 程式碼: 這是之前的結果: 套用標題程式後: 第二步: 套用程式後會發現背景文字跑到左上角,所以新增了CSS格式設定,讓背景文字跑到中間並且放大跟呈現透明。 程式碼: 這是之前的結果: 套用CSS格式設定後: 第三步: 接下來要新增右欄月曆的箭頭,所以要加上script標籤來導入箭頭符號,之後加入CSS格式設定將箭頭放大和滑鼠移置箭頭時呈現透明。 程式碼: 這是之前的結果: 套用CSS格式設定後: 第四步: 要將月曆的某個表格設成灰色背景,我是設在位於第2列、第5行的表格。 程式碼: 這是之前的結果: 套用CSS格式設定後: 第五 步: 要將便利貼貼在表格中,所以我先下載便利貼圖檔放在之前Part2裡images的資料夾,我使用的是note3圖檔, 我是設在位於第3列、第3行的表格,貼上時會太大,所以利用CSS設定將便利貼縮小還有滑鼠移至便利貼時會顯示 這是提示!!! 的文字。 程式碼: 這是之前的結果: 套用CSS格式設定後: