这并不简单，但是您可以从下面的代码中学到很多东西。
组件：

• Event handling
• document.querySelectorAll
• data-attributes
• template literals
• ternary/conditional operaot
• destructuring

const avgWalk = 4; // km/h
const ascWalk = 2;
const dscWalk = 4.5;
const decimalHoursToHHMM = num => { 
  let n = new Date(0,0); 
  n.setSeconds(+num * 60 * 60); // convert to seconds
  let [HH,MM] =  n.toTimeString().slice(0, 5).split(":"); // convert to HH:MM and spread the result to HH and MM
  return +HH === 0 ? `${+MM}m` : `${+HH}h${+MM}m`; // using template literals
};
// Calculate walking time from distance, ascent and descent 
// and display this and other info at point the function is called.

const Walking = ([distance, ascent, descent]) => decimalHoursToHHMM(
    (distance/1000)/avgWalk - 
    (ascent/1000)/ascWalk + 
    (descent/1000)/dscWalk);

window.addEventListener("DOMContentLoaded", () => { // when page has loaded
  document.querySelectorAll(".calc")  // all elements with class "calc"
   .forEach(span => span.textContent = Walking(JSON.parse(span.dataset.parms))); // use the data-parms for values and set the textContent
})

Walk for <span class="calc" data-parms="[1000, 100, 0]"></span> until you arrive at ... Then walk steeply uphill for
<span class="calc" data-parms="[2500, 1100, 0]"></span> to reach the summit.
Return trip should last <span class="calc" data-parms="[5000, 0, 5000]"></span>.

您可以使用document.currentScript和replaceWith()来替换函数调用脚本元素（例如，使用文本）：

<script>
function addText() {
  document.currentScript.replaceWith(" and added text");
}
</script>

Default text<script>addText();</script>.

请注意，函数需要在调用发生的位置之前定义。