vue开发,js实现获取当前日期,页面渲染当前日期后5天的日期时间

运行效果如下:

全部代码:

//css样式:
<style>
	h5,.div {
		width: 50%;
		line-height: 60px;
		text-align: center;
		margin: 0 auto;
		border: 1px solid #ddd;
	}
	
	.active {
		color: red;
		background-color: #ddd;
	}
</style>


//html代码:
<div id="app">

	<h5>你当前选中的日期是:{{seleDate}}</h5>

	<div class="div" v-for="(item,index) in list" @click="fn(index)" :class="{active:ide ==index}">{{item}}</div>

</div>

//js代码:
<script>
	new Vue({

		el: '#app',

		data: {

			seleDate: '',

			list: [],

			ide: 0 //默认选择第一个

		},

		created: function() { //created:在模板渲染成html前调用,即通常初始化某些属性值,然后再渲染成视图。

			var dateObj = {};

			for(var i = 1; i <= 5; i++) {

				dateObj = this.getDate(i); //把返回的日期赋值给对象

				this.list.push(dateObj); //把对象添加到数组里面,然后渲染到页面

			}

		},

		methods: {

			fn(index) {

				this.ide = index;

				this.seleDate = document.getElementsByClassName('div')[index].innerHTML; //获取当前选中的时间

			},

			getDate(n) {

				var ss = 24 * 60 * 60 * 1000; //一天的毫秒数86400

				var timestamp = new Date().getTime(); //获取当前时间戳

				var date1 = new Date(ss * n + timestamp) //加上n天的国际标准日期

				var newTime = date1.toLocaleString(); //把日期转换成2018/6/4 下午10:45:19 格式

				var arr = newTime.split(" "); //把2018/6/4提取出来

				var arr2 = arr[0].split('/'); //把年月日数字单独提出来

				return arr2[0] + '年' + arr2[1] + '月' + arr2[2] + '日'; //拼接成我们需要的格式返回

			}

		}

	})
</script>





  • 2
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值