微信小程序之 js 时间戳/1000 转换 秒,六个小时后,一天后,本周五 选项计算时间

1、js取当前时间的秒级时间戳

parseInt(new Date().getTime()/1000);, 
//或
Date.parse(new Date())/1000;

2、将当前日期转换为时间戳。

(1)、当前时间的时间戳

var now = new Date();
console.log(now.getTime())  //当前时间的时间戳
// 将当前日期转换为时间戳,getTime()方法可返回距1970年1月1日之间的毫秒数。
//也可以使用  +now ,该效果等同于now.getTime()

(2)、将指定日期转换为时间戳。

var t = "2017-12-08 20:5:30";  // 月、日、时、分、秒如果不满两位数可不带0.
var T = new Date(t);  // 将指定日期转换为标准日期格式。Fri Dec 08 2017 20:05:30 GMT+0800 (中国标准时间)
console.log(T.getTime())  // 将转换后的标准日期转换为时间戳。

3、将时间戳转换为日期。

var t = 787986456465;  // 当参数为数字的时候,那么这个参数就是时间戳,被视为毫秒,创建一个距离1970年1月一日指定毫秒的时间日期对象。
console.log(new Date(t)) // Wed Dec 21 1994 13:07:36 GMT+0800 (中国标准时间)

var t2 = "2017-5-8 12:50:30";
console.log(new Date(t2)) // Mon May 08 2017 12:50:30 GMT+0800 (中国标准时间)

var t3 = "2017-10-1";
console.log(new Date(t3)) // Sun Oct 01 2017 00:00:00 GMT+0800 (中国标准时间) 不设定时分秒,则默认转换为00:00:00

4、将时间戳转换为指定格式日期的方法封装:

// 格式化日期,如月、日、时、分、秒保证为2位数
function formatNumber (n) {
    
    
    n = n.toString()
    return n[1] ? n : '0' + n;
}
// 参数number为毫秒时间戳,format为需要转换成的日期格式
function formatTime (number, format) {
    
    
    let time = new Date(number)
    let newArr = []
    let formatArr = ['Y', 'M', 'D', 'h', 'm', 's']
    newArr.push(time.getFullYear())
    newArr.push(formatNumber(time.getMonth() + 1))
    newArr.push(formatNumber(time.getDate()))

    newArr.push(formatNumber(time.getHours()))
    newArr.push(formatNumber(time.getMinutes()))
    newArr.push(formatNumber(time.getSeconds()))

    for (let i in newArr) {
    
    
        format = format.replace(formatArr[i], newArr[i])
    }
    return format;
}

//如需要调用上述方法,使用formatTime(1545903266795, 'Y年M月D日 h:m:s')
//或者formatTime(1545903266795, 'Y-M-D h:m:s')即可

5、小程序案例

需求及效果图:
下次追访时间 添加 6小时后,一天后,本周五 三个快捷选项
在这里插入图片描述

案例讲解:
如果下次追访时间 为周五周六周日 ,则不显示本周五选项;

html:

<view class="addloupantan areatan addzhftan" wx:if="{
     
     {isaddzhuifang}}">
		<view class="addmain">
				<image src="../../images/lpsel-xx.png" mode="widthFix" class="addxx" bindtap="areatanxx" />
				<view class="khinputbox">
						<view class="zhuifangbox">
								<view class="inptxt">追访记录</view>
								<textarea class="areabox" value="{
     
     {zfang_log}}" focus="true" bindinput="zhfareainp" />
								<view class="nextzhfkjbox zhuibomtxt">
										<view>快捷选择</view>
										<!-- zfselkj -->
										<text class="select" wx:for="{
     
     {zfseltxtarr}}" wx:key="index" wx:if="{
     
     {index != 2 || (index == 2 && weekday != '星期五' && weekday != '星期六' && weekday != '星期天') }}" data-index="{
     
     {index}}" bindtap="zfselkj">{
   
   {item}}</text>
								</view>
								<view class="zhuibomtxt">
										<view>下次追访时间</view>
										<picker class="select" mode="date" value="{
     
     {next_zhuifang_day}}" start="{
     
     {startdate}}" end="{
     
     {enddate}}" bindchange="bindDateChange">
												<view class="picker">{
   
   {next_zhuifang_day}}</view>
										</picker>
										<view class="select bomnone smselect">{
   
   {weekday}}</view>
										<picker class="select smselect" mode="time" value="{
     
     {zhuifang_time}}" start="00:00" end="23:59" bindchange="bindTimeChange">
												<view class="picker">{
   
   {zhuifang_time}}</view>
										</picker>
								</view>
						</view>
				</view>
				<view class="addqueding" bindtap="addzhuifangtaninp">确定</view>
		</view>
</view>

js:(util.js 时间戳转换格式)
文件位置:
在这里插入图片描述

const formatTime = (date) => {
    
    
    const year = date.getFullYear()
    const month = date.getMonth() + 1
    const day = date.getDate()
    const hour = date.getHours()
    const minute = date.getMinutes()
    const second = date.getSeconds()

    return [hour, minute].map(formatNumber).join(':')
}
const formatDate = (date) => {
    
    
    const year = date.getFullYear()
    const month = date.getMonth() + 1
    const day = date.getDate()

    return [year, month, day].map(formatNumber).join('-')
}
const tomorrowDate = (date) => {
    
    
    const year = date.getFullYear()
    const month = date.getMonth() + 1
    const day = date.getDate() + 1

    return [year, month, day].map(formatNumber).join('-')
}

const endYear = (date) => {
    
    
    const year = date.getFullYear() + 30
    const month = date.getMonth() + 1
    const day = date.getDate()

    return [year, month, day].map(formatNumber).join('-')
}

const lfYear = (date) => {
    
    
    const year = date.getFullYear() - 10
    const month = date.getMonth() + 1
    const day = date.getDate()

    return [year, month, day].map(formatNumber).join('-')
}

function timeTodate(number, format) {
    
    
    var formateArr = ['Y', 'M', 'D', 'h', 'm', 's']
    var returnArr = []

    var date = new Date(number * 1000)
    returnArr.push(date.getFullYear())
    returnArr.push(formatNumber(date.getMonth() + 1))
    returnArr.push(formatNumber(date.getDate()))

    returnArr.push(formatNumber(date.getHours()))
    returnArr.push(formatNumber(date.getMinutes()))
    returnArr.push(formatNumber(date.getSeconds()))

    for (var i in returnArr) {
    
    
        format = format.replace(formateArr[i], returnArr[i])
    }
    return format
}

function transTime(unixtime) {
    
    
    var dateTime = new Date(parseInt(unixtime) * 1000)
    var year = dateTime.getFullYear()
    var month = dateTime.getMonth() + 1
    var day = dateTime.getDate()
    var hour = dateTime.getHours()
    var minute = dateTime.getMinutes()
    var second = dateTime.getSeconds()
    var now = new Date()
    var now_new = Date.parse(now.toDateString())
    var milliseconds = now_new - dateTime
    var timeSpanStr = year + '-' + month + '-' + day
    return timeSpanStr
}

const formatNumber = (n) => {
    
    
    n = n.toString()
    return n[1] ? n : '0' + n
}

function getWeek(todate) {
    
    
    let weetoday = new Date(todate.replace(/-/g, '/'))
        // console.log(weetoday);
    var day = weetoday.getDay()
        // console.log(new Date('2018-09-03'.replace(/-/g, "/")).getTime());
        // var day = getDate(todate).getDay();
    switch (day) {
    
    
        case 0:
            return '星期天'
            break
        case 1:
            return '星期一'
            break
        case 2:
            return '星期二'
            break
        case 3:
            return '星期三'
            break
        case 4:
            return '星期四'
            break
        case 5:
            return '星期五'
            break
        case 6:
            return '星期六'
            break
    }
}
module.exports = {
    
    
    formatTime: formatTime,
    formatDate: formatDate,
    tomorrowDate: tomorrowDate,
    endYear: endYear,
    lfYear: lfYear,
    timeTodate: timeTodate,
    transTime: transTime,
    getWeek: getWeek,
}

wxjs:

let util = require('../../utils/util.js')

