zoukankan      html  css  js  c++  java
  • uniapp小程序获取时间戳转换时间例子

    日常开发中经常会遇到时间相关的问题,服务端返回的数据都是以时间戳的方式,那么需要将其处理转化为对应的时间格式,具体方式如下:

    HTML:

    <view class="today-focus">
          <view class="content-view">
                <view class="article-item" v-for="item in itemFocus">
                      <view class="article-img"><image :src="item.thumb"></image></view>
                      <view class="article-con">
                            <view class="article-title">{{item.title}}</view>
                            <view class="article-description">
                                <view class="time">{{item.inputtime}}</view>
                                <view class="source">{{item.catname}}</view>
                                <view class="read-num"><image src="../../static/images/read-icon.png"></image>{{item.listorder}}</view>
                            </view>
                      </view>
                </view>    
         </view>    
    </view>

      css:

    .today-focus{
        background-color: #f4f3f3;
        margin-top:20rpx;
        width: 750rpx;
    }
    .today-tit{
        color: #e70c0c;
        font-size: 38rpx;
        border-bottom:1rpx #cccccc solid;
        height: 60rpx;
        line-height: 60rpx;
        font-weight: 550;
    }
    .article-item{
        height: 187rpx;
        border-bottom: 1rpx #cccccc solid;
        margin-top:30rpx;
    }
    .article-img image{
        width: 230rpx;
        height: 156rpx;
        float: left;
    }
    .article-con{
        float: left;
        width: 460rpx;
        height: 156rpx;
        margin-left:20rpx;
    }
    .article-title{
        font-size: 30rpx;
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
    .article-description{
        font-size: 24rpx;
        margin-top:38rpx;
        color: #b0b0b0;
    }
    .time{
        float: left;
        }
    .source{
        float: left;
        border-radius: 5rpx;
        border:1rpx #ed6c00 solid;
        color: #ed6c00;
        width: 100rpx;
        text-align: center;
        height:38rpx;
        line-height: 38rpx;
        margin-left:20rpx;
    }
    .read-num{
        float: right;
    }
    .read-num image{
        width: 22rpx;
        height: 15rpx;
        margin-right:10rpx;
    }

    script:     happenTimeFun()方法实现

     1 <script>
     3     export default {
     4         data() {
     5             return {  
    itemFocus:[], 13 } 14 }, 15 onLoad() {
    this.getFocus();
    },
    21 methods: {
    happenTimeFun(num){//时间戳数据处理 36 let date = new Date(num * 1000); 37 //时间戳为10位需*1000,时间戳为13位的话不需乘1000 38     let y = date.getFullYear(); 39     let MM = date.getMonth() + 1; 40     MM = MM < 10 ? ('0' + MM) : MM;//月补0 41     let d = date.getDate(); 42     d = d < 10 ? ('0' + d) : d;//天补0 43     let h = date.getHours(); 44     h = h < 10 ? ('0' + h) : h;//小时补0 45     let m = date.getMinutes(); 46     m = m < 10 ? ('0' + m) : m;//分钟补0 47     let s = date.getSeconds(); 48     s = s < 10 ? ('0' + s) : s;//秒补0 49 return y + '-' + MM + '-' + d; //年月日 50     //return y + '-' + MM + '-' + d + ' ' + h + ':' + m+ ':' + s; //年月日时分秒 51 },
    getFocus(){
    63 uni.request({ 64 url:getApp().globalData.url + '/news/focus', 65 method:'get', 66 data:{}, 67 success: (res) => { 68 this.itemFocus = res.data.data.data; 69 this.itemFocus.forEach(item=>{ 70 item.inputtime = this.happenTimeFun(item.inputtime) 71 }) 72 } 73 }) 74 },
    change(e) { 94 this.btnnum = e 95 } 96 } 97 } 98 </script>
  • 相关阅读:
    第三个冲刺周期第1天
    第二个冲刺周期第7天
    第二个冲刺周期第6天
    第二个冲刺周期第5天
    电梯调度系统最终版
    电梯调度系统迟真真&冯小兰
    软件工程之课程评价czz
    《代码大全2》读后感czz
    迟真真假如历史可以重来
    十天冲刺任务迟真真
  • 原文地址:https://www.cnblogs.com/web15/p/12932439.html
Copyright © 2011-2022 走看看