JS常见用法（3）-- 日期/时间操作

1、获取当前时间，日期格式为：年/月/日/时/分/秒

var year = date.getFullYear();
var month = date.getMonth() + 1;
var day = date.getDate();
var hour = date.getHours();
var minute = date.getMinutes();
var seconds = date.getSeconds();
if (month < 10) {
  month = "0" + month;
}
if (day < 10) {
 day = "0" + day;
}
if (hour < 10) {
   hour = "0" + hour;
}
if (minute < 10) {
  minute = "0" + minute;
}
if (seconds < 10) {
  seconds = "0" + seconds;
}
this.date = year + '/' + month + '/' + day + '/' + hour + '/' + minute + '/' + seconds

https://www.cnblogs.com/mmcm/p/5868176.html

2、时间戳与日期格式的相互转换

时间戳转为日期格式

// 时间戳转日期
        formatDate (time) {
            let now = new Date(time*1000) // 时间戳为10位时，需要乘1000
            let year = now.getFullYear();
            let month = (now.getMonth()+1)>9?now.getMonth()+1:'0'+(now.getMonth()+1);
            let date = now.getDate()>9?now.getDate():'0'+now.getDate();
            let hour = now.getHours()>9?now.getHours():'0'+now.getHours();
            let minute = now.getMinutes()>9?now.getMinutes():'0'+now.getMinutes();
            let second = now.getSeconds()>9?now.getSeconds():'0'+now.getSeconds();
            return year+"-"+month+"-"+date+" "+hour+":"+minute+":"+second;
        }

https://www.cnblogs.com/crf-Aaron/archive/2017/11/16/7844462.htm

3、定时器（this.frame_length满24为1秒）

<div class="time_div">
      <span id="hour">{{hours}}</span>:
       <span id="minute">{{minutes}}</span>:
       <span id="seconds">{{seconds}}</span>:
       <span id="frame_length">{{frame_length}}</span>
</div>
<button  @click="startTime">开始</button>
<button  @click="endTime">结束</button>
// 开始计时 
<script>
export default {
data () {
    return {
      hours: '',
      minutes: '',
      seconds: '',
      frame_length: '', 
      setTime: ''  // 定时器
    }
 },
methods: {
  startTime () {
    this.setTime = setInterval(this.end, 1000/24)
  },
  end () {
      this.frame_length++
      if(this.frame_length > 24){
        this.frame_length = 0;
        this.seconds++;
        if (this.seconds < 10) {
          this.seconds = '0' + this.seconds;
        }
      }
      if(this.seconds > 59) {
        this.seconds = 0;
        this.seconds = '0' + this.seconds;
        this.minutes++;
        if (this.minutes < 10) {
          this.minutes = "0" + this.minutes;
        }
      }
      if (this.minutes > 59) {
        this.minutes = 0;
        this.minutes = '0' + this.minutes;
        this.hours++;
        if (this.hours < 10) {
          this.hours = "0" + this.hours;
        }
      }
      if (this.hours > 24) {
        this.hours = 0;
        this.hours = '0' + this.hours;
      }

      if (this.frame_length < 10) {
        this.frame_length = "0" + this.frame_length;
      }
  },
  // 计时结束
  endTime () {
     clearInterval(this.setTime)
   },
 }
}
<script>

参考：https://blog.csdn.net/qq_35310623/article/details/81100679

4、移动端滑动选择时间

屏幕快照 2019-03-14 下午3.18.00.png

<body>
<div class="time_div" @click="selectTime">
            <span id="hour">{{hours}}</span>:
            <span id="minute">{{minutes}}</span>:
            <span id="seconds">{{seconds}}</span>:
            <span id="frame_length">{{frame_length}}</span>
          </div>
