【知了堂学习笔记】_JavaScript之DOM操作（英语在线翻译）
请关注“知了堂学习社区”，地址：http://www.zhiliaotang.com/portal.php
此案例样式粗糙，主要注重功能实现！！
<html><head><meta charset="UTF-8"><title>title><link rel="stylesheet" href="online.css" />head><body><div class="banner"><p class="title">一小时搞定程序员单词p><p class="content">收集了600个程序员常用的单词和词汇，让你代码变量命名 so easy！！标准伦敦腔，在线朗读，助你告别尴尬，放生交流！！1p><button>还等什么！GOGObutton>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 frameworkp><hr><p class="translate">应用程序框架，应用程序p>div><div class="wordItemBox"><p class="word">architecturep><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>本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！