HTML網絡編程之時間格式

絡編程之時間格式。

同學們好，今天我們分享的是如何讓搜索引擎等程序更容易地提取網頁中的時間信息。我們將使用time標簽來實現這一目標。這個標簽你們可能已經有所了解，但是現在不需要掌握太多細節，只需要知道它的作用即可。

現在來看看我們的示例頁面，可以看到頁面中包含了很多句不同時間格式的文字。這些文字并沒有什么特別之處，只是每一句都包含著時間信息。時間信息的格式比較復雜，但是這不影響我們的演示效果。

接下來，我們將介紹實現代碼。time標簽用于定義公歷日期或時間、二十四小時制，時間和時區偏移是可選的。在所有瀏覽器中，time標簽不會渲染任何特殊的效果。但是，它可以讓搜索引擎更容易地在網頁中找到對應的時間信息。

使用time標簽的另一個原因是，世界上有許多不同的日期格式，但是這些不同的格式不容易被電腦識別。如果我們想自動抓取頁面上所有事件的日期并將它們插入到日歷中，time元素可以讓我們附上清晰的可被機器識別的時間或日期。因此，time標簽并不是為了給用戶看的，而是為了方便搜索引擎更好地在網頁上找到對應的時間。

在我們的示例中，時間和普通文字看上去沒有任何區別。除了搜索引擎，網頁同手機上的日歷、提醒等應用程序交互時，time標簽也可以提供很大的方便。

time標簽非常簡單，只包含一個屬性datatime，用于規定日期和時間。如果需要，我們還可以通過元素的內容來指定日期和時間。time標簽的值有很多種，只要是符合規范的時間寫法格式，都可以被接受并轉化為第三方使用的格式。

總之，time標簽的使用頻率并不高，不需要我們進行太多的學習和理解。如果你們知道有這個東西并且知道它的大概意思，就可以了。

今天的分享就到這里，所有的案例和相關文檔都可以向我索取。

下期見，想學習編程的同學請關注我。

文就如何在Axure里怎么調用代碼調用瀏覽器的日期選擇器并對中繼器表格進行日期區間的篩選進行分析，希望對你有所幫助。

今天教大家在Axure里怎么調用代碼調用瀏覽器的日期選擇器并對中繼器表格進行日期區間的篩選。調用瀏覽器日期選擇器的好處是，可以選擇真實的日期，包括某年某月某日是星期幾，哪個二月是29天……都是真實的，那不同的瀏覽器日期選擇器的樣式會有所區別，本案例是用谷歌瀏覽器，而且谷歌也是和Axure標配的，別人瀏覽器有些插件沒有，或者預覽Axure時有些不敢，所以建議大家也是使用谷歌。

一、效果展示

1、可以選擇真實的日期區間，可以點擊上下箭頭切換上月或下月，或者點擊年月快速選擇。

2、根據選擇自動調整開始時間和結束時間，例如選擇開始時間為2023年8月30日，再選擇結束事件為2023年8月1日，這樣開始時間小于結束時間，就會自動識別調整為2023年8月1日至2023年8月30日的區間

3、點擊查詢按鈕，可以對中繼器表格進行篩選，篩選出在日期區間里面的數據。

原型地址：https://474xip.axshare.com/#g=1

二、制作教程

1. 通過js調用瀏覽器的日期選擇器

首先我們要新建一個矩形并命名（案例中命名為code1），然后在里面寫html代碼。

我們用<input type=”date”>可以創建一個日期輸入框，因為開始和結束有兩個日期，所以我們要給他命個名，例如name=”vigo1″，如果需要修改樣式的話，也可以直接在里面增加style，例如寬200，高30可以寫成：style=”width: 200px; height: 30px；

