Axure高保真教程：调用日期选择器并筛选中继器表格

文就如何在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 协议

该文观点仅代表作者本人，人人都是产品经理平台仅提供信息存储空间服务。

:键盘事件:

keydown 事件会在按键在元素上按下时触发

keyup 事件会在按键在元素上松开时触发

键盘事件只能绑定给可以获取焦点的元素

事件对象中key属性，表示当前所按的按键

keyCode返回的是按键的编号（不区分大小写和换挡）

类似于ctrl alt shift这种功能按键，在事件对象中都有专门判断属性

ctrlKey 用来判断ctrl是否被按下，按下返回true，否则返回false

altKey 用来判断alt是否按下

shiftKey 用来判断shift是否按下

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Title</title>

<style>

#box1{

width: 200px;

height: 200px;

background-color: #ff0;

}

</style>

<script>

window.onload = function () {

var inp = document.querySelector('[type=text]');

/*

keydown 事件 会在按键在元素上按下时触发

*/

// inp.addEventListener('keydown',function () {

// console.log('按键按下了~~');

// });

/*

keyup 事件 会在按键在元素上松开时触发

*/

// inp.addEventListener('keyup',function () {

// console.log('按键松开了~~');

// });

/*

键盘事件只能绑定给可以获取焦点的元素

*/

// document.getElementById('box1').addEventListener('keydown',function () {

// console.log('哈哈哈~~~');

// });

// document.querySelector('a').addEventListener('keydown',function () {

// console.log('按键按下了~~');

// });

document.addEventListener('keydown',function (ev) {

/*

事件对象中key属性，表示当前所按的按键

keyCode返回的是按键的编号（不区分大小写和换挡）

*/

// if(ev.key.toLowerCase() === 'k'){

// alert('你按了k了！');

// }

/*

判断用户的ctrl和k是否同时被按下

*/

// if(ev.key === 'Control' && ev.key.toLowerCase() === 'k') {

// alert('你的ctrl和k被同时按下了~~~');

// }

/*

类似于ctrl alt shift这种功能按键，在事件对象中都有专门判断属性

ctrlKey 用来判断ctrl是否被按下，按下返回true，否则返回false

altKey 用来判断alt是否按下

shiftKey 用来判断shift是否按下

*/

// if(ev.ctrlKey && ev.key.toLowerCase() === 'k') {

// alert('你的ctrl和k被同时按下了~~~');

// }

alert(ev.key);

});

};

</script>

</head>

<body>

<input type="text">

<a href="javascript：;">超链接</a>

<!--<div id="box1"></div>-->

</body>

</html>

2键盘控制div移动练习:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Title</title>

<style>

#box1{

width: 100px;

height: 100px;

background-color: #f00;

position: absolute;

}

</style>

<script>

/*

通过键盘来控制div的移动

*/

window.onload = function () {

// 获取box1

var box1 = document.getElementById('box1');

// 为document绑定一个keydown事件

document.addEventListener('keydown',function (ev) {

// 判断按键的方向

dir = ev.key;

});

document.addEventListener('keyup',function (ev) {

// 判断按下的键和松开的键是不是同一个

if(dir === ev.key){

// 按键松开，重置dir

dir = '';

}

});

// 创建一个变量，用来记录运动的方向

var dir = '';

// 创建一个定时器，来控制元素的移动

setInterval(function () {

switch (dir) {

case 'ArrowUp':

case 'Up':

//向上移动

box1.style.top = box1.offsetTop - 10 + 'px';

break;

case 'ArrowDown':

case 'Down':

// 向下移动

box1.style.top = box1.offsetTop + 10 + 'px';

break;

case 'ArrowLeft':

case 'Left':

// 向左移动

box1.style.left = box1.offsetLeft - 10 + 'px'

break;

case 'ArrowRight':

case 'Right':

// 向右移动

box1.style.left = box1.offsetLeft + 10 + 'px'

break;

}

},30)

};

/* input.addEventListener('keydown', function (ev) {

// 限制在input中只能输出数字

// console.log(typeof ev.key);

// ev.key 是数字就让你输入，如果不是就禁止输入

// 取消keydown的默认行为

if(/\D/.test(ev.key)){ //用正则限制

ev.preventDefault();

}

});*/

</script>

</head>

<body>

<div id="box1"></div>

</body>

</html>

3定时器:

setTimeout() 用来设置函数在一定时间后执行

参数：

第一个要执行的函数

第二个间隔的时间（毫秒）

setTimeout(test, 3000);

clearTimeout() 用来关闭setTimeout()所设置的定时器

setInterval()

- 可以用来设置让一个函数反复的执行

- 参数：

1.要执行的函数

2.每次执行的间隔时间

- setInterval() 调用时，它会返回一个唯一的id作为参数，

这个id是定时器的唯一标识，可以通过标识来关闭定时器

clearInterval() 用来关闭定时器

clearInterval(timer);

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Title</title>

<script>

function test() {

console.log('hello');

}

// test();

// 通过定时器可以设置函数在一定时候才执行

// setTimeout() 用来设置函数在一定时间后执行

// 参数：

// 第一个 要执行的函数

// 第二个 间隔的时间（毫秒）

// setTimeout(test, 3000);

//clearTimeout() 用来关闭setTimeout()所设置的定时器

/*

setInterval()

- 可以用来设置让一个函数反复的执行

- 参数：

1.要执行的函数

2.每次执行的间隔时间

- setInterval() 调用时，它会返回一个唯一的id作为参数，

这个id是定时器的唯一标识，可以通过标识来关闭定时器

*/

var timer = setInterval(test, 3000);

setTimeout(function () {

clearInterval(timer);

},10000)

