前言
这一周我们将学习一下如何用Javascript来制作一个背单词的简易程序
一、DOM事件
HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应。有了这个据可以对事件做出反应,在事件发生时执行 JavaScript。
二、简易背单词
我们先构造一个方法,在这个方法中我们需要运用一个变量来确定用户究竟想要哪个单词的翻译,然后和上一次一样,我们不能把翻译一开始就打出来,而是要在点击之后才能显示出来,所以我们需要用到document.getElmentById,然后由于有许多个单词,所以我们不能再用if语句,这里我选择了case语句,然后通过变量对应不同的case标签,来选择显示的不同翻译。
在页面部分,我们先用一个中文来展示中文意思,在该中文单词下方写一个p标签,给它定义一个id来对应其case,这样就可以大功告成了,代码如下:
<script>
var text=["first","second","third"];
function changetext(element)
{
var el=document.getElementById(element);
switch(element)
{
case'p1':
el.innerHTML=text[0];
break;
case'p2':
el.innerHTML=text[1];
break;
case'p3':
el.innerHTML=text[2];
break;
}
}
</script>
</head>
<body>
<h1 onclick="changetext('p1')">第一</h1>
<p id="p1"></p>
<h1 onclick="changetext('p2')">第二</h1>
<p id="p2"></p>
<h1 onclick="changetext('p3')">第三</h1>
<p id="p3"></p>
</body>
效果如图所示:
总结
这只是第六周学习的一部分,还有一部分我还没搞懂,等我搞懂了再发上来,我们一起学习进步。