Question

我刚刚开始学习HTML和Javascript，所以这可能会成为一个愚蠢的问题，但我找不到谷歌发给我的答案。

我想做什么：

我希望在我的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>

如何将javascript应用于html文档中的多个元素？

1 个答案: