整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
文就如何在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
首先我們要新建一個矩形并命名（案例中命名為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不能和第一個一致，我們需要修改一下，不然就會沖突了。
出現日期選擇器后，如果選擇了日期，我們需要將里面的日期值保存的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的原生交互。
第二個日期選擇器也是同樣方式處理，主要名稱不能一樣，基本就是復制粘貼，改個名就可以了。
接下來我們在增加一個文本標簽，命名為時間值1，默認隱藏，只用于事件的比較。
我們用設置文本的交互，將全局變量里記錄的事件值設置時間值1的文本里。獲取到的事件格式是yyyy-mm-dd，但是axure里要比較時間大小需要用date.parse函數，這個函數需要的日期格式為yyyy/mm/dd。
所以在設置文本的時候，我們可以用replace函數將-符號替換成/
然后我們在用date.parse，這個函數可以計算指定時間和1970年1月1日00:00:00之間相差的毫秒數，相當于將日期格式的字符轉為純數字的格式，這樣通過比較數字的大小就可以比較時間了。
第二個日期選擇器也是同樣方式處理，復制粘貼，改個名就可以了。
將兩個時間轉為數值之后，我們考慮到，會不會有人選擇開始時間大于結束時間，例如選擇開始時間為2023年8月30日，再選擇結束事件為2023年8月1日，實際上他是想選擇2023年8月1日至2023年8月30日的區間，所以我們寫個交互將他自動調整過來。
我們用幾個文本標簽先記錄兩個時間矩形初始的x，y坐標值，如果會發生變化，我們在在載入時用設置文本的交互，設置對應的坐標值。
第二個日期選擇器也是同樣方式處理。
選擇時間之后根據條件來判斷，如果時間值1大于二，就用移動的交互，將日期選擇器1移動到記錄x1y1的坐標，將日期選擇器2移動到記錄x2y2的坐標值里。
否則，就將日期選擇器1移動到記錄x2y2的坐標，將日期選擇器2移動到記錄x1y1的坐標值里。
這樣就可以自動換位了。
中繼器里有幾列我們就增加幾個矩形，案例中分別命名為表1~6，以及操作列。
在中繼器表格里增加對應的列，并填寫好內容。
如果是axure10的話，用鏈接的交互，將對應列連接到對應元件就可以了，如果是axure89的話，在中繼器每項加載時就要用設置文本的交互，將表格對應列的值設置到對應元件上。
然后在中繼器外面用矩形制作表頭，每個矩形和中繼器里對應列的矩形寬度一樣。
這樣表格就出來了。
我們增加一個查詢按鈕，鼠標單擊查詢按鈕時，我們按條件增加交互。
第一種情況是，如果時間值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><!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>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><!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 主要有以下幾點區別:
1. 執行頻率不同:
- requestAnimationFrame 依賴顯示器的刷新頻率,通常為 60Hz,對于大多數顯示器每秒執行60次。
- setInterval 的執行間隔是固定的,并不依賴刷新頻率,間隔時間可能高于顯示器刷新頻率。
2. 執行時機不同:
- requestAnimationFrame 在瀏覽器下一次重繪之前執行。
- setInterval 在定時器到期后盡快執行,可能導致丟幀。
3. 性能不同:
- requestAnimationFrame 不會引起多次重繪,性能更好。
- setInterval 可能引起多次重繪,性能較差,特別是間隔時間過短的情況。
4. 節流不同:
- requestAnimationFrame 自帶節流功能,一般不會引起性能問題。
- setInterval 可能需要手動實現節流邏輯來避免頻繁觸發。
requestAnimationFrame是一個用于設置動畫的API,它可以配合更新 DOM 的操作,保持最優的渲染性能。
**功能:**
- 告訴瀏覽器你希望執行一個動畫,并請求瀏覽器在下次重繪之前調用指定的回調函數更新動畫。
- 會把每一幀中的所有DOM操作集中起來,在一次重繪或回流中就完成,并且重繪之前不會引起任何觸發重繪的操作。
**js用法:**
function checkElapsedTime() {
var currentTime = new Date();
var elapsedTime = currentTime - startTime;// 如果已經過了2小時（2*60*60*1000毫秒）
if (elapsedTime >= 2 * 60 * 60 * 1000) {
// 彈窗提示
alert("已經加載2小時了！");
} else {
// 未達到2小時，繼續檢查
requestAnimationFrame(checkElapsedTime);
}
}
把需要重復更新的動畫代碼放入函數,然后傳入requestAnimationFrame創建一個遞歸循環。
**優點:**
- 和瀏覽器刷新頻率保持同步,有效避免丟幀問題。
- 多個動畫或DOM操作會被合并,減少重繪次數,提升性能。
- 自帶節流功能,防止頻繁觸發重繪和回流。
所以requestAnimationFrame是構建復雜或高性能動畫的好選擇。 （已編輯）
歡迎關注我的原創文章：小伙伴們！我是一名熱衷于前端開發的作者，致力于分享我的知識和經驗，幫助其他學習前端的小伙伴們。在我的文章中，你將會找到大量關于前端開發的精彩內容。
學習前端技術是現代互聯網時代中非常重要的一項技能。無論你是想成為一名專業的前端工程師，還是僅僅對前端開發感興趣，我的文章將能為你提供寶貴的指導和知識。
在我的文章中，你將會學到如何使用HTML、CSS和JavaScript創建精美的網頁。我將深入講解每個語言的基礎知識，并提供一些實用技巧和最佳實踐。無論你是初學者還是有一定經驗的開發者，我的文章都能夠滿足你的學習需求。
此外，我還會分享一些關于前端開發的最新動態和行業趨勢。互聯網技術在不斷發展，新的框架和工具層出不窮。通過我的文章，你將會了解到最新的前端技術趨勢，并了解如何應對這些變化。
我深知學習前端不易，因此我將盡力以簡潔明了的方式解釋復雜的概念，并提供一些易于理解的實例和案例。我希望我的文章能夠幫助你更快地理解前端開發，并提升你的技能。
如果你想了解更多關于前端開發的內容，不妨關注我的原創文章。我會不定期更新，為你帶來最新的前端技術和知識。感謝你的關注和支持，我們一起探討交流技術共同進步，期待與你一同探索前端開發的奇妙世界！
#2023年度創作挑戰#
avaScript的事件循環機制可以比喻為一家咖啡店的工作流程。在這家咖啡店里，有一個咖啡師（Event Loop）和一些顧客（事件）等待著被服務。
1. 注文：顧客進入咖啡店，點了一杯咖啡，然后咖啡師收到訂單。這個過程就像 JavaScript 中的事件觸發（例如，點擊按鈕或定時器觸發事件）。
2. 制作：咖啡師開始制作咖啡，這可能需要一些時間，但咖啡師會忙于制作咖啡，不會停下來。這就類似于 JavaScript 中的事件處理函數，它們可能需要執行一些耗時操作。
3. 完成：一旦咖啡制作完成，咖啡師會將咖啡遞給顧客。這就像 JavaScript 中的事件處理函數執行完畢，它們將結果返回給代碼，然后可以繼續執行下一個事件。
4. 排隊：如果有多個顧客等待咖啡，他們會排隊等待，咖啡師會依次為每個人制作咖啡，直到所有顧客都得到了咖啡。這類似于 JavaScript 中的事件隊列，事件會按照它們觸發的順序排隊等待處理。
5. 優先級：有時候，一些顧客可能會有緊急需求，例如，某人點了一杯特別重要的咖啡，咖啡師可以根據優先級選擇制作哪一杯咖啡。在 JavaScript 中，可以使用異步操作和回調函數來處理具有不同優先級的事件。
總之，JavaScript的事件循環機制就像一家咖啡店，它能夠按照一定的順序處理事件，并且能夠在處理事件時保持響應性，確保不會因為一個事件的處理而阻塞其他事件的執行。這種機制使得JavaScript適合處理各種異步任務，例如網絡請求、定時器、事件處理等。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
