小程序模板网

首页 小程序模板网 开发文档 小程序开发教程正文

Canvas 基础绘制，时间戳转化为几天前，几小时前，几分钟前

发布时间：2018-02-06 15:42 所属栏目：小程序开发教程

 


相关文章：跳坑《一百一十一》canvas相关问题说明 
以下所有 set 打头的方法均为微信小程序特有, 去掉 set 即为 CanvasRenderingContext2D 的属性名.

.stroke() 描出当前路径 
.setStrokeStyle(color) 设置路径颜色 
.setLineWidth(Number lineWidth) 设置路径宽度 
.setLineCap(String lineCap) 设置路径端点样式

.fill() 闭合并填充当前路径 
.setFillStyle(color) 设置填充色 
.setStrokeStyle(color) 设置路径色

.beginPath() 开始路径 
.moveTo() 创建一个点 
.lineTo() 创建一个点与上一个点连接 
.rac(x, y, 半径, 开始弧度, 结束弧度, 逆时针) 画一个弧形 
.rect(x, y, width, height) 画一个矩形 
.closePath() 闭合路径 
.rotate() 以原点为中心旋转 
.translate(x, y) 偏移原点位置

备注: 与数学坐标系 X 轴一致, Y 轴反转.

  • 画布对象
  • 颜色对象 Gradient

设置阴影 
.setShadow(offsetX, offsetY, blur, color)

创建线性渐变色 
.createLinearGradient()

创建辐射渐变色 
.createCircularGradient()

创建渐变色点 
Gradient.addColorStop()

设置路径转折点样式 
.setLineJoin(String lineJoin) 
.setMiterLimit(Number miterLimit)

 

二：时间戳转化为几天前，几小时前，几分钟前

 

分享者：jfaerfa，来自原文地址 
做项目的时候后台传到前台的时间格式都是时间戳，要是前台直接显示时间的话略显普通，若是将其转换成多久以前的发表的会不会觉得更好些呢？

那么如何写一个微信小程序的时间戳转换工具呢？附上小程序时间戳转换效果图： 

源码 
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. 


            


            


            

            

                

                    易优小程序（企业版）+灵活api+前后代码开源
                    码云仓库:starfork
                

                

                    本文地址：https://www.eyoucms.com/wxmini/doc/course/21634.html 复制链接 
                    如需定制请联系易优客服咨询：800182392 点击咨询 
                

            

          

          

            
            

            
免责声明：本站所有文章和图片均来自用户分享和网络收集，文章和图片版权归原作者及原出处所有，仅供学习与参考，请勿用于商业用途，如果损害了您的权利，请联系网站客服处理。

          

          


        

      

      

        

          

                        

              

                

                  
                  
                

              

                        

                      

          

            
            

              
              
            

          

        

      

    

  







  

    

            

        
产品

        
      

            

        
服务

        
      

            

        
帮助

        
      

            

        
关于

        
      

            
   
        
工作日 8:30-12:00 14:30-18:00 

          周六及部分节假日提供值班服务

        联系我们 

    

  









  
  

    
    
    

    

     QQ在线咨询