JavaScript基础DOM操作--在线英文发音

最新推荐文章于 2021-12-24 22:00:15 发布

ren_xiao_an

最新推荐文章于 2021-12-24 22:00:15 发布

阅读量1.6k

点赞数 3

文章标签： JavaScript基础DOM操作--在线英文发音

本文链接：https://blog.csdn.net/qq_41026301/article/details/88092915

版权

一、案例需求
在线英文发音–点击英语单词完成在线英文发音

二、涉及的知识点

DOM事件，本案例主要用的是点击事件
DOM节点操作运用，节点查找操作，节点属性操作
利用document.getElementsByClassName来获取要查找的节点
HTML5的audio元素操作
有道在线语音API的应用
节点元素对象属性textContent，它返回节点的文本内容

三、实现过程
1.编写网页：在线英文发音.html（取少量单词）

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="在线英文发音.css">
  <script src="在线英文发音.js" charset="UTF-8"></script>
 </head>
 <body>
  <div class="banner">
        <p class="title">1小时搞定程序员单词</p>
        <p class="content">集结了600个程序员常用的单词和词汇，让你写代码变量命名 so easy!!!标准伦敦腔，在线朗读，助你告别尴尬，放声交流！！</p>
        <button>还等什么！GOGOGO!</button>
    </div>
    <div class="container">

        <div class="wordItemBox">
            <p class="word">application </p><img class="pronounce" src="pronounce.png" alt="voice">
            <hr>
            <p class="translate">应用程式 应用、应用程序</p>
        </div>
        <div class="wordItemBox">
            <p class="word">application framework </p><img class="pronounce" src="pronounce.png" alt="voice">
            <hr>
            <p class="translate">应用程式框架、应用框架 应用程序框架</p>
        </div>
        <div class="wordItemBox">
            <p class="word">architecture </p><img class="pronounce" src="pronounce.png" alt="voice">
            <hr>
            <p class="translate">架构、系统架构 体系结构</p>
        </div>
        <div class="wordItemBox">
            <p class="word">argument </p><img class="pronounce" src="pronounce.png" alt="voice">
            <hr>
            <p class="translate">引数（传给函式的值）。参见 parameter 参数、实质参数、实参、自变量</p>
        </div>
        <audio id="audio" src="http://dict.youdao.com/speech?audio=hello"></audio>
        </body>
</html>

2.层叠样式表：

/*È«¾Öreset*/
*{
    margin:0px;
    padding: 0px;
}
body{
    background: #333;
    color:#ddd;
    margin-bottom: 100px;
}
input,button{
    border:none;
    outline: none;
}
/*È«¾Öreset½áÊø*/

/*bannerÌõ¿ªÊ¼*/
.banner{
    width: 70%;
    margin: 0 auto;
    margin-top: 30px;
    border-radius: 10px;
    background: #444;
    height: 330px;
    padding: 50px 90px;
    box-sizing: border-box;
}
.banner .title{
    font-size: 60px;
    font-family: ËÎÌå;
    margin-top: 20px;
    margin-bottom: 10px;
    color:white;
    transition:color 0.35s;
}
.banner .title:hover{
    color:#Fc0;
}
.banner .content{
    font-size: 21px;
    font-weight: 200;
    font-family: ËÎÌå;
    margin-bottom: 15px;
}
.banner button{
    padding: 8px 15px;
    font-size: 18px;
    border-radius: 6px;
    background: #Fc0;
    color: #444;
    font-weight: 400;
    transition:background 0.35s;

}
.banner button:hover{
    background: #f90;
}
/*bannerÌõ½áÊø*/

/*µ¥´Ê´óÈÝÆ÷*/
.container{
    width: 70%;
    margin:0 auto;
    margin-top: 50px;
    line-height: 25px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

}

a{
    display: block;
    text-align: center;
    margin-top: 20px;
    font-size: 20px;
    color:#fc0;
    text-decoration: none;

}
.wordItemBox{
    display: inline-block;
    width: 370px;

    border-radius: 10px;
    background: #444;
    padding-left: 15px;
    padding-right: 15px;
    margin-top: 15px;
    padding-bottom: 10px;
    
}
hr{
    height:10px;
    border:none;
    border-top:1px groove #666;
    border-top:1px groove #ddd; 
}
.wordItemBox .word{
    color:#fc0;
    font-size: 24px;
    line-height: 45px;
    display: inline-block;
    padding-right: 10px;
    transition:color 0.35s;
    cursor: pointer;
}
.wordItemBox .word:hover{
    color:#f90;
}
.wordItemBox .translate{

}
.wordItemBox .pronounce{
    display: inline-block;
}

3.JavaScript脚本文件

window.function () {
	
	var word=document.getElementsByClassName('word');
	var audio=document.getElementById("audio");
	var url=audio.src;//找到有道在线发音的api地址

	//遍历节点，绑定事件
	//目的是给网页中的p标签绑定点击事件
	for(var index in word){
		word[index].onclick=function(){
			console.log(index);
			console.log(this);
			var textContent=this.textContent;//获取p标签的文本内容，即英文单词
			var newurl=url.replace("hello",textContent);//替换有道在线语音中的英文单词
			audio.src=newurl;
			audio.play();
		}
	}

	//遍历节点，绑定事件
	//给网页中的img标签绑定点击事件
	var pronounce=document.getElementsByClassName("pronounce");
	for(var index in pronounce){
		pronounce[index].onclick=function(){
			console.log(this.previousSibling);//通过previousSibling获取p标签对象，因为p标签内才有英文单词
			var textContent=this.previousSibling.textContent;
			var newurl=url.replace("hello",textContent);
			audio.src=newurl;
			audio.play();
		}
	}
}

四、案例效果
在这里插入图片描述

五、总结与体会
1.这次的案例不是很难，但接触到了一些以前不知道的东西，比如调用接口等。

2.本次查找节点用了getElementsByClassName方法，因为网页中的单词以及音量图标都是重复使用的，因此需要通过类名去获取，返回的是文档中所有指定类名的元素集合，作为 NodeList 对象，NodeList对象可以通过item方法来访问节点

3.for-in循环与传统的for循环的区别：（下面总结一下几种for循环的区别）
3.1 传统的for循环主要用于循环数组类型，循环变量里面的i是Number类型，对应就是数组的下标
3.2 for-in循环主要用于循环遍历对象，循环变量里面的i是String类型，对应的是对象中的键名，因此需要使用obj[keys]来取到每一个值！在本案例中也是通过word[index]来绑定每一个标签的事件
3.3 for-of提供了遍历所有数据结构的统一操作接口，包括数组、Set 和 Map 结构、某些类似数组的对象（比如arguments对象、DOM NodeList 对象），以及字符串

4.函数体内的this指针的应用，函数体内的this指针引用的是函数据以执行的环境对象，因此这里指向的是input这个节点对象

5.有道在线发音的API是"http://dict.youdao.com/speech?audio=hello"，因此通过textContent属性获取p标签的文本值后再用replace方法替换API接口中的单词即可

6.给所有音量图标绑定点击事件时，可以通过this.previousSibling来找到它的上一个标签即p标签来获取文本值