可以'无法将表单隐藏在JS中

Can't get form to hide in JS

本文关键字：隐藏 表单 JS 可以      更新时间：2023-09-26

尝试在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事件来检测用户是否按下了回车按钮（我想要一个更干净的设计）。每当调用计时器功能时，文本框都会闪烁，就像它关闭了一秒钟一样，而不是瞬间重新打开。我不知道问题出在哪里。我在控制台上也没有得到任何错误。

我不确定你想要实现什么，但从你的代码来看，点击回车键会在重新加载的页面中产生结果，所以我看不到结果。

然而，我建议您使用jQuery来隐藏显示您的结果，因为您已经在调用脚本

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

问题出在这行代码上。它会在瞬间关闭窗体，从而产生闪烁效果。只需删除或注释即可。

document.getElementById("myform").style.display = "none";

如果要隐藏表单，请使用jQuery的$('#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

您可能还想在<head>块中将jQuery <script>标记上移。它需要在您呼叫外部<script src="javascript.js"></script>标签之前进行。然后，您可以在.js文件中使用api.jquery.com中的$和所有这些函数。

相关文章：