如何將javascript應用於html文檔中的多個元素？

Question

我剛剛開始學習HTML和Javascript，所以這可能真是一個愚蠢的問題，但是我在Google向我發送郵件的任何地方都找不到答案。

我想做的事：

我想在HTML文檔中添加一些參數，該參數接受一個參數（日期），在其上運行我的JavaScript，然后根據該參數更改顏色和文本。

到目前為止我嘗試過的是：

可行的（但非常愚蠢的）解決方案：

  <p id="demo"> </p> 
  <script>
   d = new Date();
   i = new Date(2014,0,19); //This is my "argument"
   var timesince = Math.floor((d.getTime() - i.getTime())/1000/60);
   var unit = "min";
   var colour = '#AAA';
   if (timesince > 60){
     timesince = Math.floor(timesince/60);
     unit = "h";
     if (timesince > 7) colour = '#a46744';
   }
   document.getElementById("demo").innerHTML = timesince.toString()+unit;
   document.getElementById("demo").style.color = colour;
  </script> 

但是顯然，有了這個，我將不得不為每個要使用此元素的元素制作一個腳本，並每次都想一個新的id，並分別更改復制粘貼腳本中的硬編碼參數。 太瘋狂了

因此，我考慮過將其轉換為函數，並為每個元素調用它，但是我不知道該怎么做。 或者，即使有可能。 我找到的所有示例都可以像這樣單擊：

 <a href=javascript:function()>Click</a>

這根本不是我想要的。

我正在尋找的是一種具有這樣的方式：

 <selfdefinedtag arguments=(2014,0,23)></selfdefinedtag>

然后由上面的腳本處理，只是腳本中的i不是硬編碼的，而是由arguments的值初始化的。 並且每個元素的顏色和文本應該是不同的。

所以我的問題是：

我如何轉換i到實際參數？ （我尤其不確定此Date（）構造。）

如何將我的腳本應用於具有不同參數的多個元素？

如果您對我的代碼中有關最佳做法等的一般性批評，我將很高興聽到它們。 到目前為止，我對自己的作品並沒有情感上的依戀，所以請撕碎它。

Answer 1

只是用您的代碼制作一個函數...

function changeElem(y1,m1,d1,elem){
 d = new Date();
   i = new Date(y1,m1,d1,0,0,0); //This is my "argument"
   var timesince = Math.floor((d.getTime() - i.getTime())/1000/60);
   var unit = "min";
   var colour = '#AAA';
   if (timesince > 60){
     timesince = Math.floor(timesince/60);
     unit = "h";
     if (timesince > 7) colour = '#a46744';
   }
   elem.innerHTML = timesince.toString()+unit;
   elem.style.color = colour;
}

它適用於所有的a元素只是做...

var elem = document.getElementsByTagName("a");

[].forEach.call(elem, function(e){
   var y = +e.getAttribute("data-y");
   var m = +e.getAttribute("data-m");
   var d = +e.getAttribute("data-d");
   changeElem(y,m,d,e);
});

（我使用+一元運算符將字符串轉換為數字值， getAttribute將獲取數據屬性。）

而a標簽應該是這樣的

<a href="..." data-y="2014" data-m="0" data-d="19">...</a>