络编程之时间格式。

同学们好，今天我们分享的是如何让搜索引擎等程序更容易地提取网页中的时间信息。我们将使用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;
    }
  });
}

解释

1. HTML结构：我们使用<video>标签嵌入视频，并提供一个唯一标识符（video_content1）以便在JavaScript中访问。我们在body末尾包含JavaScript文件，以确保DOM加载完成后再运行脚本。
2. JavaScript实现：

• 我们动态设置视频源。
• 设置了播放、时间更新、暂停和结束事件的监听器。
• 在‘play’事件中，我们捕获开始时间和最后更新时间。
• 在‘timeupdate’事件中，我们不断计算自上次更新以来的观看时间。
• 视频暂停时，我们存储暂停时间并更新后台。
• ‘ended’事件表示视频播放结束。

结论

实现视频播放时长的跟踪可以增强用户分析，提供有关用户参与度和内容受欢迎程度的见解。这里提供的JavaScript代码为您集成视频跟踪到网页应用中提供了基础。

记得将‘your_video_source.mp4’和‘your_video_title’替换为实际的视频源和标题。

祝您编码愉快！