小程序模板網(wǎng)

Canvas 基礎繪制，時間戳轉化為幾天前，幾小時前，幾分鐘前

發(fā)布時間：2018-02-06 15:42 所屬欄目：小程序開發(fā)教程

 


相關文章：跳坑《一百一十一》canvas相關問題說明 
以下所有 set 打頭的方法均為微信小程序特有, 去掉 set 即為 CanvasRenderingContext2D 的屬性名.

.stroke() 描出當前路徑 
.setStrokeStyle(color) 設置路徑顏色 
.setLineWidth(Number lineWidth) 設置路徑寬度 
.setLineCap(String lineCap) 設置路徑端點樣式

.fill() 閉合并填充當前路徑 
.setFillStyle(color) 設置填充色 
.setStrokeStyle(color) 設置路徑色

.beginPath() 開始路徑 
.moveTo() 創(chuàng)建一個點 
.lineTo() 創(chuàng)建一個點與上一個點連接 
.rac(x, y, 半徑, 開始弧度, 結束弧度, 逆時針) 畫一個弧形 
.rect(x, y, width, height) 畫一個矩形 
.closePath() 閉合路徑 
.rotate() 以原點為中心旋轉 
.translate(x, y) 偏移原點位置

備注: 與數(shù)學坐標系 X 軸一致, Y 軸反轉.

  • 畫布對象
  • 顏色對象 Gradient

設置陰影 
.setShadow(offsetX, offsetY, blur, color)

創(chuàng)建線性漸變色 
.createLinearGradient()

創(chuàng)建輻射漸變色 
.createCircularGradient()

創(chuàng)建漸變色點 
Gradient.addColorStop()

設置路徑轉折點樣式 
.setLineJoin(String lineJoin) 
.setMiterLimit(Number miterLimit)

 

二：時間戳轉化為幾天前，幾小時前，幾分鐘前

 

分享者：jfaerfa，來自原文地址 
做項目的時候后臺傳到前臺的時間格式都是時間戳，要是前臺直接顯示時間的話略顯普通，若是將其轉換成多久以前的發(fā)表的會不會覺得更好些呢？

那么如何寫一個微信小程序的時間戳轉換工具呢？附上小程序時間戳轉換效果圖： 

