"萌新" 2022-06-01 12:58 采纳率: 100%
浏览 35
已结题

在当前日期下方添加1个按钮,启动时间,怎样让“当前日期”与系统时间同步起来,用setTimeout()实现


<!--index.wxml-->
<view class="container">
  <view>
    当前日期:{{year}}{{month}}{{day}}日   {{hour}}:{{mini}}:{{sec}}
    <button>启动时间</button>
    <picker-view indicator-style="height:60px;"
     style="width: 100%;height: 300px;"
      value="{{value}}"
      bindchange="bindChangePicker">
     <!--下面的标签是picker-view中的一列-->
    <picker-view-column>
      <view wx:for="{{years}}" style="line-height: 60px;">
        {{item}}年
      </view>
    </picker-view-column>
    <picker-view-column>
      <view wx:for="{{months}}" style="line-height: 60px;">
        {{item}}月
      </view>
    </picker-view-column>
    <picker-view-column>
      <view wx:for="{{days}}" style="line-height: 60px;">
        {{item}}日
      </view>
    </picker-view-column>
    </picker-view>
  </view>
</view>


// index.js
// 获取应用实例
const app = getApp()
const date=new Date()
const years=[]
const months=[]
const days=[]
//定义年份 let相当于var
for(let i=1900;i<=2050;i++){
  years.push(i)
}
//定义月份
for(let i=1;i<=12;i++){
  months.push(i)
}
//定义天数
for(let i=1;i<=31;i++){
  days.push(i)
}
Page({
  data: {
    motto: 'Hello World',
    userInfo: {},
    years:years,
    months:months,
    days:days,
    year:date.getFullYear(),
    month:date.getMonth()+1,
    day:date.getDate(),
    hour:date.getHours(),
    mini:date.getMinutes(),
    sec:date.getSeconds(),
    value:[119,1,2],
    hasUserInfo: false,
    canIUse: wx.canIUse('button.open-type.getUserInfo'),
    canIUseGetUserProfile: false,
    canIUseOpenData: wx.canIUse('open-data.type.userAvatarUrl') && wx.canIUse('open-data.type.userNickName'// 如需尝试获取用户信息可改为false
  },
  // 事件处理函数
  bindViewTap() {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  bindChangePicker:function(e){
    const val=e.detail.value
    console.log('picker-view:',val)
    //在前后端中,赋值的方式(沿用的就是封装:java的set和get)
   this.setData({
      year:this.data.years[val[0]],
      month:this.data.months[val[1]],
      day:this.data.days[val[2]]
    })
  },

  onLoad() {
    if (wx.getUserProfile) {
      this.setData({
        canIUseGetUserProfile: true
      })
    }
  },
  //绑定picker 点击“确定”按钮后
  bindMultiPickerChange:function(e){
    console.log('picker点击改变:',e.detail.value)
    //把事件获取的值给data
    this.setData({
      multiIndex:e.detail.value
    })
  },
   
  getUserProfile(e) {
    // 推荐使用wx.getUserProfile获取用户信息,开发者每次通过该接口获取用户个人信息均需用户确认,开发者妥善保管用户快速填写的头像昵称,避免重复弹窗
    wx.getUserProfile({
      desc: '展示用户信息'// 声明获取用户个人信息后的用途,后续会展示在弹窗中,请谨慎填写
      success: (res) => {
        console.log(res)
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    })
  },
  getUserInfo(e) {
    // 不推荐使用getUserInfo获取用户信息,预计自2021年4月13日起,getUserInfo将不再弹出弹窗,并直接返回匿名的用户个人信息
    console.log(e)
    this.setData({
      userInfo: e.detail.userInfo,
      hasUserInfo: true
    }

img

  • 写回答

1条回答 默认 最新

  • Heerey525 前端领域新星创作者 2022-06-01 14:45
    关注
    let timer = null;
    Page({
        onLoad: function (options) {
            timer = setInterval(() => {
                this.getHourMinuteSecond()
            }, 1000)
        },
    
        /**
         * @description:时间格式化、1位数时,前面拼接0
         * @param {String|Number} i eg. 1
         * @return {String} '01'
         */
        spliceZero(i) {
            if (i.toString().length === 1) {
                i = '0' + i
            } else {
                i = i + ''
            }
            return i
        },
    
        // 提取当前日期的时分秒
        getHourMinuteSecond() {
            const dt = new Date()
            // 个位数需要填充0的话使用注释内容
            // const hour = this.spliceZero(dt.getHours())
            // const minute = this.spliceZero(dt.getMinutes())
            // const second = this.spliceZero(dt.getSeconds())
    
            const hour = dt.getHours()
            const mini = dt.getMinutes()
            const sec = dt.getSeconds()
    
            this.setData({
                hour,
                mini,
                sec
            })
        },
    
        /**
         * 生命周期函数--监听页面卸载
         */
        onUnload: function () {
            clearInterval(timer)
        },
    })
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录

报告相同问题?

问题事件

  • 系统已结题 6月10日
  • 已采纳回答 6月2日
  • 创建了问题 6月1日

悬赏问题

  • ¥15 请分析一下这个电路设计的优点🙏
  • ¥15 求视频摘要youtube和ovp数据集
  • ¥15 怎么改成输入一个要删除的数后现实剩余的数再输入一个删除的数再现实剩余的数用yes表示继续no结束程序
  • ¥15 在启动roslaunch时出现如下问题
  • ¥15 汇编语言实现加减法计算器的功能
  • ¥20 关于多单片机模块化的一些问题
  • ¥30 seata使用出现报错,其他服务找不到seata
  • ¥35 引用csv数据文件(4列1800行),通过高斯-赛德尔法拟合曲线,在选取(每五十点取1点)数据,求该数据点的曲率中心。
  • ¥20 程序只发送0X01,串口助手显示不正确,配置看了没有问题115200-8-1-no,如何解决?
  • ¥15 Google speech command 数据集获取