Fatal编程技术网
  • javascript/
  • Javascript 如何使按钮仅在通过基本JS单击另一个按钮时显示

Javascript 如何使按钮仅在通过基本JS单击另一个按钮时显示

javascript

Javascript 如何使按钮仅在通过基本JS单击另一个按钮时显示,javascript,Javascript,我是新手。所以，我想在时钟工作时隐藏重置按钮，它应该在时钟停止时出现。与停止按钮相同，它必须只在时钟工作时出现。这一切都必须用简单而基本的Java脚本完成。我不知道Jquery <script language="javascript"> var t1; var t2; var t3; function fn_sample() { document.frm.txtS.value = parseIn

我是新手。所以，我想在时钟工作时隐藏重置按钮，它应该在时钟停止时出现。与停止按钮相同，它必须只在时钟工作时出现。这一切都必须用简单而基本的Java脚本完成。我不知道Jquery

<script language="javascript">
        var t1;
        var t2;
        var t3;
        function fn_sample() {
            document.frm.txtS.value = parseInt(document.frm.txtS.value) + 1;
            t1 = document.frm.txtS.value;
            if(t1>60){

                document.frm.txtS.value = 0;
                fn_incMin();
            }
            window.setTimeout("fn_sample()", 1000);

        }

        function fn_incMin() {

            document.frm.txtM.value = parseInt(document.frm.txtM.value) + 1;
            t2 = document.frm.txtM.value;
            if(t2>60){

                document.frm.txtM.value = 0;
                fn_incHrs();

            }
            window.setTimeout("fn_incMin()", 60000);

        }

        function fn_incHrs() {

            document.frm.txtH.value = parseInt(document.frm.txtH.value) + 1;
            t3 = document.frm.txtH.value;
            window.setTimeout("fn_incHrs()", 3600000);

        }

        function fn_stop() {

            window.clearTimeout(t1);
            window.clearTimeout(t2);
            window.clearTimeout(t3);

        }

        function fn_reset() {

            document.frm.txtS.value = 0;
            document.frm.txtM.value = 0;
            document.frm.txtH.value = 0;

        }

    </script>
</head>
<body>
    <form name="frm">
        <input type="text" name="txtH" value="0" size="2"/>
        <input type="text" name="txtM" value="0" size="2"/>
        <input type="text" name="txtS" value="0" size="2"/>
        <br /><br />
        <input type="button" value="Start" onclick="fn_sample();" />
        <input type="button" value="Stop" onclick="fn_stop();" />
        <input type="button" value="Reset" onclick="fn_reset();" />
    </form>
</body>


var-t1；
var-t2；
var-t3；
函数fn_sample（）{
document.frm.txtS.value=parseInt（document.frm.txtS.value）+1；
t1=document.frm.txtS.value；
如果（t1>60）{
document.frm.txtS.value=0；
fn_incMin（）；
}
setTimeout（“fn_sample（）”，1000）；
}
函数fn_incMin（）{
document.frm.txtM.value=parseInt（document.frm.txtM.value）+1；
t2=document.frm.txtM.value；
如果（t2>60）{
document.frm.txtM.value=0；
fn_incHrs（）；
}
setTimeout（“fn_incMin（）”，60000）；
}
函数fn_incHrs（）{
document.frm.txtH.value=parseInt（document.frm.txtH.value）+1；
t3=document.frm.txtH.value；
setTimeout（“fn_incHrs（）”，3600000）；
}
函数fn_stop（）{
窗口清除超时（t1）；
窗口清除超时（t2）；
窗口清除超时（t3）；
}
函数fn_reset（）{
document.frm.txtS.value=0；
document.frm.txtM.value=0；
document.frm.txtH.value=0；
}
你可以这样做

<input type="button" value="Start" onclick="fn_sample();this.form.reset.style.display='none'" />
<input type="button" value="Stop" onclick="fn_stop();this.form.reset.style.display='inline'" />
<input type="button" value="Reset" name='reset' onclick="fn_reset();" />
或者也可以使用disable属性

<input type="button" value="Start" onclick="fn_sample();this.form.reset.disabled=true" />
<input type="button" value="Stop" onclick="fn_stop();this.form.reset.disabled=false" />
<input type="button" value="Reset" name='reset' onclick="fn_reset();" />
基本上，您希望按钮上有一个onclick属性，如下所示：

var stopClicked=function（）{
document.getElementById（“停止”）.style.display=“无”；
document.getElementById（“重置”）.style.display=“”；
}
var resetClicked=function（）{
document.getElementById（“停止”）.style.display=“”；
document.getElementById（“重置”）.style.display=“无”；
}
停止

重置
这并不漂亮，但可以帮助您了解发生了什么

<script language="javascript">

    var t1;
    var t2;
    var t3;
    var st1, st2, st3;
    function fn_sample() {
        document.getElementById('reset').style.display = 'none';
        document.getElementById('start').style.display = 'none';
        document.getElementById('stop').style.display = 'inline-block';
        running = true;
        document.frm.txtS.value = parseInt(document.frm.txtS.value) + 1;
        t1 = document.frm.txtS.value;
        if(t1>60){

            document.frm.txtS.value = 0;
            fn_incMin();
        }
        st1 = window.setTimeout("fn_sample()", 1000);

    }

    function fn_incMin() {

        document.frm.txtM.value = parseInt(document.frm.txtM.value) + 1;
        t2 = document.frm.txtM.value;
        if(t2>60){

            document.frm.txtM.value = 0;
            fn_incHrs();

        }
        st2 = window.setTimeout("fn_incMin()", 60000);

    }

    function fn_incHrs() {

        document.frm.txtH.value = parseInt(document.frm.txtH.value) + 1;
        t3 = document.frm.txtH.value;
        st3 = window.setTimeout("fn_incHrs()", 3600000);

    }

    function fn_stop() {
        document.getElementById('reset').style.display = 'inline-block';
        document.getElementById('start').style.display = 'inline-block';
        document.getElementById('stop').style.display = 'none';
        window.clearTimeout(st1);
        window.clearTimeout(st2);
        window.clearTimeout(st3);
    }

    function fn_reset() {

        document.frm.txtS.value = 0;
        document.frm.txtM.value = 0;
        document.frm.txtH.value = 0;

    }

</script>
</head>
<body>
    <form name="frm">
        <input type="text" name="txtH" value="0" size="2"/>
        <input type="text" name="txtM" value="0" size="2"/>
        <input type="text" name="txtS" value="0" size="2"/>
        <br /><br />
        <input id="start" type="button" value="Start" onclick="fn_sample();"style="display:inline-block" />
        <input id="stop" type="button" value="Stop" onclick="fn_stop();" style="display:none" />
        <input id="reset" type="button" value="Reset" onclick="fn_reset();" style="display:inline-block" />
    </form>
</body>


var-t1；
var-t2；
var-t3；
变量st1、st2、st3；
函数fn_sample（）{
document.getElementById（'reset'）.style.display='none'；
document.getElementById（'start'）.style.display='none'；
document.getElementById（'stop'）.style.display='inline block'；
运行=真；
document.frm.txtS.value=parseInt（document.frm.txtS.value）+1；
t1=document.frm.txtS.value；
如果（t1>60）{
document.frm.txtS.value=0；
fn_incMin（）；
}
st1=window.setTimeout（“fn_sample（）”，1000）；
}
函数fn_incMin（）{
document.frm.txtM.value=parseInt（document.frm.txtM.value）+1；
t2=document.frm.txtM.value；
如果（t2>60）{
document.frm.txtM.value=0；
fn_incHrs（）；
}
st2=window.setTimeout（“fn_incMin（）”，60000）；
}
函数fn_incHrs（）{
document.frm.txtH.value=parseInt（document.frm.txtH.value）+1；
t3=document.frm.txtH.value；
st3=window.setTimeout（“fn_incHrs（）”，3600000）；
}
函数fn_stop（）{
document.getElementById（'reset'）.style.display='inline block'；
document.getElementById（'start'）.style.display='inline block'；
document.getElementById（'stop'）.style.display='none'；
窗口清除超时（st1）；
窗口清除超时（st2）；
窗口清除超时（st3）；
}
函数fn_reset（）{
document.frm.txtS.value=0；
document.frm.txtM.value=0；
document.frm.txtH.value=0；
}
里面是什么：

  • 变量st1、st2、st3是设置超时的处理程序（在代码停止按钮中不起作用） window.setTimeout返回与clearTimeout一起使用的处理程序
  • 所有字段都有样式比例，在开始时显示或隐藏按钮
  • document.getElementById（'stop'）获取元素和style.display='inline block'设置元素上的可见项或隐藏以隐藏元素
  • 在开始时显示一些按钮并隐藏不必要的按钮，在停止时显示其他按钮并隐藏不必要的按钮
就这些。在纯JS中。这是对它的测试：

您当前的代码有什么问题。您的控制台现在是否有错误？另外，给你函数和变量的描述性名称会对你有很大帮助