【HTML求助】求问大佬这段代码的问题！
本帖最后由 wr20060926 于 2020-5-5 20:41 编辑全部代码：
<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="../"><buttontype="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.checked){
p = pn.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+"' onclick='pronance(this)'>"+words+"</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.checked){
p = pn.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).attr("class")+"&type="+p);
audio.get(0).play();
i++;
if(i<childs.length){
myloop();
}
},1000*t);
}
myloop();
});
</script>
</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 突然觉得原版好丑...... 没太明白啥意思，我用浏览器切换到手机状态可以选择美英选项{:301_998:} 天子 发表于 2020-5-5 20:22
没太明白啥意思，我用浏览器切换到手机状态可以选择美英选项
地址1是本来就可以的 <!--<div class="meaning">
<iframe width="100%" height="100%" id="dictHcContent" frameborder="0" scrolling="no"></iframe>
</div>-->
这里有问题，把听写按钮挡住了 天子 发表于 2020-5-5 20:22
没太明白啥意思，我用浏览器切换到手机状态可以选择美英选项
得，我把有问题的链接放上来 wr20060926 发表于 2020-5-5 20:25
得，我把有问题的链接放上来
按钮1那里的</div>结束标签好像应该放在center后，虽然没啥影响{:301_986:} 德古拉伯 发表于 2020-5-5 20:24
这里有问题，把听写按钮挡住了
问题解决了，谢谢。不过有个问题，这个地方我应该没有改动，原作者写这一段有啥用哩？ 天子 发表于 2020-5-5 20:28
按钮1那里的结束标签好像应该放在center后，虽然没啥影响
谢谢提醒 这个挡住了吧