【HTML求助】求问大佬这段代码的问题！

wr20060926 · 发表于 2020-5-5 20:06

本帖最后由 wr20060926 于 2020-5-5 20:41 编辑

全部代码：

[HTML] 纯文本查看 复制代码

<html>
<head>
    <link rel="icon" href="https://t1.picb.cc/uploads/2020/04/22/k9c8Fg.png" type="image/x-icon">
    <title>自动听写工具</title>
        <meta charset="utf8">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.beattext.js"></script>
    <script type="text/javascript" src="js/easying.js"></script>
        <script type="text/javascript">

$(document).ready(function() {
/*
 *  参数详解:
 *        upTime                        上移的时间
 *        downTime                下落的时间
 *        beatHeight                上移高度
 *        isAuth                        是否自动
 *        isRotate                是否旋转
*/
$('p#beatText').beatText({isAuth:true,isRotate:false,beatHeight:"0.4em",downTime:50,upTime:90});
$('p#rotateText').beatText({isAuth:false,isRotate:true});
$('p#autoText').beatText({isAuth:true,beatHeight:"1em",isRotate:true,});
$('p#roloadText').beatText({isAuth:true,beatHeight:"1em",isRotate:false,upTime:100,downTime:100});
$('p#autoRotateText').beatText({isAuth:true,upTime:700,downTime:700,beatHeight:"3em",isRotate:true});

});
 
</script>
        <style>
                body {
                font-family: helvetica,Microsoft Yahei;
                font-size:18px;
                }
                
                .desc{
                        margin: 1% 1% 0% 1%;
                        font-size:20px;
                        color:#379099;
                }
        
                button {
                 width: 100px;
                 height: 50px;
                margin-left: 1%;
                font-size:20px;
                font-family:'STXihei';
                border-radius:30px;
                border:0;

                }
                
                #txtJSON {
                        height: 40%;
                        width: 98.5%;
                        margin: 1% 1% 1% 1%;
                        border-color: #ccc;
                        background-color:#f8f8f8;
                        line-height:150%;
                        font-size:18px;
                        font-family:'Verdana';
                        color:#fff;
                }
                
                .display{
                        margin: 1% 1% 1% 1%;
                        font-family:'Verdana';
                        color:#0b465d;
                        font-weight:bold;
                }
                
                .meaning {
                        width:330px;
                        height:35%;
                        position:fixed;
                        right:10%;
                        bottom:15%;
                        iframe border:0px;
                        display:block
                }
                
                label{
                        font-size:20px;
                        padding-left:10px;
                        font-family:"Microsoft Yahei";
                        color:#92a5b0;
                        font-weight:bold;;
                }
                
                #time {
                        width:50px;
                }
.beat-char {
    line-height: 3.4em;
    position: relative;
        display: inline-block;
        background: transparent;

}

.rotate{
        transform:rotate(360deg) ;
        -ms-transform:rotate(360deg);         /* IE 9 */
        -moz-transform:rotate(360deg);         /* Firefox */
        -webkit-transform:rotate(360deg); /* Safari 和 Chrome */
        -o-transform:rotate(360deg);
        -webkit-transition-duration: 0.7s;

}
.biaoti{
        font-size:30px;
        font-weight:bold;
}
.container{
    width: 100％;
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: #f0ebeb;
}
.form-control{
        border-radius:15px;
}
.typrcolor{
        color:#fff;
        background:#fb6259;
        font-family:"Microsoft Yahei";
        box-shadow: 0 10px 20px 0px #ec9c94;
        border:1.5px solid #ec9c94;

}
.srkdx{
        width:98%;
        margin:auto;
}
.tishi{
        font-weight:500;
}
</style>
</head>
<body background=id="jsi-particle-container" class="container">
    <a href="../"><button  type="button" class="typrcolor"> <b>返回首页</b></button></a>
<div class="desc" >
        <p id="autoText" class="biaoti">使用说明：</p>
        <p id="beatText" class="tishi"> 将单词按照一行一词粘贴到下面的输入框，点击“转换”，然后下方会出现转换后的单词；单击每个单词，会发出读音，右边会出现释义。</p>
        <p id="beatText" class="tishi">设定间隔时间，点击“听写”，即可按时间间隔，依次读出每个单词。</p>
</div>

<!------输入框------->
<div class="srkdx"style="border-radius:15px;">
        <textarea style="background-color:#B5C8D3;color:#FFF5E8;box-shadow: 0 10px 20px 0px #D0E0E9;border:3.8px solid #D0E0E9;"class="form-control" id="txtJSON" placeholder="粘贴单词到这里"></textarea>
</div>

<!------按钮1------->
<div></br>
<center>        
    <label for="angle-from">时间间隔：</label>
        <input type="number" id="time" value="5" min="1" style="border-radius:8px;border-style:solid;height:30px;width:60px;color:#92a5b0;font-weight:bolder;font-size:20px;background:#f0ebeb;text-align:center;">
        </br></br>
        <label for="angle-from">英音</label> 
        <input type="radio" name="proun" value="1" style="width:20px;height:20px;">
        <label for="angle-from">美音</label> 
        <input type="radio" name="proun" value="2" checked="true" style="width:20px;height:20px;">
        <button id="convert" type="button" class="typrcolor" > <b>转 换 </b></button>
        <button id="dictation" type="button" class="typrcolor" > <b>听 写 </b></button>
</div></center>

<audio id="audio" style="display:none" ></audio>

<!------结果框------->
<div class="display">
</div>

<div class="meaning">
        <iframe width="100%" height="100%" id="dictHcContent" frameborder="0" scrolling="no"></iframe>
</div>

</body>
<script type="text/javascript">

function pronance(e){
        var pn = document.getElementsByName("proun");
        var p = 1;
        for(n=0;n<pn.length;n++){
                if(pn[n].checked){
                        p = pn[n].value;
                }
        }
        var audio = $("#audio");
        audio.attr("src","http://dict.youdao.com/dictvoice?audio="+$(e).attr("class")+"&type="+p);
        audio.get(0).play();
        
        $("#dictHcContent").attr("src","http://dict.cn/apis/dict3.php?q="+$(e).attr("class"));

}


//转换
$("button#convert").click(function(){
        
        $(".display").empty();
        var words = $('#txtJSON').val().split("\n");
        for(i=0;i<words.length;i++){
                $(".display").append("<div class='word' ><a class='"+words[i]+"' onclick='pronance(this)'>"+words[i]+"</a></div>");
        }
                
});

//听写
$("button#dictation").click(function(){
        var childs = $(".display").find("div > a");
        var pn = document.getElementsByName("proun");
        var p = 1;
        for(n=0;n<pn.length;n++){
                if(pn[n].checked){
                        p = pn[n].value;
                }
        }
        var i = 0;
        var t = document.getElementById("time").value;
        function myloop(){
                setTimeout(function(){
                        var audio = $("#audio");
                        audio.attr("src","http://dict.youdao.com/dictvoice?audio="+$(childs[i]).attr("class")+"&type="+p);
                        audio.get(0).play();
                        i++;
                        if(i<childs.length){
                                myloop();
                        }
                },1000*t);
        }
        
        myloop();

        
});
                
</script>
</html>

问题区域代码：

[HTML] 纯文本查看 复制代码

<!------按钮1------->
<div></br>
<center>        
    <label for="angle-from">时间间隔：</label>
        <input type="number" id="time" value="5" min="1" style="border-radius:8px;border-style:solid;height:30px;width:60px;color:#92a5b0;font-weight:bolder;font-size:20px;background:#f0ebeb;text-align:center;">
        </br></br>
        <label for="angle-from">英音</label> 
        <input type="radio" name="proun" value="1" style="width:20px;height:20px;">
        <label for="angle-from">美音</label> 
        <input type="radio" name="proun" value="2" checked="true" style="width:20px;height:20px;">
        <button id="convert" type="button" class="typrcolor" > <b>转 换 </b></button>
        <button id="dictation" type="button" class="typrcolor" > <b>听 写 </b></button>
</div></center>

求助：为什么在美音选项下，转换按钮之前添加任何东西（比如</br>），手机端就无法选择（点不动）这一项了（美英选项）？
演示地址1（自己改动原版后）：https://wr0926.ml/tx/
演示地址2（论坛原版）：https://wr0926.ml/tx/old/old/
演示地址3（改后有问题版）：https://wr0926.ml/tx/indexbug.html

wr20060926 · 发表于 2020-5-5 20:18

突然觉得原版好丑......

天子 · 发表于 2020-5-5 20:22

没太明白啥意思，我用浏览器切换到手机状态可以选择美英选项

wr20060926 · 发表于 2020-5-5 20:23

天子发表于 2020-5-5 20:22
没太明白啥意思，我用浏览器切换到手机状态可以选择美英选项

地址1是本来就可以的

德古拉伯 · 发表于 2020-5-5 20:24

[HTML] 纯文本查看 复制代码

<!--<div class="meaning">
        <iframe width="100%" height="100%" id="dictHcContent" frameborder="0" scrolling="no"></iframe>
</div>-->

这里有问题，把听写按钮挡住了

wr20060926 · 发表于 2020-5-5 20:25

天子发表于 2020-5-5 20:22
没太明白啥意思，我用浏览器切换到手机状态可以选择美英选项

得，我把有问题的链接放上来

天子 · 发表于 2020-5-5 20:28

wr20060926 发表于 2020-5-5 20:25
得，我把有问题的链接放上来

按钮1那里的</div>结束标签好像应该放在center后，虽然没啥影响

wr20060926 · 发表于 2020-5-5 20:29

德古拉伯发表于 2020-5-5 20:24
这里有问题，把听写按钮挡住了

问题解决了，谢谢。不过有个问题，这个地方我应该没有改动，原作者写这一段有啥用哩？

wr20060926 · 发表于 2020-5-5 20:30

天子发表于 2020-5-5 20:28
按钮1那里的结束标签好像应该放在center后，虽然没啥影响

谢谢提醒

泪鱼无梦 · 发表于 2020-5-5 20:31

这个挡住了吧

帐号		自动登录	找回密码
密码			注册[Register]

[已解决] 【HTML求助】求问大佬这段代码的问题！

免费评分

免费评分