学习使用微信小程序动态获取当前时间并实时跳动

微信小程序实时动态获取时间指南
本文详细介绍了如何在微信小程序中实现动态获取并显示当前时间。通过修改util.js文件中的formatTime函数,结合.js中设置的定时器,每秒更新时间,并在wxml页面上展示,为用户提供实时跳动的时间显示。

学习使用微信小程序动态获取当前时间并实时跳动

1、修改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
}

2、.js函数构造

//头部引用util.js
// pages/user/index.js
var util=require('../../utils/util'); 
Page({
  /**
   * 页面的初始数据
   */
  data: {
    Time:''
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this;
    setInterval(function(){
        that.setData({
            Time: util.formatTime(new Date())
        });    
    },1000);    
  },
  
  getTime:function(e){
    var that = this;
    var currentTime = util.formatTime(new Date());
  },
 
 
})

我们需要在onLoad函数里面设置一个定时器,每过一秒钟就调用一次getTime函数,从而获取到实时的时间

3、wxml页面显示固定时间

<view bindtap="getTime" style="color:block;font-size: 25px;">时间 {{Time}}</view>

在这里插入图片描述

### 实现微信小程序中自动获取显示当前时间微信小程序环境中,可以通过 JavaScript 的 `Date` 对象来轻松获取当前时间利用定时器函数如 `setInterval()` 来定期更新界面上展示的时间[^1]。 为了实现这一功能,在页面对应的 JS 文件里定义一个方法用于取得最新的时间字符串: ```javascript function getCurrentTime() { const now = new Date(); let hour = now.getHours(); // 获取小时数 (0-23) let minute = now.getMinutes(); // 获取分钟数 (0-59) let second = now.getSeconds(); // 获取秒数 (0-59) // 补零操作以确保格式统一为两位数 hour = checkTime(hour); minute = checkTime(minute); second = checkTime(second); function checkTime(i) { return i < 10 ? '0' + i : i; } return `${hour}:${minute}:${second}`; } ``` 接着,在页面加载完成时启动一个每秒钟执行一次的计时器,用来刷新数据绑定中的变量从而触发视图层的数据变化监听机制,达到实时更新的效果: ```javascript Page({ data: { currentTime: '' }, onLoad: function () { this.updateTime(); setInterval(() => { this.updateTime(); }, 1000); }, updateTime(){ this.setData({currentTime:getCurrentTime()}); } }); ``` 最后一步是在 WXML 页面文件内通过双大括号语法将上述设置好的 `currentTime` 属性值渲染出来: ```html <view>{{currentTime}}</view> ``` 这样就完成了整个流程的设计与编码工作。每当用户打开此页面的时候,就能看到不断跳动着更新的当前时刻了。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值