Axure教程:如何使用時間函數動態顯示當前時間?

2020-12-13 人人都是產品經理

本文教大家如何在Axure中,如何使用時間函數動態顯示當前時間,enjoy~

首先Axure提供了很多時間函數,如下:

Now用途:獲取當前計算機系統日期對象。獲取的值示例:Sat Aug 31 2019 23:15:29 GMT+0800 (中國標準時間)GenDate用途:獲取原型生成日期對象。獲取的值示例:Sat Aug 31 2019 23:15:29 GMT+0800 (中國標準時間)getDate 用途:獲取日期對象「日期」部分數值(1 ~ 31)。getDay 用途:獲取日期對象「星期」部分的數值(0 ~ 6)。getDayOfWeek 用途:獲取日期對象「星期」部分的英文名稱。getFullYear 用途:獲取日期對象「年份」部分四位數值。getHours 用途:獲取日期對象「小時」部分數值(0 ~ 23)。getMilliseconds 用途:獲取日期對象的毫秒數(0 ~ 999)。getMinutes 用途:獲取日期對象「分鐘」部分數值(0 ~59)。getMonth 用途:獲取日期對象「月份」部分的數值(1 ~ 12)。getMonthName 用途:獲取日期對象「月份」部分的英文名稱。getSeconds 用途:獲取日期對象「秒數」部分數值(0 ~59)。getTime 用途:獲取當前日期對象中的時間值。該時間值表示從1970年1月1日00:00:00開始,到當前日期對象時,所經過的毫秒數,以格林威治時間為準。getTimezoneOffset 用途:獲取世界標準時間(UTC)與當前主機時間之間的分鐘差值。getUTCDate 用途:使用世界標準時間獲取當前日期對象「日期」部分數值(1 ~ 31)。getUTCDay 用途:使用世界標準時間獲取當前日期對象「星期」部分的數值(0 ~ 6)。getUTCFullYear 用途:使用世界標準時間獲取當前日期對象「年份」部分四位數值。getUTCHours 用途:使用世界標準時間獲取當前日期對象「小時」部分數值(0 ~ 23)getUTCMilliseconds 用途:使用世界標準時間獲取當前日期對象的毫秒數(0 ~ 999)。getUTCMinutes 用途:使用世界標準時間獲取當前日期對象「分鐘」部分數值(0 ~59)。getUTCMonth 用途:使用世界標準時間獲取當前日期對象「月份」部分的數值(1 ~ 12)。getUTCSeconds 用途:使用世界標準時間獲取當前日期對象「秒數」部分數值(0 ~59)。Date.parse(datestring) 用途:用於分析一個包含日期的字符串,並返回該日期與1970年1月1日00:00:00之間相差的毫秒數 參數:datestring為日期格式的字符串,格式為:yyyy/mm/dd hh:mm:ss。toDateString 用途:以字符串的形式獲取一個日期。toISOString 用途:獲取當前日期對象的IOS格式的日期字串,格式:YYYY-MM-DDTHH:mm:ss.sssZ。toJSON 用途:獲取當前日期對象的JSON格式的日期字串,格式: YYYY-MM-DDTHH:mm:ss.sssZ。toLocaleDateString 用途:以字符串的形式獲取本地化當前日期對象。並且只包含「年月日」部分的短日期信息。toLocaleTimeString 用途:以字符串的形式獲取本地化當前日期對象。並且只包含「時分秒」部分的短日期信息。toUTCString 用途:以字符串的形式獲取相對於當前日期對象的世界標準時間。通過上面的說明可知,假若我們需要顯示 格式為 『2019-08-31 23:54:01』的時間,無法直接通過函數獲取,必須將年月日時分秒分別獲取,然後拼接顯示。

第一步:獲取當前時間

我們將用到以下幾個函數分別獲取年月日時分秒:

Now.getFullYear:獲取年Now.getMonth:獲取月Now.getDate:獲取日Now.getHours:獲取小時Now.getMinutes:獲取分鐘Now.getSeconds:獲取秒通過試驗我們發現,獲取到的時間,若不足兩位數,系統不會對前面補0,因此我們不能直接使用獲取到的值,首先需對獲取的值進行處理。

(1)創建全局變量以便對獲取的值進行處理

(2)在賦值之前對所獲取到的值進行處理(除年外,其他的,若當前時間不足兩位小數,需進行補0處理),處理好之後,賦值給對應的全局變量。

(3)將全局變量的值,賦值給對應的元素

第二步:通過動態面板的改變,使時間動起來

發現通過上面的方式,時間值只會在加載的時候獲取一次,若想要時間走起來,我們可通過動態面板的改變進行實現。

(1)將「時間」轉為動態面板,並將動態面板中的狀態1進行複製。

(2)當頁面加載時,使動態面板向後循環,循環間隔為1s。(當第一個狀態獲取完當前時間後,隔1s後,第二個狀態獲取當前時間,如此循環,即可實現時間自動增加)

