總結(jié)一下自己怎么用JS初級的內(nèi)容來寫一個頁面實時渲染時間的方法。
1、看看在框架目錄中是否有util文件夾，它用來存放工具欄的JavaScript函數(shù)
util.js文件代碼如下：
const formatTime = date => {
const year = date.getFullYear()
const month = date.getMonth() + 1
const day = date.getDate()
const hour = date.getHours()
const minute = date.getMinutes()
const second = date.getSeconds()
return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':')
}
const formatNumber = n => {
n = n.toString()
return n[1] ? n : '0' + n
}
module.exports = {
formatTime: formatTime
}
2、在要獲取時間的.js文件中加載util.js文件
例如，我要在index.js中引用util.js中的模塊formatTime。那么，首先在index.js中定義變量util，使用require函數(shù)加載util.js文件。這里必須使用相對路徑。
var util = require('../../utils/util');
3、在onload方法中，調(diào)用util.js中的formatTime方法獲取當(dāng)前時間
var page = this;
var DATE = util.formatTime(new Date());
this.setData({
myTime:DATE
});
調(diào)用函數(shù)時，傳入new Date()參數(shù)，返回值是日期和時間。
效果是這樣的：
3.1 修改連接符
如果想修改連接符，只需要自己模仿寫一個formatDate()方法。
4、在index.wxml文件，增加顯示時間的頁面布局
用雙大括號把時間變量進行數(shù)據(jù)綁定。
編譯以后就能在index頁面中看到顯示時間，如下圖。但是，此時時間是不變化的，所以我們需要一個計時定時器setInterVal() 方法
5、onload中來個定時器，不斷地觸發(fā)
JS代碼是用一個setInterval() 進行函數(shù)封裝 定時1000毫秒執(zhí)行一次
文章來源：http://www.zghlxwxcb.cn/news/detail-501543.html
onLoad: function (options) {
var page = this;
setInterval(() => {
var DATE = util.formatTime(new Date());
this.setData({
myTime: DATE
})
}, 1000);
},
實測OK！文章來源地址http://www.zghlxwxcb.cn/news/detail-501543.html
參考文獻：
- 微信小程序獲取當(dāng)前時間及獲取當(dāng)前日期
- 十分鐘時間搞懂怎么用JS代碼渲染實時時間
- 小程序?qū)崟r時間顯示實現(xiàn)
到了這里，關(guān)于微信小程序渲染實時時間的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
