目录

展现运动类型

  • 同样,我们通过函数的方式将运动类型插入我们的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);
  }
本文是转载文章,点击查看原文
如有侵权,请联系 xyy@jishuzhan.net 删除
相关推荐
旧识君16 分钟前
移动端1px终极解决方案:Sass混合宏工程化实践
开发语言·前端·javascript·前端框架·less·sass·scss
ElasticPDF-新国产PDF编辑器39 分钟前
Angular use pdf.js and Elasticpdf tutorial
javascript·pdf·angular.js
Carlos_sam1 小时前
Openlayers:海量图形渲染之图片渲染
前端·javascript
你的人类朋友1 小时前
MQTT协议是用来做什么的?此协议常用的概念有哪些?
javascript·后端·node.js
美食制作家2 小时前
【无标题】Threejs第一个3D场景
javascript·three
HelloRevit3 小时前
React DndKit 实现类似slack 类别、频道拖动调整位置功能
前端·javascript·react.js
ohMyGod_1233 小时前
用React实现一个秒杀倒计时组件
前端·javascript·react.js
艾克马斯奎普特4 小时前
Vue.js 3 渐进式实现之响应式系统——第四节:封装 track 和 trigger 函数
javascript·vue.js
JustHappy4 小时前
「我们一起做组件库🌻」虚拟消息队列?message组件有何不同?(VersakitUI开发实录)
前端·javascript·vue.js
Carlos_sam4 小时前
Openlayers:为Overlay创建element的四种方式
前端·javascript·vue.js