Page({
    
    
	data{
    
    
		isaddzhuifang:1,
		zfang_log: '', //追访记录
		zfseltxtarr: ['6小时后', '一天后', '本周五'],
		weekday: '',
		next_zhuifang_day: 0,
		zhuifang_time:0,
		startdate:0,
		enddate:0,
		
	}
	
	onLoad: function (options) {
    
    
		let tomdate = util.tomorrowDate(new Date()) //明天
	    let startdate = util.formatDate(new Date()) //今天
	    let enddate = util.endYear(new Date()) //今年+30年
	    this.setData({
    
    
	      startdate: startdate,
	      enddate: enddate,
	      next_zhuifang_day: tomdate,
	      zhuifang_time: '12:00',
	    })
	    let today = util.getWeek(this.data.next_zhuifang_day)
	    this.setData({
    
    
	      weekday: today,
	    })
	},
	areatanxx: function () {
    
    
	    this.setData({
    
    
	      istextarea: 0,
	      isaddzhuifang: 0,
	    })
	  },
	  zhfareainp: function (e) {
    
    
	    this.setData({
    
    
	      zfang_log: e.detail.value,
	    })
	  },
	  // 下次追访时间
	  zfselkj: function (e) {
    
    
	    let zfselidx = e.currentTarget.dataset.index
	    let zfdaytime = new Date(this.data.next_zhuifang_day + ' ' + this.data.zhuifang_time) //日期时间
	    console.log(zfdaytime.getTime())
	    console.log(zfdaytime.getTime() / 1000)
	    zfdaytime = parseInt(zfdaytime.getTime() / 1000) //转为时间戳  秒
	    // let zftime, zfday
	    if (zfselidx == 0) {
    
    
	      // console.log(zfdaytime)
	      zfdaytime = zfdaytime + 6 * 3600
	      zfdaytime = new Date(zfdaytime * 1000) //转为时间戳
	      // console.log(zfdaytime)
	      this.setData({
    
    
	        next_zhuifang_day: util.formatDate(zfdaytime),
	        zhuifang_time: util.formatTime(zfdaytime),
	        weekday: util.getWeek(util.formatDate(zfdaytime)),
	      })
	    } else if (zfselidx == 1) {
    
    
	      zfdaytime = zfdaytime + 24 * 3600
	      zfdaytime = new Date(zfdaytime * 1000) //转为时间戳
	      // console.log(zfdaytime)
	      this.setData({
    
    
	        next_zhuifang_day: util.formatDate(zfdaytime),
	        zhuifang_time: util.formatTime(zfdaytime),
	        weekday: util.getWeek(util.formatDate(zfdaytime)),
	      })
	    } else if (zfselidx == 2) {
    
    
	      if (this.data.weekday == '星期一') {
    
    
	        zfdaytime = zfdaytime + 24 * 3600 * 4
	        zfdaytime = new Date(zfdaytime * 1000) //转为时间戳
	        // console.log(zfdaytime)
	        this.setData({
    
    
	          next_zhuifang_day: util.formatDate(zfdaytime),
	          zhuifang_time: util.formatTime(zfdaytime),
	          weekday: util.getWeek(util.formatDate(zfdaytime)),
	        })
	      } else if (this.data.weekday == '星期二') {
    
    
	        zfdaytime = zfdaytime + 24 * 3600 * 3
	        zfdaytime = new Date(zfdaytime * 1000) //转为时间戳
	        // console.log(zfdaytime)
	        this.setData({
    
    
	          next_zhuifang_day: util.formatDate(zfdaytime),
	          zhuifang_time: util.formatTime(zfdaytime),
	          weekday: util.getWeek(util.formatDate(zfdaytime)),
	        })
	      } else if (this.data.weekday == '星期三') {
    
    
	        zfdaytime = zfdaytime + 24 * 3600 * 2
	        zfdaytime = new Date(zfdaytime * 1000) //转为时间戳
	        // console.log(zfdaytime)
	        this.setData({
    
    
	          next_zhuifang_day: util.formatDate(zfdaytime),
	          zhuifang_time: util.formatTime(zfdaytime),
	          weekday: util.getWeek(util.formatDate(zfdaytime)),
	        })
	      } else if (this.data.weekday == '星期四') {
    
    
	        zfdaytime = zfdaytime + 24 * 3600 * 1
	        zfdaytime = new Date(zfdaytime * 1000) //转为时间戳
	        // console.log(zfdaytime)
	        this.setData({
    
    
	          next_zhuifang_day: util.formatDate(zfdaytime),
	          zhuifang_time: util.formatTime(zfdaytime),
	          weekday: util.getWeek(util.formatDate(zfdaytime)),
	        })
	      } else {
    
    
	        wx.showToast({
    
    
	          title: '不能选择以前的日期!',
	          icon: 'none',
	        })
	      }
	    }
	  },
	  bindDateChange: function (e) {
    
    
	    this.setData({
    
    
	      next_zhuifang_day: e.detail.value,
	    })
	    let today = util.getWeek(this.data.next_zhuifang_day)
	    // console.log(today);
	    this.setData({
    
    
	      weekday: today,
	    })
	    // this.onweekday(this.data.next_zhuifang_day);
	    // console.log(this.data.next_zhuifang_day)
	  },
	  bindTimeChange: function (e) {
    
    
	    this.setData({
    
    
	      zhuifang_time: e.detail.value,
	    })
	    console.log(this.data.zhuifang_time)
	  },
})

css:(less)

