JS+Vue 常见用法（3）-- 日期 时间
2019-03-14 本文已影响7人
zlf_j
- 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、时间戳与日期格式的相互转换
https://www.cnblogs.com/crf-Aaron/archive/2017/11/16/7844462.html - 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>
