阿里云购买网站空间,做网站怎么插音乐循环,百度云网盘官网,wordpress 开关 边栏 选择 模板目录
一、简介
二、前端职责
三、开发步骤
四、技术选型
五、页面展示 一、简介
做一个网站时#xff0c;能看到的一切都是前端程序员的工作#xff0c;负责网页或者app的结构、样式、用户操作网站时的事件逻辑#xff08;比如点击一个按钮#xff09;。
二、前端职…目录
一、简介
二、前端职责
三、开发步骤
四、技术选型
五、页面展示 一、简介
做一个网站时能看到的一切都是前端程序员的工作负责网页或者app的结构、样式、用户操作网站时的事件逻辑比如点击一个按钮。
二、前端职责
前端程序员工作职责 ①和产品经理沟通需求按照产品经理要求完成相应功能。 ②和UI设计师沟通样式按照UI设计图还原样式。 ③和后端协作对接后端api接口进行调试进行登录验证以及根据用户操作数据的增删改查。
三、开发步骤
从0-1开发一个前端项目我们需要经历11个步骤。
具体步骤有 其中有几个步骤详细说明一下
四、技术选型
前端目前主要使用的技术有 ①前端运行环境Node.jsnpm是Node.js的官方包管理工具 ②框架Vue、React、Uniapp、微信原生小程序框架、bootstrap、Angular等 ③结构HTML ④样式CSS、CSS预处理器Scss、Less、Stylus ⑤逻辑JavaScriptECMAScript、Bom、Dom ⑥代码分布式存储工具Git、远程库Gitee、Github、阿里云、腾讯云 ⑦打包工具Webpack、Vite ⑧调试工具Chrome DevTools(谷歌浏览器调试工具可以调试手机端电脑端)、微信开发者工具用来调试微信小程序、企业微信小程序、小游戏 ⑨兼容性电脑端各种尺寸的电脑、各种厂家的浏览器的样式和方法、手机端Android、iOS、Harmony等手机系统的差异 、响应式开发 ⑩浏览器谷歌google chrome、360、火狐Firefox、Microsoft Edge、Safari
五、页面展示
这是一个Web前端页面
使用Node.js环境、vue框架、LessCSS预处理器、谷歌浏览器展示。 这是一个微信小程序页面
使用Node.js环境、Uniapp框架vue3版本、ScssCSS预处理器、微信开发者工具展示。 这是相应前端代码
template!-- 左右滑动切换月份 --view touchstarthandleTouchStart touchendhandleTouchEndview classtitleBoxview classtitle{{ currentYear }}.{{ currentMonth }}/view/viewview classweekview v-for(item, index) in week :keyindex{{ item }}/view/view!-- 日历 --view classcalendarbBoxview classsingleDay v-for(item, index) in state.currentMonthAllDate :keyindex tapselectedDate(item.date)!-- 不是当前月日期 classdayTextB,如果选中则跳转至所属月份--text classdayTextB v-ifitem.month ! current{{ item.number }}/text!-- 没有选中当前日期classdayText选中当前日期classdayTextA--text classdayTextA v-ifitem.month current String(state.currentToday) String(item.date){{ item.number }}/texttext classdayText v-ifitem.month current String(state.currentToday) ! String(item.date){{ item.number }}/text!-- 当天有计划当前日期没有选中的标志 --view classpoint v-ifitem.isPlan/view!-- 当前日期选中的标志 --view classselectedDayBGColor v-ifString(state.currentToday) String(item.date)/view!-- 当天有计划当前日期选中的标志 --view classpointA v-ifString(state.currentToday) String(item.date) item.isPlan/view/view/view!-- 箭头 箭头向下展示周箭头向上展示月--view classarrowBoxview classarrowButtonRegion tapchangeShowWeekOrMonth周/月/view/view/view
/templatescript setupimport { reactive, toRefs, computed, onMounted, ref } from vue;
import { useStore } from vuex;
import { onLoad, onHide } from dcloudio/uni-app;const store useStore();
const state reactive({week: [日, 一, 二, 三, 四, 五, 六],currentYear: ,currentMonth: ,currentToday: ,// 0周日1周一monthFirstDayCurrentWeek: ,monthFinallyDayCurrentWeek: ,//currentMonthAllDate里面是一个一个的对象 对象属性number当前日期isPlan当天是否有计划month是否是当前月里面的日期因为要显示不同的样式。还以根据需要在添加其他属性。currentMonthAllDate: [],lastMonthDateNumber: 0,nextMonthDateNumber: 0,// showMonthOrWeek为true,代表显示周false显示月showMonthOrWeek: true,currentTodayDate: ,initialX: ,currentMonthNum:
});
const {currentMonthNum,initialX,currentTodayDate,showMonthOrWeek,lastMonthDateNumber,nextMonthDateNumber,currentMonthAllDate,week,currentMonth,currentYear,currentToday,monthFirstDayCurrentWeek,monthFinallyDayCurrentWeek
} toRefs(state);// 今天凌晨
state.currentTodayDate new Date(new Date(new Date().toLocaleDateString()).getTime());/*** 记录手指触碰初始位置*/
const handleTouchStart (event) {state.initialX event.changedTouches[0].clientX;
};/*** 左右滑动事件*/
const handleTouchEnd (event, index) {const currentX event.changedTouches[0].clientX;if (currentX - state.initialX 20) {//往右滑动上个月state.currentTodayDate state.currentMonth 1 ? new Date(${state.currentYear - 1}/12/1) : new Date(${state.currentYear}/${state.currentMonthNum - 1}/1);getAllDatesOfCurrentMonth(state.currentTodayDate);return;}if (state.initialX - currentX 20) {// 往左滑动下个月state.currentTodayDate state.currentMonth 12 ? new Date(${state.currentYear 1}/1/1) : new Date(${state.currentYear}/${state.currentMonthNum 1}/1);getAllDatesOfCurrentMonth(state.currentTodayDate);return;}
};/*** 选中哪天*/
const selectedDate (date) {state.currentTodayDate date;getAllDatesOfCurrentMonth(state.currentTodayDate);// 下面去后端请求计划数据并展示
};/*** 切换显示周还是月*/
const changeShowWeekOrMonth () {state.showMonthOrWeek !state.showMonthOrWeek;getAllDatesOfCurrentMonth(state.currentTodayDate);
};/*** 得到当前月份/当前周的所有日期dateData某天日期*/
const getAllDatesOfCurrentMonth (dateData) {state.currentMonthAllDate [];const today new Date(dateData);state.currentToday today;state.currentYear today.getFullYear();state.currentMonthNum today.getMonth() 1;if (today.getMonth() 1 10) {state.currentMonth 0 (today.getMonth() 1);} else {state.currentMonth today.getMonth() 1;}// 上个月总天数const lastMonth new Date(today.getFullYear(), today.getMonth() - 1, 1);state.lastMonthDateNumber new Date(lastMonth.getFullYear(), lastMonth.getMonth() 1, 0).getDate();// 下个月总天数const nextMonth new Date(today.getFullYear(), today.getMonth() 1, 1);state.nextMonthDateNumber new Date(nextMonth.getFullYear(), nextMonth.getMonth() 1, 0).getDate();const dates [];// 用if,else判断显示周还是月if (state.showMonthOrWeek) {// 显示当前选中日期所在周let day today.getDay();let startDate new Date(today.getFullYear(), today.getMonth(), today.getDate() - day);let endDate new Date(today.getFullYear(), today.getMonth(), today.getDate() - day 6);let currentMonthTwo today.getMonth() 1;for (let i startDate; i endDate; ) {let monthFlag ;if (new Date(i).getMonth() 1 currentMonthTwo) {monthFlag current;} else if (new Date(i).getMonth() 1 currentMonthTwo) {monthFlag last;} else {monthFlag next;}dates.push(new Date(i));state.currentMonthAllDate.push({ number: i.getDate(), month: monthFlag, date: new Date(i) });i.setDate(i.getDate() 1);}} else {// 显示当前选中日期所在月const firstDayOfMonth new Date(today.getFullYear(), today.getMonth(), 1);const lastDayOfMonth new Date(today.getFullYear(), today.getMonth() 1, 0);state.monthFirstDayCurrentWeek firstDayOfMonth.getDay();state.monthFinallyDayCurrentWeek lastDayOfMonth.getDay();// 补充上个月显示在本月的天数例如5.1是周三则周日周一周二显示上个月if (state.monthFirstDayCurrentWeek ! 0) {// 判断上个月是不是上一年let isLastYearNumber lastMonth.getMonth() 1 12 ? 1 : 0;for (let i 0; i state.monthFirstDayCurrentWeek; i) {state.currentMonthAllDate.push({number: state.lastMonthDateNumber - state.monthFirstDayCurrentWeek 1,month: last,date: ${state.currentYear - isLastYearNumber}/${lastMonth.getMonth() 1}/${state.lastMonthDateNumber - state.monthFirstDayCurrentWeek 1}});state.lastMonthDateNumber;}}for (let i firstDayOfMonth; i lastDayOfMonth; ) {dates.push(new Date(i));state.currentMonthAllDate.push({ number: dates.length, month: current, date: new Date(i) });i.setDate(i.getDate() 1);}if (state.monthFinallyDayCurrentWeek ! 6) {// 判断下个月是不是下一年let yearNumber nextMonth.getMonth() 1 1 ? 1 : 0;for (let i 0; i 6 - state.monthFinallyDayCurrentWeek; i) {state.currentMonthAllDate.push({ number: i 1, month: next, date: ${state.currentYear yearNumber}/${nextMonth.getMonth() 1}/${i 1} });}}}return dates;
};
getAllDatesOfCurrentMonth(state.currentTodayDate);// 可删除做了几个假数据假装几天有计划的,isPlan为true代表当天有计划。
state.currentMonthAllDate[2].isPlan true;
state.currentMonthAllDate[4].isPlan true;
state.currentMonthAllDate[0].isPlan true;
/scriptstyle scoped langscss
.calendarbBox {width: 735rpx;margin-left: 7.5rpx;display: flex;justify-content: space-around;flex-wrap: wrap;.singleDay {width: 105rpx;height: 87rpx;line-height: 87rpx;color: #333;font-size: 32rpx;font-weight: bold;text-align: center;position: relative;.dayText {position: relative;z-index: 9;}.dayTextA {position: relative;z-index: 9;color: #fff;font-size: 32rpx;font-weight: bold;text-align: center;}.dayTextB {position: relative;z-index: 9;color: #e1e1e1;font-size: 32rpx;font-weight: bold;text-align: center;}.point {width: 12rpx;height: 12rpx;background-color: #00b498;position: absolute;top: 65rpx;left: 50%;transform: translate(-50%, 0);border-radius: 50%;}.selectedDayBGColor {width: 87rpx;height: 87rpx;background-color: #00b498;border-radius: 50%;position: absolute;top: 0;left: 9rpx;}.pointA {width: 12rpx;height: 12rpx;background-color: #fff;position: absolute;top: 65rpx;left: 50%;transform: translate(-50%, 0);border-radius: 50%;}}
}
.transitionTime {transition: transform 0.5s;
}
.arrowBox {width: 750rpx;height: 109rpx;line-height: 109rpx;position: relative;.arrowButtonRegion {width: 100rpx;height: 50rpx;line-height: 50rpx;include fsc();position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);background-color: #00b488;border-radius: 10rpx;color: #fff;font-size: 28rpx;text-align: center;}
}
.titleBox {width: 750rpx;height: 92rpx;background-color: #fff;position: relative;padding-bottom: 60rpx;.title {position: absolute;left: 30rpx;top: 25rpx;color: #333;font-size: 53rpx;font-weight: bold;text-align: left;}
}
.week {width: 750rpx;height: 39rpx;color: #999;font-size: 32rpx;font-weight: bold;text-align: left;display: flex;justify-content: space-around;margin-left: 7.5rpx;margin-bottom: 49rpx;
}
/style
