如何使按鈕僅在通過基本JS單擊另一個按鈕時出現
[英]how to make a button appear only when another button is clicked through basic JS
問題描述
因此，我想要的是在時鍾工作時隱藏RESET按鈕，並且應該在時鍾停止時顯示它。與STOP按鈕相同，它必須僅在時鍾工作時才出現。用簡單而基本的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>
3 個解決方案
解決方案1
0 2015-05-05 15:56:23
你可以這樣
<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();" />
解決方案2
0 2015-05-05 16:03:44
基本上，您希望在這樣的按鈕上具有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
0 2015-05-05 16:29:06
它不是很漂亮，但是可以幫助您了解發生了什么
<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>
里面是什么：
- 變量st1，st2，st3是setTimeout的處理程序（在代碼STOP按鈕中不起作用） window.setTimeout返回用於clearTimeout的處理程序
- 所有字段都有樣式比例，在開始時顯示或隱藏按鈕
- document.getElementById（'stop'）獲取元素和樣式。display ='inline-block'; 設置在元素上可見或隱藏以隱藏元素
- 在“開始”上顯示一些按鈕並隱藏不必要的內容，在“停止”上顯示其他按鈕並隱藏不必要的內容。
就這樣。 在純JS中。 這是測試的小提琴： https : //jsfiddle.net/6qz30eae/
如何使元素僅在javascript中單擊按鈕時顯示
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.