小程序，按照一天的時間分配顯示不一樣內容

本文章小案例是看到智聯招聘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;
}

　　js

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了，因此簡單，可是有時候實際項目會有這種需求