<div class="select_time" v-show="selectShow">
            <span class="time_line"></span>
            <span class="time_line"></span>
            <div>
              <span @click="cancelSelect">取消</span>
              <span>请选择时间</span>
              <span @click="sureTime">确定</span>
            </div>
            <div class="box">
              <ul id="scrollUl" class="scrollUl">
                <li class="scrollLi" v-for="(item, index) in timeNum2" :key="index">
                  <label for="" class="label">{{item}}</label>
                </li>
              </ul>
              <ul id="scrollUl2" class="scrollUl">
                <li class="scrollLi2" v-for="(item, index) in timeNum" :key="index">
                  <label for="" class="label2">{{item}}</label>
                </li>
              </ul>
              <ul id="scrollUl3" class="scrollUl">
                <li class="scrollLi3" v-for="(item, index) in timeNum" :key="index">
                  <label for="" class="label3">{{item}}</label>
                </li>
              </ul>
              <ul id="scrollUl4" class="scrollUl">
                <li class="scrollLi4" v-for="(item, index) in timeNum2" :key="index">
                  <label for="" class="label4">{{item}}</label>
                </li>
              </ul>
            </div>
          </div>
</body>
<style>
/* 时间下拉 */
  .select_time {
    width: 33%;
    position: absolute;
    right: 0;
    top: 5rem;
    padding:0.8rem 16% 0 8%;
    height:4rem;
    background: #fff;
    z-index: 1;
  }
  .select_time .time_line {
    display: inline-block;
    width:100%;
    height:1px;
    background: #979797;
    position:absolute;
    left:0;
  }
  .time_line:nth-of-type(1) {
    top:2.4rem;
  }
  .time_line:nth-of-type(2) {
    top:3.1rem;
  }

  .select_time >div:nth-of-type(1) {
    width:90%;
    padding:0 5%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height:0.8rem;
    background: #D8D8D8;
    position:absolute;
    top:0;
    left:0;
    color: #fff;
  }
  .select_time >div:nth-of-type(2) {
    width:100%;
    display: flex;
    height:96%;
    padding: 1%;
    overflow: hidden;
  }
  .select_time ul {
    width: 22%;
    margin-right: 4%;
    box-sizing: border-box;
    height: 3.8rem;
    list-style: none;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 100px 0;
  }
  .select_time ul li {
    color: #9B9B9B;
    font-size:0.3rem;
    text-align: center;
    height: 0.75rem ;
    line-height:0.75rem;
  }
  .scrollUl::-webkit-scrollbar {
    display: none;
  }
.time_div {
    width:60%;
    line-height:1.7rem;
    text-align: center;
    font-family: Silom;
    font-size: 0.7rem;
    color: #FF0000;
  }
</style>  
<script>
data () {
  return {
      hours: '',
      minutes: '',
      seconds: '',
      frame_length: '', 
      timeNum: [], // 0-59
      timeNum2: [], //  0-24
      selectShow: false, // 时间下拉显示
      prev_hour: '', // 下拉选择前的数据
      prev_minute: '',
      prev_seconds: '',
      prev_frame: ''
  }
}
methods: {
// 时间切换
    scroll (id, name, liname, spanId) {
      // 滚动事件
      var ul = document.getElementById(id);
      var change = "";
      var size = document.getElementsByClassName(liname).length;
      ul.addEventListener("scroll", function () {
        var num = (ul.scrollTop + ul.clientHeight - 200) / (ul.scrollHeight - 200) * size;
        change = num;
        setTimeout(function () {
          if (change === num) {
            num = Math.ceil(num) - 1;
            let objs = document.getElementsByClassName(name)
            for (var i = 0; i <size; i++) {
              objs[i].style.color = '#9B9B9B'
              objs[i].style.fontSize = 0.3 + 'rem'
            }
            let obj = document.getElementsByClassName(name)[num]
            obj.style.color= '#000'
            obj.style.fontSize = 0.35 + 'rem'
            $(spanId).text(obj.innerHTML); // 给标签赋值

            var distance = num / size * (ul.scrollHeight - 200) - ul.scrollTop;
            for (var i = 0; i < distance; i++) {
              setTimeout(function () {
                ul.scrollTop = ul.scrollTop + distance / Math.abs(distance);
              }, 100);
            }
          }
        }, 500);
      });
      // 点击事件
      var li = document.getElementsByClassName(liname);
      for (var n = 0; n < li.length; n++) {
        li[n].setAttribute("index", n);
        li[n].addEventListener("click", function () {
          var nav = this.getAttribute("index");
          var distance = nav / size * (ul.scrollHeight - 200) - ul.scrollTop;
          for (var i = 0; i < distance; i++) {
            setTimeout(function () {
              ul.scrollTop = ul.scrollTop + 1 * distance / Math.abs(distance);
            }, 100);
          }
        });
      }
    },
// 显示下拉
    selectTime () {
      this.selectShow = true
      // 保存修改前的值
      this.prev_hour = this.hours
      this.prev_minute = this.minutes
      this.prev_seconds = this.seconds
      this.prev_frame = this.frame_length
      // 展示时间下拉时，显示当前时间（scrollTop自己调整）
      this.$nextTick(() => {
        document.getElementById('scrollUl').scrollTop = (this.hours - 2) * 48 + 100
        document.getElementById('scrollUl2').scrollTop = (this.minutes - 2) * 48 + 100
        document.getElementById('scrollUl3').scrollTop = (this.seconds - 2) * 48 + 100
        document.getElementById('scrollUl4').scrollTop = (this.frame_length - 2) * 48 + 100
      })
    },
// 取消时间下拉
    cancelSelect () {
      this.selectShow = false
      // 恢复修改前的数值
      this.hours = this.prev_hour
      this.minutes = this.prev_minute
      this.seconds = this.prev_seconds
      this.frame_length = this.prev_frame
    },
    // 确认
    sureTime () {
      this.selectShow = false
     // 保存当前修改的时间
      this.hours = $('#hour').text();
      this.minutes = $('#minute').text();
      this.seconds = $('#seconds').text();
      this.frame_length = $('#frame_length').text();
    }
},
mounted () {
   // 滑动时调用
    this.scroll('scrollUl', 'label', 'scrollLi', '#hour')
    this.scroll('scrollUl2', 'label2', 'scrollLi2', '#minute')
    this.scroll('scrollUl3', 'label3', 'scrollLi3', '#seconds')
    this.scroll('scrollUl4', 'label4', 'scrollLi4', '#frame_length')
  },
