如何只在通过基本JS单击另一个按钮时才显示按钮

im new at this.So, what I want is to hide the RESET button when the clock is working and it should appear when the clock is stoped.same with STOP button that it must only appear when the clock is working.This all must be done with simple and basic Java Script.I dont know about Jquery.

所以,我想要的是在时钟工作时隐藏RESET按钮,它应该在时钟停止时显示。使用STOP按钮时,它必须仅在时钟工作时出现。这一切都必须是完成简单和基本的Java Script.I不知道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>

3 个解决方案

#1

You could do like this

你可以这样做

<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();" />

or you coud also use the disable property

或者你也可以使用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();" />

#2

Basically, you'd want to have a onclick property on the buttons like this:

基本上,你想在按钮上有一个onclick属性,如下所示:

var stopClicked = function(){
  document.getElementById("stop").style.display = "none";
  document.getElementById("reset").style.display = "";
}
var resetClicked = function(){
  document.getElementById("stop").style.display = "";
  document.getElementById("reset").style.display = "none";
}

<button onclick='stopClicked()' id='stop'>Stop</button>
<button onclick='resetClicked()' id='reset'>Reset</button>

#3

It's not pretty, but help you undestand whats happends

它不漂亮,但帮助你不知道发生了什么

<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>

What is inside:

里面是什么:

variables st1, st2, st3 are handlers to setTimeout (in your code STOP button doesn't work) window.setTimeout returns handler to use with clearTimeout

变量st1,st2,st3是setTimeout的处理程序(在代码中STOP按钮不起作用)window.setTimeout返回与clearTimeout一起使用的处理程序

all fields have style proporty which shows or hide buttons on start

所有字段都具有样式比例,在开始时显示或隐藏按钮

document.getElementById('stop') gets element and style.display = 'inline-block'; sets visible on element or hide to hide element

document.getElementById('stop')获取元素和style.display ='inline-block';在元素上设置可见或隐藏隐藏元素

on Start show some buttons and hide unnecessary, on Stop show others and hide unnecessary.

在开始显示一些按钮并隐藏不必要的,停止显示其他人并隐藏不必要的。

And thats all. In pure JS. this is fiddle to test it: https://jsfiddle.net/6qz30eae/

就这样。在纯JS中。这是测试它的小提琴:https://jsfiddle.net/6qz30eae/

#1