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

最新推荐文章于 2024-05-03 11:47:20 发布

TANGLHUI

最新推荐文章于 2024-05-03 11:47:20 发布

阅读量321

点赞数

分类专栏： javascript 文章标签： javascript dom

本文链接：https://blog.csdn.net/TANGLHUI/article/details/78755017

版权

javascript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

请关注“知了堂学习社区”，地址：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>

TANGLHUI

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【知了堂学习笔记】_JavaScript之DOM操作（英语在线翻译）

请关注“知了堂学习社区”，地址：http://www.zhiliaotang.com/portal.php此案例样式粗糙，主要注重功能实现！！<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="onli
复制链接

扫一扫