h5原生js实现一个进度条点击当前进度当前位置高亮

### 回答1：
可以使用 JavaScript 监听点击事件，在点击进度条时获取当前点击位置相对于进度条长度的百分比，并将进度条的宽度设置为该百分比。可以使用 CSS 类来控制进度条高亮显示。

示例代码:

<div id="progress-bar"></div>

<script>
  var progressBar = document.getElementById("progress-bar");

  progressBar.addEventListener("click", function(event) {
    var progress = event.offsetX / this.offsetWidth;
    this.style.width = progress * 100 + "%";
    this.classList.add("highlight");
  });
</script>

CSS:

#progress-bar {
  width: 0%;
  height: 20px;
  background-color: #ddd;
}

#progress-bar.highlight {
  background-color: blue;
}

这段代码实现了点击进度条时，获取当前点击位置相对于进度条长度的百分比，并将进度条的宽度设置为该百分比。并且给进度条增加一个highlight的类来控制高亮显示。

### 回答2：
你可以按照以下步骤来实现一个H5原生JS进度条，并实现点击当前进度时高亮当前位置：

1. 首先，在HTML文件中创建一个进度条的容器，并给它一个固定的宽度和高度，可以是一个 `<div>` 元素。

2. 接下来，在JavaScript文件中获取进度条的容器元素，并为其添加事件监听器，以便在用户点击该进度条时触发相应的函数。

3. 在事件监听器函数中，通过计算鼠标点击的位置与进度条总宽度的比例，得到当前进度的百分比。

4. 使用JS将当前进度的百分比应用到进度条的样式上，比如可以通过设置进度条容器元素的宽度来表示当前进度。同时，还可以为当前进度的位置添加一个高亮的样式。

5. 最后，可以使用CSS来定义高亮样式的类，并在事件监听器函数中通过添加或删除该类来实现当前位置的高亮效果。

这样，当用户点击进度条的某个位置时，会根据当前点击的位置来更新进度条的显示，并高亮显示当前位置。

### 回答3：
要实现一个进度条，可以使用原生的HTML5标签`<progress>`和一些JS的事件监听来实现点击当前进度高亮的效果。

首先，在HTML中添加一个`<progress>`标签：

<progress id="myProgress" value="50" max="100"></progress>

然后，使用JavaScript来监听进度条的点击事件，并将当前位置高亮：

var progressBar = document.getElementById("myProgress");

progressBar.addEventListener("click", function(event) {
  // 获取点击位置的百分比
  var position = event.offsetX / progressBar.offsetWidth;
  
  // 获取进度条当前值
  var currentValue = position * progressBar.getAttribute("max");
  
  // 更新进度条的值
  progressBar.value = currentValue;
  
  // 高亮点击位置
  var progressBarFill = progressBar.querySelector("::-webkit-progress-value");
  progressBarFill.style.backgroundColor = "yellow";
});

以上代码中，我们通过`addEventListener`方法来监听进度条的`click`事件。在事件处理函数中，我们首先计算点击位置的百分比，然后根据百分比更新进度条的值。最后，我们获取进度条的`::-webkit-progress-value`元素，并将其背景颜色设置为黄色，以实现高亮效果。

请注意，这种方法实现的进度条只在支持`<progress>`标签的浏览器中有效，如果需要兼容其他浏览器，可以考虑使用一些第三方的进度条库或自定义样式来实现。