然后我們用JS調用它，首先找到 “data-label” 屬性為 “code1” 的元素（就是我們上面給矩形的命名）$(‘[data-label=code1]’).each(function

并獲取元素內部 <p> 標簽的文本內容（就是我們上面調用date的代碼）var paragraphText = $(this).find(‘p’).text；

最后將矩形替換為代碼內容就是日期選擇器$(this).html(paragraphText)；

這樣就在預覽時就可以看到一個日期選擇器了，然后我們復制一個，需要注意的是第二個的名稱和name不能和第一個一致，我們需要修改一下，不然就會沖突了。

2. 選擇日期之后將值傳回到Axure里

出現日期選擇器后，如果選擇了日期，我們需要將里面的日期值保存的Axure的全局變量里，不然后續無法對中繼器進行篩選，這里我們要先增加一個文本標簽，默認隱藏，用于處理邏輯，命名為click1。

首先，我們選擇name= “vigo1” 的元素，并為其綁定一個 “change” 事件處理函數 $(“input[name=’vigo1′]”).on(“change”, function。

當日期輸入框的值發生變化時，觸發click1函數鼠標單擊時的交互$(“[data-label=’click1′]”).trigger(“click”)；

鼠標單擊click1元件時，我們就講日期選擇器選擇的時，var selectedDate = dateInput.value；

設置為全局變量，這里我們要先增加一個全局變量time1，然后講選擇的日期值賦給它，$axure.setGlobalVariable(“time1”, selectedDate)；

這樣我們就將日期值保存到全局變量里面了，后面的就回歸到axure的原生交互。

第二個日期選擇器也是同樣方式處理，主要名稱不能一樣，基本就是復制粘貼，改個名就可以了。

3. 時間值的處理和比較

接下來我們在增加一個文本標簽，命名為時間值1，默認隱藏，只用于事件的比較。

我們用設置文本的交互，將全局變量里記錄的事件值設置時間值1的文本里。獲取到的事件格式是yyyy-mm-dd，但是axure里要比較時間大小需要用date.parse函數，這個函數需要的日期格式為yyyy/mm/dd。

所以在設置文本的時候，我們可以用replace函數將-符號替換成/

然后我們在用date.parse，這個函數可以計算指定時間和1970年1月1日00:00:00之間相差的毫秒數，相當于將日期格式的字符轉為純數字的格式，這樣通過比較數字的大小就可以比較時間了。

第二個日期選擇器也是同樣方式處理，復制粘貼，改個名就可以了。

4. 時間值的處理和比較

將兩個時間轉為數值之后，我們考慮到，會不會有人選擇開始時間大于結束時間，例如選擇開始時間為2023年8月30日，再選擇結束事件為2023年8月1日，實際上他是想選擇2023年8月1日至2023年8月30日的區間，所以我們寫個交互將他自動調整過來。

我們用幾個文本標簽先記錄兩個時間矩形初始的x，y坐標值，如果會發生變化，我們在在載入時用設置文本的交互，設置對應的坐標值。

第二個日期選擇器也是同樣方式處理。

選擇時間之后根據條件來判斷，如果時間值1大于二，就用移動的交互，將日期選擇器1移動到記錄x1y1的坐標，將日期選擇器2移動到記錄x2y2的坐標值里。

否則，就將日期選擇器1移動到記錄x2y2的坐標，將日期選擇器2移動到記錄x1y1的坐標值里。

這樣就可以自動換位了。

5. 中繼器表格的制作

中繼器里有幾列我們就增加幾個矩形，案例中分別命名為表1~6，以及操作列。

在中繼器表格里增加對應的列，并填寫好內容。

如果是axure10的話，用鏈接的交互，將對應列連接到對應元件就可以了，如果是axure89的話，在中繼器每項加載時就要用設置文本的交互，將表格對應列的值設置到對應元件上。

然后在中繼器外面用矩形制作表頭，每個矩形和中繼器里對應列的矩形寬度一樣。

這樣表格就出來了。

6. 對中繼器表格進行日期區間的篩選

我們增加一個查詢按鈕，鼠標單擊查詢按鈕時，我們按條件增加交互。

第一種情況是，如果時間值1和時間值2的值都不為空，就是都有選時間，并且時間值1小于時間值2，我們就用是篩選的交互，對中繼器表格時間列，案例里是第6列進行篩選，這里我們同樣要用date.prase函數對第六列的時間值處理，轉為標準數字格式，再和時間值1和2比較，這里條件是要大于等于時間1，并且小于時間值2。

第2種情況是，如果時間值1和時間值2的值都不為空，就是都有選時間，并且時間值1大于等于時間值2（這里就是時間值1去到右邊變成結束時間了），我們就用是篩選的交互，對中繼器表格時間列，案例里是第6列進行篩選，這里我們同樣要用date.prase函數對第六列的時間值處理，轉為標準數字格式，再和時間值1和2比較，這里條件是要大于等于時間2，并且小于時間值1。

第3種情況是，如果時間值1和時間值2的值都為空，就是都沒有選時間，我們就用移除篩選的交互，將篩選移除即可。

第4種情況是，如果時間值1為空，時間值2不為空，并且時間值1在時間值2的左側，就是只選擇了結束時間。我們就用是篩選的交互，對中繼器表格時間列，案例里是第6列進行篩選，這里我們同樣要用date.prase函數對第六列的時間值處理，轉為標準數字格式，再和時間2比較，這里條件是小于時間值2。

第5種情況是，如果時間值1為空，時間值2不為空，并且時間值1在時間值2的右側，就是只選擇了結束時間，但是結束時間是在右側。我們就用是篩選的交互，對中繼器表格時間列，案例里是第6列進行篩選，這里我們同樣要用date.prase函數對第六列的時間值處理，轉為標準數字格式，再和時間1比較，這里條件是小于時間值1。

第6種情況是，如果時間值2為空，時間值1不為空，并且時間值1在時間值2的左側，就是只選擇了開始時間。我們就用是篩選的交互，對中繼器表格時間列，案例里是第6列進行篩選，這里我們同樣要用date.prase函數對第六列的時間值處理，轉為標準數字格式，再和時間1比較，這里條件是大于等于時間值1。

最后一種情況是，如果時間值2為空，時間值1不為空，并且時間值1在時間值2的右側，就是只選擇了結束時間，但結束時間是時間值1記錄的。我們就用是篩選的交互，對中繼器表格時間列，案例里是第6列進行篩選，這里我們同樣要用date.prase函數對第六列的時間值處理，轉為標準數字格式，再和時間1比較，這里條件是小于等于時間值1。

這樣我們就完成了調用瀏覽器日期選擇器并篩選中繼器表格原型模板的制作了，后續使用也很方便，只需要在中繼器表格里填寫對應的數據，即可自動生成日期區間篩選的交互效果。

那以上就是本期教程的全部內容，感興趣的同學們可以動手試試哦，感謝您的閱讀，我們下期見。

本文由 @AI產品人原創發布于人人都是產品經理，未經許可，禁止轉載

題圖來自 Unsplash，基于 CC0 協議

該文觀點僅代表作者本人，人人都是產品經理平臺僅提供信息存儲空間服務。

網頁開發中，跟蹤用戶與多媒體內容（如視頻）的互動是一項常見需求。無論是教育平臺、數據分析，還是用戶參與度統計，監控用戶如何觀看視頻內容都能提供寶貴的見解。這篇文章將探索如何使用JavaScript實現視頻播放時長的跟蹤。

目標

我們的目標是跟蹤用戶觀看視頻的總時長，包括暫停的時間，并將這些信息更新到后臺系統。我們將通過捕獲播放、暫停和結束等事件來計算觀看時間。

實現步驟

讓我們來分解一下實現的關鍵方面：

1. HTML結構

我們將使用HTML5的<video>標簽將視頻嵌入到網頁中。每個視頻元素都將有一個唯一的標識符，以便在JavaScript中輕松訪問。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>視頻播放時長跟蹤</title>
  </head>
  <body>
    <!-- 視頻容器 -->
    <video id="video_content1" width="640" height="360" controls>
      <!-- 視頻源 -->
      <source src="your_video_source.mp4" type="video/mp4" />
    </video>

    <!-- 包含JavaScript代碼 -->
    <script src="your_script.js"></script>
  </body>
</html>

2. JavaScript實現

在JavaScript文件（your_script.js）中，我們將處理視頻事件并計算總的觀看時間。

// 獲取視頻元素
let videoMat = "your_video_source.mp4";
let source = document.createElement('source');
let video = document.getElementById('video_content1');

// 設置視頻源
source.src = videoMat;
source.type = 'video/mp4';

// 將源附加到視頻元素
if (video) {
  video.appendChild(source);

  // 初始化變量
  let startTime = null;
  let lastUpdateTime = null;
  let totalElapsedTime = 0;

  // 'play'事件監聽器
  video.addEventListener('play', function () {
    startTime = new Date();
    lastUpdateTime = startTime;
    console.log('視頻正在播放。開始時間:', startTime);
  });

  // 'timeupdate'事件監聽器
  video.addEventListener('timeupdate', function () {
    if (!video.paused && startTime !== null) {
      const currentTime = new Date();
      const elapsedSinceLastUpdate = (currentTime - lastUpdateTime) / 1000;
      totalElapsedTime += elapsedSinceLastUpdate;
      lastUpdateTime = currentTime;
      console.log("從開始到現在的觀看時間: " + totalElapsedTime + " 秒");
    }
  });

  // 'pause'事件監聽器
  video.addEventListener('pause', function () {
    // 僅當視頻已在播放時存儲暫停時間
    if (startTime !== null) {
      const pausedTime = video.currentTime;
      console.log('視頻已暫停。暫停時刻:', pausedTime);
      checkAndUpdateItem(totalElapsedTime, 1, 'your_video_title');
    }
  });

  // 'ended'事件監聽器
  video.addEventListener('ended', function () {
    // 視頻播放已結束
    checkAndUpdateItem(totalElapsedTime, 1, 'your_video_title');
  });

  // 'play'事件監聽器（從暫停時間繼續播放）
  video.addEventListener('play', function () {
    // 如果視頻之前暫停，繼續從暫停時刻播放
    if (startTime !== null) {
      video.currentTime = video.currentTime;
    }
  });
}

解釋

HTML結構：我們使用<video>標簽嵌入視頻，并提供一個唯一標識符（video_content1）以便在JavaScript中訪問。我們在body末尾包含JavaScript文件，以確保DOM加載完成后再運行腳本。
JavaScript實現：

我們動態設置視頻源。
設置了播放、時間更新、暫停和結束事件的監聽器。
在‘play’事件中，我們捕獲開始時間和最后更新時間。
在‘timeupdate’事件中，我們不斷計算自上次更新以來的觀看時間。
視頻暫停時，我們存儲暫停時間并更新后臺。
‘ended’事件表示視頻播放結束。

結論

實現視頻播放時長的跟蹤可以增強用戶分析，提供有關用戶參與度和內容受歡迎程度的見解。這里提供的JavaScript代碼為您集成視頻跟蹤到網頁應用中提供了基礎。

記得將‘your_video_source.mp4’和‘your_video_title’替換為實際的視頻源和標題。

祝您編碼愉快！

在線咨詢

上一篇：這里歸納總結全了：前端開發必須掌握的DOM對象操作
下一篇：AJAX教程

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商