您的位置:首页 > 科技 > 能源 > ae射频电源成色_behance设计官网网址_推广方案万能模板_广州线下培训机构停课

ae射频电源成色_behance设计官网网址_推广方案万能模板_广州线下培训机构停课

2024/12/23 10:27:40 来源:https://blog.csdn.net/weixin_42952508/article/details/144175216  浏览:    关键词:ae射频电源成色_behance设计官网网址_推广方案万能模板_广州线下培训机构停课
ae射频电源成色_behance设计官网网址_推广方案万能模板_广州线下培训机构停课

● 现在我们需要根据我们之前规划的架构步骤来实现在用户界面创建一个运动类型
● 首先我们在要获取用户在表单中输入的数据

 //从表单中获取数据const type = inputType.value;const distance = +inputDistance.value;const duration = +inputDuration.value;

● 然后针对与不同的运动类型来判断用户的输入是否正确

//如果是跑步运动类型,创建跑步运动对象if (type === 'running') {const cadence = +inputCadence.value;if (!Number.isFinite(distance) || //输入的必须是属于否则报错!Number.isFinite(duration) ||!Number.isFinite(cadence))return alert('输入的值必须是数字!');}//如果是骑行运动类型,创建骑行运动对象if (type === 'cycling') {const elevation = +inputElevation.value;if (!Number.isFinite(distance) ||!Number.isFinite(duration) ||!Number.isFinite(elevation))return alert('输入的值必须是数字!');}

在这里插入图片描述

● 上面的写法明显违背了我们的不重复原则,所以我们更换一种写法

//提交表单之后生成新的运动_newWorkout(e) {
//判断输入的值是否为数字,...inputs是一个剩余参数语法,把所有参数都放在一个数组里面const validInputs = (...inputs) =>//every方法,判断数组中的每个元素是否都满足条件,都满足返回true,否则返回falseinputs.every(inp => Number.isFinite(inp));e.preventDefault(); //组织表单默认行为//从表单中获取数据const type = inputType.value;const distance = +inputDistance.value;const duration = +inputDuration.value;//如果是跑步运动类型,创建跑步运动对象if (type === 'running') {const cadence = +inputCadence.value;if (//判断输入的值是否为数字!validInputs(distance, duration, cadence))return alert('输入的值必须是数字!');}//如果是骑行运动类型,创建骑行运动对象if (type === 'cycling') {const elevation = +inputElevation.value;if (!validInputs(distance, duration, elevation))return alert('输入的值必须是数字!');}

● 当然,这些数据并不是只要是数字就行了,还要不是负数,我们用相同的方法来书写

_newWorkout(e) {//判断输入的值是否为数字,...inputs是一个剩余参数语法,把所有参数都放在一个数组里面const validInputs = (...inputs) =>//every方法,判断数组中的每个元素是否都满足条件,都满足返回true,否则返回falseinputs.every(inp => Number.isFinite(inp));//判断输入的值是否为正数const allPositive = (...inputs) => inputs.every(inp => inp > 0);e.preventDefault(); //组织表单默认行为//从表单中获取数据const type = inputType.value;const distance = +inputDistance.value;const duration = +inputDuration.value;//如果是跑步运动类型,创建跑步运动对象if (type === 'running') {const cadence = +inputCadence.value;if (//判断输入的值是否为数字!validInputs(distance, duration, cadence) ||!allPositive(distance, duration, cadence))return alert('输入的值必须是数字且必须为正数!');}//如果是骑行运动类型,创建骑行运动对象if (type === 'cycling') {const elevation = +inputElevation.value;if (!validInputs(distance, duration, elevation) ||!allPositive(distance, duration))return alert('输入的值必须是数字且必须为正数!');}

在这里插入图片描述

● 现在我们就需要创建运动对象,并将数据存入进去

 const type = inputType.value;const distance = +inputDistance.value;const duration = +inputDuration.value;const { lat, lng } = this.#mapEvent.latlng; //获取点击地图的经纬度let workout;//如果是跑步运动类型,创建跑步运动对象if (type === 'running') {const cadence = +inputCadence.value;if (//判断输入的值是否为数字!validInputs(distance, duration, cadence) ||!allPositive(distance, duration, cadence))return alert('输入的值必须是数字且必须为正数!');workout = new Running([lat, lng], distance, duration, cadence); //创建跑步运动对象}//如果是骑行运动类型,创建骑行运动对象if (type === 'cycling') {const elevation = +inputElevation.value;if (!validInputs(distance, duration, elevation) ||!allPositive(distance, duration))return alert('输入的值必须是数字且必须为正数!');workout = new Cycling([lat, lng], distance, duration, elevation); //创建骑行运动对象}//创建新的对象到workout数组中this.#workouts.push(workout);

在这里插入图片描述

数据已经正常可以拿到了;

● 然后通过修改type,来改变CSS样式

class Running extends Workout {//继承Workout类type = 'running';constructor(coords, distance, duration, cadence) {super(coords, distance, duration); //调用父类构造函数this.cadence = cadence;this.calcPace();}//计算配速calcPace() {this.pace = this.duration / this.distance;return this.pace;}
}class Cycling extends Workout {type = 'cycling';constructor(coords, distance, duration, elevationGain) {super(coords, distance, duration);this.elevationGain = elevationGain;this.calcSpeed();}//计算速度calcSpeed() {this.speed = this.distance / (this.duration / 60);return this.speed;}
}renderWorkoutMarker(workout) {L.marker(workout.coords).addTo(this.#map).bindPopup(L.popup({maxWidth: 250,minWidth: 100,autoClose: false,closeOnClick: false,className: `${workout.type}-popup`,})).setPopupContent('运动').openPopup();}
}

在这里插入图片描述

● 下篇文章将在地图上展现项目,并且消除一些关闭表单的一些小问题

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com