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

最新推荐文章于 2024-09-10 10:10:29 发布

ren_xiao_an

最新推荐文章于 2024-09-10 10:10:29 发布

阅读量1.8k

点赞数 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>
            <