vue车辆检测时间计算特效代码下载


vue车辆检测时间计算特效代码下载
vue车辆检测时间计算特效代码下载以及车辆检测、时间计算等js/jquery网页特效代码下载。

1. 引入CSS

<link rel="stylesheet" href="https://apps.51qianduan.com/libs/bootstrap/3.3.4/css/bootstrap.css">

2. 引入JS

<script src="js/vue.min.js"></script>
<script src="js/vue-resource-1.3.4.js" type="text/javascript" charset="utf-8"></script>

3. HTML代码

<div id="app">
<div class="chejian" style="padding: 40px;">
<div class="jsq">
<div class="panel-body form-inline">
<label>
*车辆类型:
</label>
<select v-model="carType" class="form-control">
<option value="">请选择车辆类型</option>
<option value="小型汽⻋">小型汽⻋</option>
<option value="中型汽⻋">中型汽⻋</option>
<option value="大型汽⻋">大型汽⻋</option>
<option value="两三轮摩托⻋">两三轮摩托⻋</option>
<option value="挂⻋">挂⻋</option>
<option value="新能源-小型汽⻋">新能源-小型汽⻋</option>
<option value="新能源-中型汽⻋">新能源-中型汽⻋</option>
<option value="新能源-大型汽⻋">新能源-大型汽⻋</option>
</select>
</div>
<div class="panel-body form-inline">
<label>
*使用类型:
</label>
<select v-model="useType" class="form-control">
<option value="">车辆使用类型</option>
<option value="非营运">非营运</option>
<option value="客运">客运</option>
<option value="货运">货运</option>
<option value="营转非">营转非</option>
<option value="校⻋">校⻋</option>
<option value="教练⻋">教练⻋</option>
<option value="警用">警用</option>
<option value="租赁">租赁</option>
<option value="其他">其他</option>
</select>
</div>
<div class="panel-body form-inline">
<label>
*注册时间: <input type="text" placeholder="2018-03-05" required class="form-control" v-model="registDate" disabled="disabled" />
</label>
</div>
<input type="button" class="btn btn-primary" value="计算" @click="checkDate(carType,useType,registDate)" />
</div>
<div class="jg" style="margin-top: 40px;">
<p>是否在6年中每2年免检:{{ free }}</p>
<p>本监测站是否可以检测:{{ available }}</p>
<p>下次检测时间:{{ nextDate }}</p>
<p>距离今天有多少天:{{ days }}</p>
</div>
</div>
</div>
<script type="text/javascript">
		var app = new Vue({
			el: '#app',
			data: {
				carType: '',
				useType: '',
				registDate: '2018-08-25',
				nextDate: '',
				available: '',
				free: '',
				days: '',
				checkObject: {}
			},
			methods: {
				checkDate() {
					let carType = this.carType
					let useType = this.useType
					let registDate = new Date(this.registDate); //登记日期
					let sysDate = new Date(), day = new Date(), lastday = new Date();
					if (carType == '') {
						alert("请选择车辆类型")
					}
					if (useType == '') {
						alert("请选择使用类型")
					}
					// 小型汽车,小型轿车:乘坐人数小于等于9人
					if (carType == "小型汽⻋") {
						this.available = true
						//将本站是否可以检测添加到对象
						this.checkObject['available'] = true
						console.log("本站可以检测")
						if (useType == "非营运") { // 使用类型: 非营运
							//取6年内的最后一天比较 6年内每24个月检测一次 线下免检
							lastday = this.checkPeriod(registDate, 6);
							// console.log(lastday)
							if (sysDate <= lastday) {
								if (registDate >= new Date("2010/09/01"))
									this.checkDeadline(registDate, sysDate, 24, 1);
								else
									this.checkDeadline(registDate, sysDate, 24, 0);
								return
							}
							//6-15年内 每年检测一次
							lastday = this.checkPeriod(registDate, 15);
							if (sysDate <= lastday) {
								this.checkDeadline(registDate, sysDate, 12, 0);
								return
							}
							//超过15年 每6个月检验一次
							this.checkDeadline(registDate, sysDate, 6, 0);
							return
						} else if (useType == "货运") { // 使用类型: 货运
							//取10年内的最后一天比较 10年内每12个月检测一次
							lastday = this.checkPeriod(registDate, 10);
							if (sysDate <= lastday) {
								this.checkDeadline(registDate, sysDate, 12, 0);
								return
							}
							//超过10年每6个月检验一次
							this.checkDeadline(registDate, sysDate, 6, 0);
							return
						} else { // 使用类型: 客运 营转非 校⻋ 教练⻋ 警用 租赁 其他
							//取5年内的最后一天比较 5年内每12个月检测一次
							lastday = this.checkPeriod(registDate, 5);
							if (sysDate <= lastday) {
								this.checkDeadline(registDate, sysDate, 12, 0)
								return
							}
							//超过5年每6个月检验一次
							this.checkDeadline(registDate, sysDate, 6, 0)
							return
						}
					}
					// 中型汽车:乘坐人数大于9人且小于20人
					// 新能源-中型汽车
					if (carType == "中型汽⻋" || carType == "新能源-中型汽⻋") {
						this.available = true
						//将本站是否可以检测添加到对象
						this.checkObject['available'] = true
						console.log("本站可以检测")
						//取10年内的最后一天比较 10年内每12个月检测一次
						lastday = this.checkPeriod(registDate, 10);
						if (sysDate <= lastday) {
							this.checkDeadline(registDate, sysDate, 12, 0);
							return
						}
						//10年后每6个月检验一次
						this.checkDeadline(registDate, sysDate, 6, 0);
						return
					}
					// 大型汽车:大于等于20人 黄色的车牌
					// 挂车 黄色的车牌(暂定这里)
					// 新能源-大型汽车 黄色的车牌
					if (carType == "大型汽⻋" || carType == "挂⻋" || carType == "新能源-大型汽⻋") {
						this.available = false
						//将本站是否可以检测添加到对象
						this.checkObject['available'] = false
						console.log("本站不可以检测")
						//取10年内的最后一天比较 10年内每12个月检测一次
						lastday = this.checkPeriod(registDate, 10);
						if (sysDate <= lastday) {
							this.checkDeadline(registDate, sysDate, 12, 0);
							return
						}
						//10年后每6个月检验一次
						this.checkDeadline(registDate, sysDate, 6, 0);
						return
					}
					// 两三轮摩托车 黄色的车牌
					if (carType == "两三轮摩托⻋") {
						this.available = false
						//将本站是否可以检测添加到对象
						this.checkObject['available'] = false
						console.log("本站不可以检测")
						//取4年内的最后一天比较 4年内每24个月检测一次
						lastday = this.checkPeriod(registDate, 4);
						if (sysDate <= lastday) {
							this.checkDeadline(registDate, sysDate, 24, 0);
							return
						}
						//4年后每12个月检验一次
						this.checkDeadline(registDate, sysDate, 12, 0);
						return
					}
					// 新能源-小型汽车
					if (carType == "新能源-小型汽⻋") {
						this.available = true
						//将本站是否可以检测添加到对象
						this.checkObject['available'] = true
						console.log("本站可以检测")
						if (useType == "货运") { // 使用类型: 货运
							//取10年内的最后一天比较 10年内每12个月检测一次
							lastday = this.checkPeriod(registDate, 10);
							if (sysDate <= lastday) {
								this.checkDeadline(registDate, sysDate, 12, 0);
								return
							}
							//10年后每6个月检验一次
							this.checkDeadline(registDate, sysDate, 6, 0);
							return
						} else { // 使用类型: 非营运 客运 营转非 校⻋ 教练⻋ 警用 租赁 其他
							//取5年内的最后一天比较 5年内每12个月检测一次
							lastday = this.checkPeriod(registDate, 5);
							if (sysDate <= lastday) {
								this.checkDeadline(registDate, sysDate, 12, 0)
								return
							}
							//超过5年每6个月检验一次
							this.checkDeadline(registDate, sysDate, 6, 0)
							return
						}
					}
				},
				//计算本次检测的截止日期
				checkDeadline(registDate, sysDate, interval, sfmj) {
					// 登记日期  系统日期  检测周期  是否免检
					// var day = new Date(); //获取当前系统时间
					// 假如系统日期年月 和 注册日期年月 相等
					if (sysDate.getFullYear() == registDate.getFullYear() && sysDate.getMonth() == registDate.getMonth())
						//设置下次检测日期年月
						// interval表示检测周期 可以是6,12,24个月(24个月为6年免检周期内的每2年的线下免检)
						//检测日期 = 当前日期 + 检测周期
						day = new Date(sysDate.getFullYear() + interval / 12, sysDate.getMonth() + 1, 1);
					else // 假如系统日期年月 和 注册日期年月 不相等,即注册日期比系统时间早
						// 检测日期 = 当前日期
						day = new Date(sysDate.getFullYear(), sysDate.getMonth()
							+ (12 * (sysDate.getFullYear() - registDate.getFullYear() + 2)
								+ registDate.getMonth() - sysDate.getMonth()) % interval
							+ 1, 1)
					// console.log(day)
					// 算出真正的下次检测截止日期
					let last = new Date(day - 24 * 60 * 60 * 1000)
					// 格式化下次检测日期
					let nextDate = (last.getFullYear() + "-" + (last.getMonth() + 1) + "-" + last.getDate())
					// console.log(nextDate)
					this.nextDate = nextDate
					// 添加到对象
					this.checkObject['nextDate'] = nextDate
					if (last >= new Date("2014/09/01") && sfmj == "1") {
						console.log("您的车辆属于6年内免线下检测")
						this.free = true
						//插入到对象
						this.checkObject['free'] = true
					}
					else {
						console.log("您的车辆不属于6年内免线下检测,请按时去线下检测")
						this.free = false
						//插入到对象
						this.checkObject['free'] = false
					}
					console.log("本次车检截止日期:" + last.getFullYear() + "-" + (last.getMonth() + 1) + "-" + last.getDate())
					// 计算年检剩余天数
					let diff = (last.getTime() - new Date().getTime()) / (24 * 60 * 60 * 1000)
					// console.log(diff)
					if (diff <= 0) {
						console.log("已到期")
					} else {
						let str = diff.toString();
						if (str.indexOf(".") != -1) {
							diff = str.split(".")
							diff = diff[0]
							console.log("距离本次车检截止时间还有" + diff + "天")
							this.days = diff
							// 为车检信息对象添加键值对
							this.checkObject['days'] = diff
							console.log(this.checkObject)
						} else {
							console.log("距离本次车检截止时间还有" + diff + "天")
							this.days = diff
							// 为车检信息对象添加键值对
							this.checkObject['days'] = diff
							console.log(this.checkObject)
						}
					}
				},
				//计算周期内截止日日期,比如6年免检的最后一天,每1年检测一次的5年周期的最后一天等
				checkPeriod(registDate, year) {
					// 登记日期  年限周期(5年,6年,10年,15年)
					return new Date(new Date(registDate.getFullYear() + year, registDate.getMonth() + 1, 1) - (24 * 60 * 60 * 1000))
				}
			}
		})
	</script>

相关推荐

发表评论

相关文章