展现运动类型

  • 同样,我们通过函数的方式将运动类型插入我们的HTML代码中
javascript 复制代码
 _renderWorkout(workout) {
    let html = `
    <li class="workout workout-${workout.type}" data-id="${workout.id}">
            <h2 class="workout__title">${workout.description}</h2>
            <div class="workout__details">
              <span class="workout__icon">${
                workout.type === 'running' ? '🏃‍♂️' : '🚴‍♀️'
              }</span>
              <span class="workout__value">${workout.distance}</span>
              <span class="workout__unit">km</span>
            </div>
            <div class="workout__details">
              <span class="workout__icon">⏱</span>
              <span class="workout__value">${workout.duration}</span>
              <span class="workout__unit">min</span>
            </div>
    `;
    if (workout.type === 'running')
      html += `
      <li>
         <div class="workout__details">
            <span class="workout__icon">⚡️</span>
            <span class="workout__value">${Workout.pace.toFixed(1)}</span>
            <span class="workout__unit">min/km</span>
          </div>
          <div class="workout__details">
            <span class="workout__icon">🦶🏼</span>
            <span class="workout__value">${workout.cadence}</span>
            <span class="workout__unit">spm</span>
          </div>`;
    if (workout.type === 'cycling')
      html += `
         <div class="workout__details">
            <span class="workout__icon">⚡️</span>
            <span class="workout__value">${Workout.speed.toFixed(1)}</span>
            <span class="workout__unit">min/km</span>
          </div>
          <div class="workout__details">
            <span class="workout__icon">🦶🏼</span>
            <span class="workout__value">${workout.elevationGain}</span>
            <span class="workout__unit">spm</span>
          </div>
          </li>`;
  }
}
  • 这里主要注意我们需要把相同的部分和不通的部分分开这么写就行了,然后把数据变化的地方用模板自变量的方式来写入即可,非常简单,就废话不多说了,这里有个月份的读取,上面的代码需要修改一下来让我们读取到现在的月份和日
js 复制代码
  _setDescription() { //私有方法
    // prettier-ignore
    
    const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
    this.description = `${this.type[0].toUpperCase()}${this.type.slice(1)} on ${
      months[this.date.getMonth()]//获取月份 
    } ${this.date.getDate()}`; //获取日期
  }
  • 现在我们HTML的模板已经做好,现在我们只需要知道我们如何或者说在哪里去插入我们的html就可以了
js 复制代码
  form.insertAdjacentHTML('afterend', html);//将html插入到form后面
  • 这样就将表单完全的展现出来了
  • 然后,不要忘记,每次输入时候隐藏表单,并清空上一次输入内容,方便我们的下一次输入
js 复制代码
    // 隐藏表单并清空输入
    this._hideForm();

  _hideForm() {
    //清空表单
    inputDistance.value =
      inputDuration.value =
      inputCadence.value =
      inputElevation.value =
        '';
    //隐藏表单
    form.style.display = 'none';
    form.classList.add('hidden');
    //一秒可后显示表单
    setTimeout(() => (form.style.display = 'grid'), 1000);
  }
相关推荐
Deepsleep.4 分钟前
react和vue的区别之一
javascript·vue.js·react.js
突头小恐龙8 分钟前
Chrome devTools - Lighthouse
前端·javascript·chrome
谦谦橘子8 分钟前
手写tiny webpack,理解webpack原理
前端·javascript·webpack
zqlcoding11 分钟前
使用el-table表格动态渲染表头数据之后,导致设置fixed的列渲染出现问题
前端·javascript·vue.js
海底火旺11 分钟前
破解二维矩阵搜索难题:从暴力到最优的算法之旅
javascript·算法·面试
爱吃的强哥22 分钟前
vue3 使用 vite 管理多个项目,实现各子项目独立运行,独立打包
前端·javascript·vue.js
涵信31 分钟前
第十节:性能优化高频题-虚拟DOM与Diff算法优化
javascript·vue.js·性能优化
拖孩37 分钟前
【Nova UI】十一、组件库中 Icon 组件的测试、使用与全局注册全攻略
前端·javascript·vue.js·ui·sass
天天扭码1 小时前
深入解析 JavaScript 中的每一类函数:从语法到对比,全面掌握适用场景
前端·javascript·面试
北上ing2 小时前
同一页面下动态加载内容的两种方式:AJAX与iframe
前端·javascript·ajax