基于一句话英语api写的前端调用

以前很害怕英语,没有学习途径和学习方法,这个是我觉得可以用作学习英语的一个api,索性就写个html调用。可以用来学习。哈哈哈。

对于想自己开发的,API在这:

图片[1]-基于一句话英语api写的前端调用 - KEKC博客-KEKC博客
可以展示、隐藏中文或英文。还能播放音频,觉得不错的还可以复制音频链接下载音频。简单的一个html,大部分使用js实现,对于js不熟悉的人可以拿来简单学习。

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Ajax使用一言接口</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
            $.get('https://api.kekc.cn/api/yien',{},function(response){
                $('#cn').html(response.cn);
                $('#en').html(response.en);
                $('#audio').html(response.audio);
				$("#myaudio").attr("src",response.audio);
				document.getElementById("myaudio").loop = false;
				
            },'JSON');
        function get_Ajax(){
            $.get('https://api.kekc.cn/api/yien',{},function(response){
                $('#cn').html(response.cn);
                $('#en').html(response.en);
                $('#audio').html(response.audio);
				$("#myaudio").attr("src",response.audio);
				document.getElementById("myaudio").loop = false;
				
            },'JSON');
        }
        function Ajax_start(){
            //setInterval(get_Ajax,5000);
			get_Ajax();
        }
        function zhanshien(){
            //setInterval(get_Ajax,5000);
			$("#en").removeAttr("hidden");
        }
        function yincangen(){
            //setInterval(get_Ajax,5000);
			$("#en").attr("hidden","hidden");
			//$("a").attr("href","http://www.baidu.com");
        }
        function zhanshicn(){
            //setInterval(get_Ajax,5000);
			$("#cn").removeAttr("hidden");
        }
        function yincangcn(){
            //setInterval(get_Ajax,5000);
			$("#cn").attr("hidden","hidden");
			//$("a").attr("href","http://www.baidu.com");
        }
        function autoPlay() {
            var myAuto = document.getElementById('myaudio');
            myAuto.play();
        }
    </script>
    <style>
    table,tr,td{
        border: 4px solid yellowgreen;
        border-collapse: collapse;
    }

    </style>
</head>
<body>
<audio  id="myaudio" controls="controls" hidden="true"></audio>
    <table>
        <tr><td>中文:</td><td id="cn" hidden>无</td></tr>
        <tr><td>英文:</td><td id="en" hidden>无</td></tr>
        <tr><td>音频:</td><td id="audio">无</td></tr>
    </table>
    <input type="button" value="换一句" onclick="Ajax_start()"><input type="button" value="展示英文" onclick="zhanshien()"><input type="button" value="隐藏英文" onclick="yincangen()"><input type="button" value="展示中文" onclick="zhanshicn()"><input type="button" value="隐藏中文" onclick="yincangcn()"><input type="button" onclick="autoPlay()" value="播放" />
</body>
</html>

就70多行,简单的功能实现了。

© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享