如何将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>