發表文章

目前顯示的是 2月, 2022的文章

[JavaScript] HTML svg 動態畫圖

-
圖片
習作要用 HTML 的 <canvas> 或 <svg> 畫統計圖形，就玩了一下這些標籤，這篇只討論 <svg> ，關於動態生成圖形，例如上圖是按了 <button> 後的結果，本來全是空的如下： 生成的部份我用「原本有無標籤」分成兩類 已有形狀tag 如果 <svg>裡已經有要畫的標籤 tag，例如<line>、<rect>、... ，只要動態賦予屬性即可，例如 HTML 是： <body> <svg id="idSvg" width="300" height="300"> <line id="line" x1="0" y1="0" x2="0" y2="0"></line> <circle id="circ" cx="0" cy="0" r="0"></circle> </svg> <button onclick="draw()">畫</button> <script> </script> </body> 即使直線與圖形的標籤已存在，只要直線的點重合、圓形半徑為零，等等的情形下也是不會畫出來的，而寫在 <button> 中的事件要做的是 抓取 #line 與 #circ 的 DOM，改變直線的坐標、改變圓心坐標和半徑 ： <script> function draw() { let line = document.getElementById('line'); line.setAttribute('x1', 220); line.setAttribute('y1', 40); line.setAttribute('x2',...
張貼留言
閱讀完整內容

[JavaScript] 產生月曆

-
圖片
這是 JavaScript 的一個作業的一部份，我把他拆成三個部份寫。這是最後一部份，在確定是合理存在的日期後，產生當月的月曆，如下： 顯然這個問題不是只有顯示該月的天數而已，為了讓月曆好看，可能要 補足上個月與下個月的部份 ，這才是這個問題要處理的重點。以上圖來說，2014 年 7 月有 31 天，不只要把星期二的 7 月 1 日到星期四的 7 月 31 日做出來，還要把前後的 6 月 29 日、6 月 30 日、8 月 1 日、8 月 2 日補上，這才是我們常見的月曆。 需判斷的東西 主體是這個月，所以 當月共有幾天要先知道 ，這在上一篇 [JavaScript] 得到某年某月的天數 做出來了，想法是 Date 物件 Month 多 1，Date 取 0 退一天。 第二為了知道需不需要補足上個月的最後幾天，要知道 當月第一天是星期幾 ，這利用 Date 物件的 getDay() 方法（星期日回傳0，星期一回傳1，....星期六回傳6）。 第三，若上個月最後幾天也要做出來，表示 上個月共有幾天也要求得 ，這利用 Date 物件取當月，然後日期用 0 可得上個月最後一天物件。 第四為了知道是否要補齊下個月的頭幾天，就要求出 當月最後一天是星期幾 ，前上一篇有求出當月最後一天的 Date 物件，再 .getDay() 回傳即可。 然後目標是將日期用 Array 依序列出，日期小於 1 的是上個月（例如下圖的 - 1、0），大於當月總天數的是下個月（例如下圖的 32、33）。 如上圖 2014 年 7 月的月曆，就是要產生一個陣列 days = [ -1, 0, 1, 2, 3, ... , 31, 32, 33 ] function generateCalender(inputYear, inputMonth, inputDate) { let domCalendar = document.getElementById('tableCalendar'); if (domCalendar) { // 若已產生過日曆就刪掉他，不然會一直累加 domCalendar.remove(); } let days = []; let startDate = new Date...
張貼留言
閱讀完整內容

[JavaScript] 得到某年某月的天數

-
圖片
這是 JavaScript 的一個作業的一部份，我把他拆成三個部份寫。這個部份是要在選擇某年某月之後，可以知道該月共有幾天，頁面操作上是有年的<select>標籤，選了年份後出現月的<select>標籤，選了月份後會出現日的<select>，而且日期的<option>必須符合該年該月，例如 2017 年 2 月有 28 天，最後一個的<option>就要 1 到 28： 這是 HTML 的樣子，其實三個<select>都在，只是月和日是隱藏的，在選擇年或月時才會顯示下一個： <select id="seleYear"> </select> <select id="seleMonth" style="visibility: hidden;"> </select> <select id="seleDate" style="visibility: hidden;"> </select> 會用到 JavaScript 的 Date 物件，在上一篇 [JavaScript] 檢驗輸入日期是否真實存在 有筆記，下面快速介紹一次這次會用到的部份： JavaScript 的 Date 物件 建構函式 new Date(Year, Month, Day)： 用年月日可建構代表該日期的物件，要注意 Month 是0 到 11，一月的 Month = 0，二月的 Month = 1，.... ，十二月的 Month = 11，所以 new Date( 2022, 1, 10 ) 會得到 2022 年 2 月 10 日的物件。 .getDate()： 回傳 Date 物件的日期，1日 = 1，2日 = 2，.... ，31日 = 31 上一篇有提到 Date 物件的推移情形，除了上一篇用來判斷日期是否存在，還可用來尋找當月的天數，因為月也可以推移，如果月 +1 會得下個月，而且跨年的情形也確實反映： new Date( 1985, 11, 18 ) 得 1985 年 12 月 18 日的物件 new...
張貼留言
閱讀完整內容

[JavaScript] 檢驗輸入日期是否真實存在

-
圖片
這是 JavaScript 的一個作業的一部份，我把他拆成三個部份寫，第一個是要檢驗從 <input type="text" /> 標籤獲得使用者輸入字串，必須符合 yyyy/mm/dd 的格式，例如 2022/02/10 、2022/04/31 或 2022/02/29： 而且要檢查符合格式的字串所代表的日期， 是否真實存在 ，若輸入不符合格式或不存在的日期就提示並阻擋。大部份網路上找到的這方面問題的解法，都是針對月份是1、3、5、7、8、10、12月則有 31 日，剩餘月份為 30 日，最後檢查閏年平年判斷 2 月是 28 日還是 29 日。這裡我想用不同的解法，並做成了筆記。 格式檢查 首先 HTML 部份 <label for="date">日期：</label> <input type="text" id="date" placeholder="yyyy/mm/dd" onblur="checkDate()" /> <div id="dateWarning"></div> <input> 標籤有 id="date"，在失去焦點時註冊事件 checkDate()，下面置放一個<div> 標籤 id="dateWarning" 做為提示的區域。先對輸入字串檢查是否符合 yyyy/mm/dd 的形式，這裡用正規表示式 Regular Expression： function checkDate() { let dateText = document.getElementById('date').value; // 取輸入的值的字串 let dateWarning = document.getElementById('dateWarning'); // 取錯誤提示的元素 let regexp = new RegExp(/^[0-9]{1,4}\/((0[1-9])|(1[0-2]))\/((0[1-9])|(...
張貼留言
閱讀完整內容