Question

尝试在Javascript中隐藏表单时出现此问题。

这是我的HTML：

<!DOCTYPE html>
<html>
<head>
    <title>Timer</title>
    <link rel="stylesheet" href="style.css">
    <script src="javascript.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <link href='https://fonts.googleapis.com/css?family=Roboto:400,300' rel='stylesheet' type='text/css'>
</head>

<body>
    <div id="wrapper">  
        <div id="time">00:00:00</div>   
        <form id="myform">
            <input type="text" autocomplete="off" id="box" placeholder="00:00:00" onkeypress="checkBox(event)">
        </form>
    </div>
</body>
</html>

这是我的JS：

function timer(time) {
    document.getElementById("myform").style.display = "none";
    document.getElementById("time").style.display = "inline";

    var interval = setInterval(function () {    
        if (time == 0) {        
            time = 299;     
        } else {        
            var newTime = timeFormat(time);     
            document.getElementById("time").innerHTML = newTime;        
            document.title = newTime;       
            time--;     
        }
    }, 1000);
}

function checkBox(event) {
    if (event.keyCode == 13) {
        var string = document.getElementById("box").value;
        var numTest = string;

        if (string.length != 0) {

            var numOfColons = string.split(":").length - 1;
            var hr = 0;
            var min = 0;
            var sec = 0;

            if (numOfColons == 2) {     
                numTest = numTest.replace(":", "");
                numTest = numTest.replace(":", "");     
                hr = string.substring(0, string.indexOf(":"));
                string = string.replace(string.substring(0, string.indexOf(":")+1), "");
                min = string.substring(0, string.indexOf(":"));
                string = string.replace(string.substring(0, string.indexOf(":")+1), "");
                sec = string.substring(0, string.length);
            } else if (numOfColons == 1) {          
                numTest = numTest.replace(":", "");         
                min = string.substring(0, string.indexOf(":"));
                string = string.replace(string.substring(0, string.indexOf(":")+1), "");
                sec = string.substring(0, string.length);   
            } else if (numOfColons == 0) {          
                sec = string;       
            }

            hr = parseInt(hr);
            min = parseInt(min);
            sec = parseInt(sec);

            if(/^\d+$/.test(numTest)) {     
                var totalSec = hr*3600 + min*60 + sec;
                if (totalSec > 0) {             
                    timer(totalSec);            
                }
            }
        }
    }
}

function focus() {
    document.getElementById("box").focus();
}

function timeFormat(time) {
    var sec = time % 60;
    var totalMin = time / 60;
    var min = Math.floor(totalMin % 60);

    var string = "";

    if (min == 0 && sec < 10) {
        string = "0:0" + sec;
    } else if (min == 0) {
        string = "0:" + sec;
    } else if (sec < 10) {
        string = min + ":0" + sec;
    } else {
        string =  min + ":" + sec;
    }

    return string;
}

请注意，我没有使用按钮来触发表单提交，我只是使用onkeypress事件来检测用户是否按下了Enter按钮（我想要一个更干净的设计）。无论何时调用定时器功能，文本框都会闪烁，因为它会立即关闭，而不会立即重新启动。我不知道问题是什么。我在控制台中也没有出错。

Answer 1

我不确定你想要实现什么，但是从查看你的代码，点击输入结果重新加载的页面，所以我无法看到结果。

但是我会建议您使用jQuery隐藏显示结果，因为您已经调用了脚本

    $('#myform').hide();
    $('#time').show();

Answer 2

问题在于这行代码。它会暂时关闭窗体，导致闪烁效果发生。只需将其删除或注释即可。

html
  body
    div#container
      #{reactHTML}

如果要隐藏表单，请使用jQuery的document.getElementById("myform").style.display = "none";函数。它类似于$('#myForm').hide()

你也可以试试这个：

<form id="myform" style="display:none;">

有了这个：

<input type="text" id="timeInputBox" autocomplete="off" id="box" placeholder="00:00:00" onkeypress="checkBox(event)">

或者使用它：

document.getElementById('timeInputBox').style.display = "none"; // JS

您可能还想在$('#timeInputBox').hide(); // jQuery块中将jQuery <script>标记向上移动。它需要在您拨打外部<head>标记之前发出。然后，您可以在.js文件中使用api.jquery.com中的$和所有这些函数。

无法在JS

2 个答案: