【知了堂学习笔记】_JavaScript之DOM操作（英语在线翻译）

来源：互联网发布：如何上妆知乎编辑：程序博客网时间：2024/05/22 11:59

请关注“知了堂学习社区”，地址：http://www.zhiliaotang.com/portal.php

此案例样式粗糙，主要注重功能实现！！

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <link rel="stylesheet" href="online.css" />        <!--<script src="online.js" ></script>-->    </head>    <body>        <div class="banner">            <p class="title">一小时搞定程序员单词</p>            <p class="content">收集了600个程序员常用的单词和词汇，让你代码变量命名 so easy！！标准伦敦腔，在线朗读，助你告别尴尬，放生交流！！1</p>            <button>还等什么！GOGO</button>        </div>        <div class="contalener">            <div class="wordItemBox">                <p class="word">application </p>                <hr>                <p class="translate">应用程序 应用、应用程序</p>            </div>            <div class="wordItemBox">                <p class="word">application framework</p>                <hr>                <p class="translate">应用程序框架，应用程序</p>            </div>            <div class="wordItemBox">                <p class="word">architecture</p>                <hr>                <p class="translate">架构 系统架构</p>            </div>        </div>        <audio id="audio" src="https://sp0.baidu.com/-rM1hT4a2gU2pMbgoY3K/gettts?lan=uk&text=hello&spd=2&source=alading"></audio>    </body></html><script type="text/javascript">    window.onload = function (){    var word = document.getElementsByClassName("word");//  console.log(word.nodeName);    var audio = document.getElementById("audio");//  console.log(audio);    var url = audio.src;//  console.log(url);    for(var index in word){        word[index].onclick = function(){            var textContent = this.textContent;//          console.log(textContent);            var newurl = url.replace("hello",textContent);            console.log(newurl);            audio.src = newurl;////            console.log(newurl);            audio.play();//                  }    }}</script>

阅读全文

0 0