// clearInterval() 用来关闭定时器

// clearInterval(timer);

</script>

</head>

<body>

</body>

</html>

4.定时器的setTimeout()做循环使用:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Title</title>

<script>

// window.addEventListener('keydown',function () {

// alert(123);

// });

window.onload = function () {

var head = document.getElementById('head');

var num = 0;

// 创建一个定时器，来定时修改h1中的文字

setTimeout(function fn() {

num++;

head.innerHTML = num;

setTimeout(fn, 10*num);

},10);

};

</script>

</head>

<body>

<h1 id="head">0</h1>

</body>

</html>

对比requestAnimationFrame和setInterval :

requestAnimationFrame 和 setInterval 主要有以下几点区别:

1. 执行频率不同:

- requestAnimationFrame 依赖显示器的刷新频率,通常为 60Hz,对于大多数显示器每秒执行60次。

- setInterval 的执行间隔是固定的,并不依赖刷新频率,间隔时间可能高于显示器刷新频率。

2. 执行时机不同:

- requestAnimationFrame 在浏览器下一次重绘之前执行。

- setInterval 在定时器到期后尽快执行,可能导致丢帧。

3. 性能不同:

- requestAnimationFrame 不会引起多次重绘,性能更好。

- setInterval 可能引起多次重绘,性能较差,特别是间隔时间过短的情况。

4. 节流不同:

- requestAnimationFrame 自带节流功能,一般不会引起性能问题。

- setInterval 可能需要手动实现节流逻辑来避免频繁触发。

requestAnimationFrame是一个用于设置动画的API,它可以配合更新 DOM 的操作,保持最优的渲染性能。

**功能:**

- 告诉浏览器你希望执行一个动画,并请求浏览器在下次重绘之前调用指定的回调函数更新动画。

- 会把每一帧中的所有DOM操作集中起来,在一次重绘或回流中就完成,并且重绘之前不会引起任何触发重绘的操作。

**js用法:**

把需要重复更新的动画代码放入函数,然后传入requestAnimationFrame创建一个递归循环。

**优点:**

- 和浏览器刷新频率保持同步,有效避免丢帧问题。

- 多个动画或DOM操作会被合并,减少重绘次数,提升性能。

- 自带节流功能,防止频繁触发重绘和回流。

所以requestAnimationFrame是构建复杂或高性能动画的好选择。（已编辑）

欢迎关注我的原创文章：小伙伴们！我是一名热衷于前端开发的作者，致力于分享我的知识和经验，帮助其他学习前端的小伙伴们。在我的文章中，你将会找到大量关于前端开发的精彩内容。

学习前端技术是现代互联网时代中非常重要的一项技能。无论你是想成为一名专业的前端工程师，还是仅仅对前端开发感兴趣，我的文章将能为你提供宝贵的指导和知识。

在我的文章中，你将会学到如何使用HTML、CSS和JavaScript创建精美的网页。我将深入讲解每个语言的基础知识，并提供一些实用技巧和最佳实践。无论你是初学者还是有一定经验的开发者，我的文章都能够满足你的学习需求。

此外，我还会分享一些关于前端开发的最新动态和行业趋势。互联网技术在不断发展，新的框架和工具层出不穷。通过我的文章，你将会了解到最新的前端技术趋势，并了解如何应对这些变化。

我深知学习前端不易，因此我将尽力以简洁明了的方式解释复杂的概念，并提供一些易于理解的实例和案例。我希望我的文章能够帮助你更快地理解前端开发，并提升你的技能。

如果你想了解更多关于前端开发的内容，不妨关注我的原创文章。我会不定期更新，为你带来最新的前端技术和知识。感谢你的关注和支持，我们一起探讨交流技术共同进步，期待与你一同探索前端开发的奇妙世界！

#2023年度创作挑战#

avaScript的事件循环机制可以比喻为一家咖啡店的工作流程。在这家咖啡店里，有一个咖啡师（Event Loop）和一些顾客（事件）等待着被服务。

1. 注文：顾客进入咖啡店，点了一杯咖啡，然后咖啡师收到订单。这个过程就像 JavaScript 中的事件触发（例如，点击按钮或定时器触发事件）。

2. 制作：咖啡师开始制作咖啡，这可能需要一些时间，但咖啡师会忙于制作咖啡，不会停下来。这就类似于 JavaScript 中的事件处理函数，它们可能需要执行一些耗时操作。

3. 完成：一旦咖啡制作完成，咖啡师会将咖啡递给顾客。这就像 JavaScript 中的事件处理函数执行完毕，它们将结果返回给代码，然后可以继续执行下一个事件。

4. 排队：如果有多个顾客等待咖啡，他们会排队等待，咖啡师会依次为每个人制作咖啡，直到所有顾客都得到了咖啡。这类似于 JavaScript 中的事件队列，事件会按照它们触发的顺序排队等待处理。

5. 优先级：有时候，一些顾客可能会有紧急需求，例如，某人点了一杯特别重要的咖啡，咖啡师可以根据优先级选择制作哪一杯咖啡。在 JavaScript 中，可以使用异步操作和回调函数来处理具有不同优先级的事件。

总之，JavaScript的事件循环机制就像一家咖啡店，它能够按照一定的顺序处理事件，并且能够在处理事件时保持响应性，确保不会因为一个事件的处理而阻塞其他事件的执行。这种机制使得JavaScript适合处理各种异步任务，例如网络请求、定时器、事件处理等。

在线咨询

上一篇：「平面设计教学」Photoshop基本教学-第14章网页切片与输出
下一篇：深色主题的魅力和好处，你知道吗？快来试试Dark Reader插件吧！

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商