源碼 
timestamp.wxml

 


    
	
  1. 
		<view class="v_beforetime">轉換前：{{time}}</view>
    2. 
	
  2. 
		<view class="v_aftertime">轉換后：{{aftertime}}</view>
    3. 
	
  3. 
		<button class="btn_changeTimestamp" bindtap="changeTimestamp"> 轉換 </button>
    4. 




	timestamp.wxss



	 




    
	
  1. 
		.page{
    2. 
	
  2. 
		height: 100%;
    3. 
	
  3. 
		width: 100%;
    4. 
	
  4. 
		}
    5. 
	
  5. 
		 
    6. 
	
  6. 
		.btn_changeTimestamp{
    7. 
	
  7. 
		width:400rpx;
    8. 
	
  8. 
		height:100rpx;
    9. 
	
  9. 
		margin-top: 20rpx;
    10. 
	
  10. 
		background:#0099FF;
    11. 
	
  11. 
		}
    12. 
	
  12. 
		 
    13. 
	
  13. 
		.v_beforetime{
    14. 
	
  14. 
		margin-top: 20rpx;
    15. 
	
  15. 
		background:#C0C0C0;
    16. 
	
  16. 
		}
    17. 
	
  17. 
		.v_aftertime{
    18. 
	
  18. 
		margin-top: 20rpx;
    19. 
	
  19. 
		background:#FF0000;
    20. 
	
  20. 
		}
    21. 




	timestamp.js



	 




    
	
  1. 
		// 時間戳轉換成剛剛、幾分鐘前、幾小時前、幾天前
    2. 
	
  2. 
		 
    3. 
	
  3. 
		//剛剛
    4. 
	
  4. 
		var just = new Date().getTime();
    5. 
	
  5. 
		 
    6. 
	
  6. 
		//幾分鐘前
    7. 
	
  7. 
		var afewminutesago = new Date("Nov 29, 2016 00:50:00").getTime();
    8. 
	
  8. 
		 
    9. 
	
  9. 
		//幾周前
    10. 
	
  10. 
		var afewweekago = new Date("Nov 29, 2016 00:50:00").getTime();
    11. 
	
  11. 
		 
    12. 
	
  12. 
		//幾年前
    13. 
	
  13. 
		var someday = new Date("Nov 21, 2012 01:15:00").getTime();
    14. 
	
  14. 
		 
    15. 
	
  15. 
		var helloData = {
    16. 
	
  16. 
		time: afewweekago
    17. 
	
  17. 
		}
    18. 
	
  18. 
		 
    19. 
	
  19. 
		function getDateDiff(dateTimeStamp){
    20. 
	
  20. 
		var result;
    21. 
	
  21. 
		var minute = 1000 * 60;
    22. 
	
  22. 
		var hour = minute * 60;
    23. 
	
  23. 
		var day = hour * 24;
    24. 
	
  24. 
		var halfamonth = day * 15;
    25. 
	
  25. 
		var month = day * 30;
    26. 
	
  26. 
		var now = new Date().getTime();
    27. 
	
  27. 
		var diffValue = now - dateTimeStamp;
    28. 
	
  28. 
		if(diffValue < 0){
    29. 
	
  29. 
		return;
    30. 
	
  30. 
		}
    31. 
	
  31. 
		var monthC =diffValue/month;
    32. 
	
  32. 
		var weekC =diffValue/(7*day);
    33. 
	
  33. 
		var dayC =diffValue/day;
    34. 
	
  34. 
		var hourC =diffValue/hour;
    35. 
	
  35. 
		var minC =diffValue/minute;
    36. 
	
  36. 
		if(monthC>=1){
    37. 
	
  37. 
		if(monthC<=12)
    38. 
	
  38. 
		result="" + parseInt(monthC) + "月前";
    39. 
	
  39. 
		else{
    40. 
	
  40. 
		result="" + parseInt(monthC/12) + "年前";
    41. 
	
  41. 
		}
    42. 
	
  42. 
		}
    43. 
	
  43. 
		else if(weekC>=1){
    44. 
	
  44. 
		result="" + parseInt(weekC) + "周前";
    45. 
	
  45. 
		}
    46. 
	
  46. 
		else if(dayC>=1){
    47. 
	
  47. 
		result=""+ parseInt(dayC) +"天前";
    48. 
	
  48. 
		}
    49. 
	
  49. 
		else if(hourC>=1){
    50. 
	
  50. 
		result=""+ parseInt(hourC) +"小時前";
    51. 
	
  51. 
		}
    52. 
	
  52. 
		else if(minC>=1){
    53. 
	
  53. 
		result=""+ parseInt(minC) +"分鐘前";
    54. 
	
  54. 
		}else{
    55. 
	
  55. 
		result="剛剛";
    56. 
	
  56. 
		}
    57. 
	
  57. 
		 
    58. 
	
  58. 
		return result;
    59. 
	
  59. 
		};
    60. 




	 




    
	
  1. 
		Page({
    2. 
	
  2. 
		data: helloData,
    3. 
	
  3. 
		changeTimestamp: function (e) {
    4. 
	
  4. 
		var that = this;
    5. 
	
  5. 
		this.setData({
    6. 
	
  6. 
		aftertime: getDateDiff(that.data.time)
    7. 
	
  7. 
		})
    8. 
	
  8. 
		}
    9. 
	
  9. 
		})
    10. 


            


            


            

            

                
                

                    本文地址：http://22321a.com/wxmini/doc/course/21634.html 復制鏈接 
                    如需定制請聯(lián)系易優(yōu)客服咨詢：800182392 點擊咨詢 
                

            

          

          

        

      

      
    

  







  

    
  









  
  

    
    
    

    

     QQ在線咨詢