小程序，按照一天的时间分配显示不同内容

本文章小案例是看到智联招聘app的你进入首页之前就会有一个小圆圈，根据所在的时间，来显示问候语，比喻有：亲爱的，早上好这种话语。

我这里简单做了一个类似的小dome，作为笔记。

　　我这里按了几个时间来进行分配，具体看你有什么需要就改动。

　　0：00—6:00凌晨；6:00—11:00上午；11:00—13:00中午； 13:00—16:00下午；16:00—18:00傍晚；18:00—24:00晚上

　　随着当前的时间变化判断就可以了达到效果了，如果项目有按不同时间段显示内容的话，那就可以像我这样做，不同时间段获取不同的接口。

　　wxml

<!--样式就简简单单就好啦  -->
<view class='bh'>
  {{bh}}
</view>

　　wxss

.bh{margin:60% auto;height: 80rpx; width: 300rpx;line-height: 80rpx;color: wheat;text-align: center; background:salmon;font-weight: bold;
}

var app = getApp()
Page({

  data: {
   bh:""
  },


  onLoad: function (options) {
     var  that = this;
    var timestamp = Date.parse(new Date());
    timestamp = timestamp / 1000;
    // console.log("当前时间戳为：" + timestamp);

    //获取当前时间
    var n = timestamp * 1000;

    var date = new Date(n);
    //获取时
    var h = date.getHours();
    
    console.log("现在的时间是"+h+"点")

  
    if (0 < h && h <= 6) {
     
      console.log("  0：00—6:00凌晨:勤奋的你")
      that.setData({
        bh: '亲爱的，凌晨好'
      })
    } else if (6 <= h && h < 11) {
     
      console.log("6：00—6:00早上:奋斗的你")
      that.setData({
        bh: '亲爱的，早上好'
      })
    }
    else if (11 <= h && h <= 13) {
     
      console.log("11：00—13:00中午:激情的你")
      that.setData({
        bh: '亲爱的，中午好'
      })
    } else if (13 <= h && h <= 16) {
    
      console.log("18:00—24:00下午:懒洋洋的你")
      that.setData({
        bh:'亲爱的，下午好'
      })
    }
    else if (16 <= h && h <= 18) {
     
      console.log("16：00：00—18:00傍晚:活力的你")
      that.setData({
        bh: '亲爱的，傍晚好'
      })
    }
    else {
      
       console.log("晚上啦，记得好好照顾自已，别熬夜")
        that.setData({
            bh: '亲爱的，晚上好'
      })

    }

  }
  
})

View Code

如图：

这样就OK了，所以简单，但是有时候实际项目会有这种需求