(3)給動態面板增加事件,當動態面板改變時,按照第一步的方式,對動態面板中,每個狀態下的「時間」賦值為當前時間。

(4)由於此次賦值與之前對動態面板中內容的賦值重複,將之前的刪除即可。

最後

最終實現的結果如下:

本文由 @冬瓜一號 原創發布於人人都是產品經理。未經許可,禁止轉載

題圖來自 Pixabay,基於 CC0 協議

相關焦點

  • 【視頻教學】遊戲策劃視頻教學第三講:Axure如何設計UI
    佔位符  製作原型時,可以用它來代替對一些沒有交互或者交互比較簡單容易說明的區域;也可以做成關閉按鈕。佔位符在保真比較高的產品原型中作用不大。  圓角矩形  這個個人認為是因為圓角矩形應用廣泛,所以單獨拿出來作為元件給使用者,免去了對矩形的設置。
  • Axure教程:如何實現頂部tab式導航欄?
    如何實現頂部tab式導航欄?來文中看看~實現的效果:點擊tab,切換對應的內容頁面,指示標識移動到對應選中tab。2)設置X、Y的位置先了解一下以下即將用到的函數的含義(以下函數解釋內容來自axure非官方中文網:https://www.axure.com.cn/5068/)This :獲取當前元件對象。
  • Axure教程:轉盤抽獎交互原型
    本文跟大家分享,如何使用axure製作轉盤抽獎交互原型,不帶登錄流程。效果如下:抽獎流程一、主要內容(1)主要元件:動態面板(2)重點:旋轉交互、隨機函數、觸發動作。禁用當前元件[開始抽獎]:避免重複單擊按鈕,影響次數文本遞減、以及轉盤重複旋轉。等待10010毫秒:為了能在旋轉結束以後,再出抽獎結果。所以這個時間可以等於或稍大一點旋轉的時間。顯示獎品(jiangpin)動態面板:將隱藏的獎品(jiangpin)動態面板顯示出來。
  • excel怎麼插入當前時間 Excel插入時間並自動更新圖文教程
    excel怎麼插入當前時間 Excel插入時間並自動更新圖文教程時間:2018-04-18 10:19   來源:系統天堂   責任編輯:沫朵 川北在線核心提示:原標題:excel怎麼插入當前時間 Excel插入時間並自動更新圖文教程 excel怎麼插入當前時間?
  • Axure高階教程:利用JavaScript製作實時天氣顯示APP
    原理這個實例中主要用到了Axure的以下幾個功能:(1)中繼器由於『昨天』、『今天』、『明天』的天氣概要布局相同,可以使用中繼器更加規範顯示。那麼Axure是如何實現調用api的呢?我們先設定一個全局變量『tianqi』,當點擊刷新按鈕時,先設置全局變量值為空,再通過『打開連結』功能插入Javascript腳本,參數選擇「連結外部網址」,「打開當前窗口」調用api並賦值給全局變量。
  • Axure教程:登錄滑動拼圖驗證交互教學
    下面為今日頭條的滑動拼圖驗證,接下來將為大家講解:一、界面元件搭建(教程為axure 8)首先,需要下面這些元件。熱區1和熱區2是用來校驗小圖的位置是否正確,作為左右的重合區間。所有元件的初始位置如下:二、交互事件實現(1)選中動態面板【滑塊】,添加【拖動時】交互事件,勾選【當前元件】,設置為:水平移動,添加左右邊界。
  • Axure函數使用手冊
    Width]] 當前元件的寬度二、 函數分類根據Axure函數的應用範圍,可劃分為以下10類:元件函數、頁面函數、窗口函數、滑鼠指針函數、數字函數、字符串函數、數學函數、日期函數、中繼器函數和布爾運算符(邏輯運算)。三、函數使用說明3.1 元件函數This:獲取當前元件對象,當前元件指添加事件的元件。
  • 如何巧用TEXT函數讓日期時間函數的使用變得更加靈活
    在日常工作中,我們處理Excel電子表格時,經常會使用到日期時間函數,比如計算年齡和工齡亦或者顯示當前數據錄入的時間等等,那麼這時就會用到日期時間函數,但是單純使用日期時間函數又不能完全滿足我們的要求,因此使用TEXT函數就能使得日期時間函數變得更加靈活。
  • Axure教程:banner輪播最簡單的實現方法
    前段時間做一個開放平臺的原型,大家討論完需求就希望,快點出原型(第二天),而且要求「高保真」。於是在「快速」「高保真」的要求下,自己對於所有的頁面交互都要求是,對需要使用原型的用戶(產品、研發、測試)而言,達到對應的效果,而自己在實現時採用最簡單的方法。正巧今天看到網站上有教程教如何做一個輪播banner ,點開略看了一下,教程做的很複雜。其實使用axure做交互一般都比較簡單,但由於其各種小窗口太多了,各種截圖放一起,看上去很容易亂。
  • Axure 3D教程:製作3D地圖原型(三維世界地圖)
    編輯導語:很多時候我們會用到3D的效果,今天筆者教大家用axure做一個3D的效果,本文以三維世界地圖為案例,簡單的闡述axure製作3D原型的技巧,我們一起來看一下。
  • Axure教程:左側導航如何自適應瀏覽器窗口高度?
    導讀:自適應瀏覽器窗口高度的意思是,瀏覽器寬度、高度不同時,就顯示條件匹配的視圖頁面內容。本文作者分享了用Axure實現左側導航自適應瀏覽器窗口高度的實用方法,希望對大家有所幫助。上一篇Axure教程《Axure教程:導航欄如何自適應瀏覽器窗口寬度?》,小默教給了大家頂部導航如何實現100%寬度,那麼就會有同學要問了,橫嚮導航能100%,那縱嚮導航也能100%嗎?這個問題問得很有深度,這一節就給大家講解一下左側導航欄怎樣實現100%高度的技巧。閒話少說,且看下文。
  • 返回當前的年月日時間,就用這4個函數
    返回當前的日期和時間、進行日期格式轉換、填寫制表時間。就用日期時間函數。1.使用NOW函數返回當前日期和時間的序列號NO函數用於返回當前日期和時間的序列號。例如,需要在工作表中填寫當前日期和時間,具體操作方法如下。在工作表中選擇存放結果的單元格B19,輸入函數「=NOW()」,按下【Enter】鍵,即可顯示當前日期和時間,如下圖所示。
  • 「Excel技巧」Excel快速輸入當前日期時間的快捷法及函數法
    常年接觸excel,肯定會跟日期時間打交道。掌握一些關於日期和時間的輸入方法和技巧,可以幫助你快速完成工作。現在就來看看關於日期時間的輸入技巧及函數輸入法。一、快速獲取當前日期時間1、返回當前日期和時間函數法:在目標單元格裡輸入公式:=now()。
  • EXCEL日期和時間函數的使用方法
    使用 NOW 函數返回當前日期,然後使用 TEXT 函數將當前日期設為"月-日"格式。再使用 10月 1日減去當前日期,然後使用TEXT函數將差值設置為數字格式,即日期序列號。最後加 1即可得到當前日期距離 10月 1日的天數。
  • Axure高級教程:如何從外部獲取Axure中繼器裡的數據
    我們知道中繼器在Axure中實現數據動態展現的作用不言而喻,Axure提供了中繼器內部的數據交換接口,但是沒有提供明顯的從外部獲取中繼器內部數據的方法。當你需要從外部獲取中繼器裡的數據的時候就尷尬了,你將無法直接通過自帶的函數獲取到相應數據。所以接下來我們看看如何從外部去獲取中繼器裡的數據。
  • 有趣的Axure案例:打地鼠遊戲的設計
    為了實現木槌的敲擊需要將木槌設置為動態面板,狀態1和狀態2分別為木槌的正常位置以及敲擊後的位置。cursor.x為獲取當前滑鼠所在位置的x坐標,cursor.y為獲取當前滑鼠所在位置的y坐標。4.設置全局變量
  • Excel技能提升,有關幾個日期時間函數的使用
    我們在實際工作中,當我們使用Excel製作表格的時候,我們經常會使用到很多日期或者時間,假如手動一個個輸入,就太耗費時間和精力,我們就可以使用日期或者時間函數來解決這個問題,我們只需要在單元格輸入公式就可以了。
  • C/C+時間相關的函數
    使用方式如下: 「如何獲取當前時間戳,單位為秒」 也可以使用「time」函數: 該函數返回系統的當前日曆時間,返回的是自1970年1月1日以來所經過的秒數。
  • Axure教程:用中繼器和日期函數實現萬年曆
    今天這個案例就和萬年曆有關,教大家使用「中繼器」和「日期函數」來實現一個萬年曆的原型,不過這原型可不是死的哦,是可以真真正正顯示萬年日期的萬年曆。原型預覽:學習重點通過本案例,我們主要來練習中繼器和日期函數的使用,中繼器用於顯示日曆的天,日期函數則用於處理日曆的顯示邏輯。其中使用到的日期函數將包括:Now-獲取當前日期、getDate()-獲取天、getDay()-獲取一周中的第幾天、addDays()-增加/減少天、addMonths()-增加/減少月、addYears()-增加/減少年。
  • Axure函數使用手冊 - 人人都是產品經理
    本文是介紹了Axure函數,以及它的相關的基本用法,建議大家收藏查看~一、函數使用方法Axure函數使用的基本語法是:用」[[ ]]」雙方括號(即英文雙中括號)包含,變量值和函數用英文句號(即點」. 」)連接。例如:[[LVAR.