课程名称： 破解JavaScript高级玩法
课程章节： 运算符的妙用以及部分机理解析
主讲老师： Cloud
课程内容：
今天学习的内容包括：
JS运算符的运用
课程收获：
4.1 心得：
var DATE_YEAR = new Date().getFullYear();
var DATE_MONTH = new Date().getMonth() + 1;
var DATE_DAY = new Date().getDate();
var app = new Vue({
el: "#wrap",
data: {
year: '',
month: '',
day: '',
days: {},
systemInfo: {},
weekStr: ['日', '一', '二', '三', '四', '五', '六'],
checkDate: [],
productId: '',
productData: null,
headerStyle:{width: document.body.clientWidth/7-10+'px',height:20+'px'},
bodyStyle:{width: document.body.clientWidth/7-10+'px',height:document.body.clientWidth/7+'px'},
},
created() {
var _this = this;
//默认选中（天）
var day = '';
var amount = '';
var productId = "";
if (day && amount && productId) {
_this.checkDate=[{ chooseproductid: "", "day": day, "amount": amount }];
_this.productId=productId;
}
//console.log(_this.checkDate)
let now = new Date();
let year = now.getFullYear();
let month = now.getMonth() + 1;
console.log(year+'-'+month)
this.createDateListData();
_this.year =year;
_this.month =month;
},
methods : {
getProductData: function (productId, month, year) {
return new Promise((resolve, reject) => {
$.ajax({
url: 'https://sapi.yunlvshuju.com/' + 'api/Order/GetProductBy',
data: {
productId: '1911016095105068',
city: '长沙市',
month: '12',
year:'2019'
},
type: "GET",
dataType: "json",
success(res) {
//console.log(res.data)
resolve(res.data)
},
fail(err) {
reject(err)
}
});
})
},
/**创建日历数据 */
createDateListData: function(setYear, setMonth) {
//全部时间的月份都是按0~11基准，显示月份才+1
let dateArr = []; //需要遍历的日历数组数据
let arrLen = 0; //dateArr的数组长度
let now = setYear ? new Date(setYear, setMonth) : new Date();
let year = setYear || now.getFullYear();
let nextYear = 0;
let month = setMonth || now.getMonth();
//没有+1方便后面计算当月总天数
let nextMonth = (month + 1) > 11 ? 12 : (month + 1);
// console.log("当前选中月nextMonth：" + nextMonth);
//目标月1号对应的星期
let startWeek = getWeek(year, nextMonth, 1); //new Date(year + ',' + (month + 1) + ',' + 1).getDay();
// console.log("目标月1号对应的星期startWeek:" + startWeek);
//获取目标月有多少天
let dayNums = this.getTotalDayByMonth(year, nextMonth); //new Date(year, nextMonth, 0).getDate();
// console.log("获取目标月有多少天dayNums:" + dayNums);
let obj = {};
let num = 0;
if (month + 1 > 11) {
nextYear = year + 1;
dayNums = new Date(nextYear, nextMonth, 0).getDate();
}
var productData = this.getProductData(this.productId, nextMonth, year)
var checkDate=this.checkDate;
productData.then(function (res) {
var productInfo = res;
console.log(res);
for (var j = -startWeek + 1; j <= dayNums; j++) {
var tempWeek = -1;
if (j > 0) {
tempWeek = getWeek(year, nextMonth, j);
//console.log(year + "年" + month + "月" + j + "日" + "星期" + tempWeek);
}
var clazz = '';
if (tempWeek == 0 || tempWeek == 6)
clazz = 'week'
var starttime = new Date(Date.parse(DATE_YEAR + "-" + DATE_MONTH + "-" + DATE_DAY));
var endtime = new Date(Date.parse(year + "-" + nextMonth + "-" + j));
//console.log(nextMonth)
//console.log(DATE_MONTH)
if (endtime < starttime)
//当天之前的日期不可用
clazz = 'unavailable ' + clazz;
else
clazz = '' + clazz
/**如果当前日期已经选中，则变色 */
var date = year + "-" + nextMonth + "-" + j;
if(parseInt(j)<10){
date = year + "-" + nextMonth + "-0" + j;
}
var index = checkItemExist(checkDate, date);
if (index != -1) {
clazz = clazz + ' active';
}
if (productInfo != null) {
var data = productInfo.VacationsProductList;
if (j < productInfo.crrutDay) {
dateArr.push({
chooseProductId: '',
day: j,
class: clazz,
amount: '',
subscribes: []
})
}
else {
for (var i = 0; i < data.length; i++) {
if (j == data[i].day) {
dateArr.push({
chooseProductId: data[i].ProductId,
day: j,
class: clazz,
amount: '￥' + data[i].Price,
subscribes: data[i].ProductSubscribes
})
break;
}
}
}
}
else {
dateArr.push({
chooseProductId: '',
day: j,
class: clazz,
amount: '',
subscribes: []
})
}
}
});
console.log(dateArr)
this.days =dateArr;
},
/**
* 上个月
*/
lastMonthEvent:function(){
//全部时间的月份都是按0~11基准，显示月份才+1
let year = this.month - 2 < 0 ? this.year - 1 : this.year;
let month = this.month - 2 < 0 ? 11 : this.month - 2;
if (month + 1 < DATE_MONTH && year <= DATE_YEAR) {
return;
}
this.year=year;
this.month=(month + 1);
this.createDateListData(year, month);
},
/**
* 下个月
*/
nextMonthEvent:function(){
//全部时间的月份都是按0~11基准，显示月份才+1
let year = this.month > 11 ? this.year + 1 : this.year;
let month = this.month > 11 ? 0 : this.month;
this.year=year;
this.month=(month + 1);
this.createDateListData(year, month);
},
/*
* 获取月的总天数
*/
getTotalDayByMonth: function(year, month) {
month = parseInt(month, 10);
var d = new Date(year, month, 0);
return d.getDate();
},
/**
* 点击日期事件
*/
onPressDateEvent: function (year,month,day,amount,chooseproductid,subscribes) {
console.log("当前点击的日期：" + year + "-" + month + "-" + day + "-" + chooseproductid);
// console.log(e.currentTarget.dataset)
//当前选择的日期为同一个月并小于今天，或者点击了空白处（即day<0），不执行
if ((day < DATE_DAY && month == DATE_MONTH) || day <= 0)
return;
this.checkDate =[];
this.renderPressStyle(year, month, day, amount, chooseproductid, subscribes);
},
renderPressStyle: function (year, month, day, amount, chooseproductid, subscribes) {
var days = this.days;
//渲染点击样式
for (var j = 0; j < days.length; j++) {
var tempDay = days[j].day;
if (tempDay == day) {
var date = year + "-" + month + "-" + day;
var obj = {
day: date,
amount: amount,
chooseproductid: chooseproductid,
subscribes: subscribes
};
var checkDateJson = this.checkDate;
var index = checkItemExist(checkDateJson, date);
if (index == -1) {
checkDateJson.push(obj);
days[j].class = days[j].class + ' active';
} else {
checkDateJson.splice(index, 1);
days[j].class = days[j].class.replace('active',' ');
}
this.checkDate=checkDateJson;
console.log(JSON.stringify(this.checkDate));
// var that=this;
// wx.setStorage({
// key: "pickerdata",
// data: this.data.checkDate,
// success: function () {
// wx.navigateBack(); //返回上一个页面
// }
// })
//把选中数据赋值到页面，且隐藏日期控件
//
//
break;
}
}
this.days=days;
console.log(this.days)
}
}
});
/*
* 获取月的第一天是星期几
*/
function getWeek(year, month, day) {
var d = new Date(year, month - 1, day);
return d.getDay();
}
/**检查数组中是否存在该元素 */
function checkItemExist(arr,value){
if (typeof(arr) != "undefined")
{
for (var i = 0; i < arr.length; i++) {
if (value === arr[i].day) {
return i;
}
}
}
return -1;
}
html {
height: 100%;
font-family: SourceHanSansCN-Normal;
overflow-y: scroll;
}
body {
/* display: flex;
flex-direction: column; */
min-height: 100%;
margin: 0;
padding: 0;
position: relative;
cursor:default;
overflow: hidden;
min-width:980px;
}
ol,
li,
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
p {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: #333;
}
#wrap {
padding-bottom: 261px;
}
.nav-bar {
border-bottom: solid 1px #e5e5e5;
width: 100%;
min-width:980px
}
.nav_bar_logo {
width: 135px;
height: 40px;
float: left;
}
.nav_bar_content {
z-index: 27;
min-width: 980px;
max-width: 1190px;
height: 70px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
}
.set_list {
float: left;
font-size: 14px;
padding-left: 60px;
}
footer {
width: 100%;
min-width:980px;
height: 261px;
position: absolute;
bottom: 0px;
left: 0px;
background: #333;
}
.footer_info {
min-width: 980px;
max-width: 1190px;
margin: 0 auto;
color: #fff;
font-size: 12px;
margin-top: 40px;
}
.about_company {
display: flex;
justify-content: space-between;
margin-bottom: 30px;
}
.about_company img{
width: 111px;
height: 127px;
margin-left: 20px;
}
.scan_img_list{
margin-left: -20px;
}
.footer_info_title {
font-size: 20px;
margin-bottom: 20px;
line-height: 1;
}
.footer_info li {
color: #fff;
margin-bottom: 18px;
}
.contact_phone {
font-size: 30px;
font-weight: bold;
margin-top: 16px;
margin-bottom: 18px;
}
.other_contact {
line-height: 20px;
}
.copyright {
text-align: center;
}
.copyright a{
color: #fff;
}
.base_bd {
min-width: 980px;
max-width: 1190px;
margin: 60px auto;
}
.company_describe{
display: flex;
}
.company_img {
max-width: 498px;
min-width: 498px;
height: 658px;
margin-right: 103px;
}
.company_describe_text {
max-width: 476px;
min-width: 476px;
font-size: 16px;
line-height: 32px;
}
.company_describe h1 {
text-align: center;
margin-bottom: 53px;
margin-top: 23px;
font-size: 32px;
}
.company_describe p {
margin-bottom: 74px;
}
随时随地看视频