</script>

参考：https://blog.csdn.net/qwe111qsx/article/details/80859221

5、获取昨天，今天，明天

        let date = new Date()
        let today = date.getFullYear() + '-' + (date.getMonth() + 1 > 9 ? date.getMonth() + 1 : '0' + (date.getMonth() + 1)) + '-' + (date.getDate() > 9 ? date.getDate() : '0' + date.getDate()) + ' 10:00:00';
        let date2 = new Date()
        date2.setDate(date.getDate() + 1);  // 计算昨天，减1
        let tomorrow = date2.getFullYear() + '-' + (date2.getMonth() + 1 > 9 ? date2.getMonth() + 1 : '0' + (date2.getMonth() + 1)) + '-' + (date2.getDate() > 9 ? date2.getDate() : '0' + date2.getDate()) + ' 10:00:00';
        this.form.time_frame = [today, tomorrow] // 默认时间为今天早上十点到明天早上十点

https://www.cnblogs.com/sxxjyj/p/6093326.html

时间格式 2016-08-15T16:00:00.000Z

https://blog.csdn.net/m0_37983376/article/details/78202770

JS中Date.parse方法返回NaN解决方案

https://www.cnblogs.com/treerain/p/Javascrip_Date.html

js 根据日期判断周几

var weekDay = ["星期天", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];  
var myDate = new Date(Date.parse("2018/5/19"));  
console.log(weekDay[myDate.getDay()]);    // 星期六

https://blog.csdn.net/m0_37793545/article/details/80395351

当前时间，实时刷新（定时器 setInterval）

注意：

beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer); // 在Vue实例销毁前，清除我们的定时器
    }
  }

https://www.cnblogs.com/lidonglin/p/11362384.html

倒计时

https://www.jianshu.com/p/c1b1d8df4a35

获取第二天的时间

https://www.xuebuyuan.com/1038866.html

JS常见用法（3）-- 日期/时间操作

1、获取当前时间，日期格式为：年/月/日/时/分/秒

2、时间戳与日期格式的相互转换

3、定时器 （this.frame_length满24为1秒）

4、移动端滑动选择时间

5、获取昨天，今天，明天

时间格式 2016-08-15T16:00:00.000Z

JS中Date.parse方法返回NaN解决方案

js 根据日期判断周几

当前时间，实时刷新（定时器 setInterval）

倒计时

获取第二天的时间

3、定时器（this.frame_length满24为1秒）