.addloupantan {
    
    
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  z-index: 9;

  .addmain {
    
    
    position: absolute;
    top: 50%;
    left: 50%;
    width: 600rpx;
    height: 400rpx;
    padding: 30rpx;
    box-sizing: border-box;
    background: #fff;
    border-radius: 10rpx;
    margin: -300rpx 0 0 -300rpx;


    .zhuifangbox {
    
    
      position: relative;

      .inptxt {
    
    
        width: 100%;
        height: 80rpx;
        line-height: 80rpx;
        margin-top: 10rpx;
        font-size: 32rpx;
        color: #353535;
      }

      .areabox {
    
    
        display: block;
        padding: 10rpx;
        width: 100%;
        height: 142rpx;
        box-sizing: border-box;
        border: 1px solid #eee;
        border-radius: 10rpx;
        line-height: 40rpx;
        margin-top: 10rpx;
        font-size: 28rpx;
        color: #353535;
      }
    }

    .zhuibomtxt {
    
    
      display: flex;
      flex-direction: row;
      width: 100%;
      height: 80rpx;
      line-height: 80rpx;
      margin-top: 10rpx;
      font-size: 32rpx;
      color: #888;

      .select {
    
    
        width: 200rpx;
        margin-left: 10rpx;
        text-align: center;
        border-bottom: 1px solid #eee;
      }

      .smselect {
    
    
        width: 120rpx;
      }

      .bomnone {
    
    
        border-bottom: none;
      }
    }

    .nextzhfkjbox {
    
    
      align-items: center;

      .select {
    
    
        position: relative;
        width: auto;
        padding: 0 20rpx;
        height: 52rpx;
        overflow: hidden;
        border: 1px solid @red;
        font-size: 28rpx;
        line-height: 50rpx;
        color: @red;
        text-align: center;
        margin-right: 22rpx;
        border-radius: 10rpx;
        box-sizing: border-box;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-around;
      }
    }

    .addxx {
    
    
      position: absolute;
      right: 30rpx;
      top: 30rpx;
      width: 25rpx;
      height: 25rpx;
      overflow: hidden;
      z-index: 2
    }

    .addtit {
    
    
      font-size: 34rpx;
      line-height: 80rpx;
      // border-bottom: 1px solid #eee;
    }

    .addinp {
    
    
      width: 100%;
      height: 80rpx;
      padding: 0 20rpx;
      box-sizing: border-box;
      font-size: 30rpx;
      line-height: 80rpx;
      margin-top: 40rpx;
      border-bottom: 1px solid #eee;
    }

    .addqueding {
    
    
      width: 200rpx;
      height: 80rpx;
      background: @red;
      font-size: 34rpx;
      color: #fff;
      text-align: center;
      line-height: 80rpx;
      border-radius: 10rpx;
      margin: 50rpx auto 0;
    }
  }

  .xiangcetan {
    
    
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    padding: 140rpx 0 100rpx 0;
    margin: 0;
    background: none;
    border-radius: 0;

    .addxx {
    
    
      position: fixed;
      top: 50rpx;
      left: 50rpx;
      right: 0;
      width: 60rpx;
      height: 60rpx;
    }

    .xiangcesw {
    
    
      position: relative;
      width: 100%;
      height: 100%;
      overflow: hidden;

      .swiper-slide {
    
    
        position: relative;
        width: 100%;
        height: 100%;
        line-height: 100%;
        text-align: center;
        -webkit-box-flex: 1;
        display: table-cell;
        vertical-align: middle;

        .wximg {
    
    
          display: inline;
          max-width: 100%;
          max-height: 90%;
        }
      }
    }

    .xiangcepage {
    
    
      position: absolute;
      width: 100rpx;
      // background:#222;
      right: 20rpx;
      bottom: 0;
      height: 100rpx;
      line-height: 100rpx;
      font-size: 30rpx;
      color: #fff;
    }
  }
}

选项时间计算讲解:

	let zfselidx = e.currentTarget.dataset.index
    let zfdaytime = new Date(this.data.next_zhuifang_day + ' ' + this.data.zhuifang_time) //日期时间
    console.log(zfdaytime.getTime())
    console.log(zfdaytime.getTime() / 1000)
    zfdaytime = parseInt(zfdaytime.getTime() / 1000) //转为时间戳  秒
    
      // console.log(zfdaytime)
      zfdaytime = zfdaytime + 6 * 3600
      zfdaytime = new Date(zfdaytime * 1000) //转为时间戳
      // console.log(zfdaytime)
      this.setData({
    
    
        next_zhuifang_day: util.formatDate(zfdaytime),
        zhuifang_time: util.formatTime(zfdaytime),
        weekday: util.getWeek(util.formatDate(zfdaytime)),
      })

将当前选择的时间 转成时间戳后 再相应的计算 ,之后,再转回时间,对应的赋值便可。

猜你喜欢

转载自blog.csdn.net/ws19900201/article/details/109204749