问题描述：

我想创建一个函数，像一个泵，所以它只会执行代码，而一个按钮有一个'开'值。我已经做了以下但这恰恰被锁定在一个循环中，可能有人帮助，谢谢只做一些代码，而一个按钮有一个特定的值属性

<div id="main"> 
    <div id="intruc" class="instructions">Instructions go in here</div> 
    <input type="button" value="On" id="onoff" onclick="pump();"> 
    <div id="moniac"></div> 

</div> 

<script> 

function pump(button) { 
    console.log("pump"); 
    currentvalue = document.getElementById('onoff').value; 
    if(currentvalue == "Off"){ 
     document.getElementById("onoff").value="On"; 
     currentvalue == "On" 
     run(currentvalue) 
    } 
    else{ 
     document.getElementById("onoff").value="Off"; 
     currentvalue == "Off" 
     run(currentvalue) 
    } 
} 

function run(status) { 
    console.log("run"); 
    console.log(status); 
    if (status==="On"){ 
     console.log("do all the code") 
     run(status) 
    } 

} 





</script>

您是否在寻找mousedown事件？ https://developer.mozilla.org/en/docs/Web/Events/mousedown –

我认为你不应该使用'currentvalue == Off'或'on'而不是'currentvalue = Off'或'on' .. ..也是你的最后一个运行函数不需要 – Mostafa

答

我想你正在寻找的是mousedown事件，我做了一个干净的演示，你可以在你的适应代码：

HTML

<button id="run">Off</button>

的JavaScript

var runCode = false; 
var button = document.getElementById("run"); 

function pump() 
{ 
    if (runCode) { 
     /** Code to run, when on. **/ 
     button.innerText = "Off"; 
     runCode = false; 
    } else { 
     button.innerText = "On"; 
     runCode = true; 
    } 
} 

button.addEventListener("mousedown", pump);

“flag”runCode决定代码是否应该运行。

例

http://jsfiddle.net/coea3ckb/2/

编辑1

你被错误地分配该值，您正在使用==代替=。

答

我让你的代码工作。只是让这些变化：

<div id="main"> 
    <div id="intruc" class="instructions">Instructions go in here</div> 
    <input type="button" value="On" id="onoff" onclick="pump();"> 
    <div id="moniac"></div> 

</div> 

<script> 

function pump() { 

    currentvalue = document.getElementById('onoff').value; 
    if(currentvalue == "On"){ 
     document.getElementById("onoff").value="Off"; 
     show(); 

    } 
    else{ 
     document.getElementById("onoff").value="On"; 
     return false; 
    } 
} 



function show() 
{ 

alert(' your code which you want to repeat'); 


show(); 
} 
</script>

您可以使用窗口变量作为检查为show();工作与否。

感谢您的帮助球员，但这两个都没有告诉我如何让这个功能在按钮打开时重复循环遍历代码。他们只做过一次......或者我只是在这里厚厚而缺少一些东西？（你不必回答最后一位） –

为什么你想重复循环代码。只有当按下的按钮值为ON时，你才需要运行一部分代码....现在正在发生.....现在还有其他什么？ –

我希望它能像水一样循环流动。当按钮处于函数中的代码被重复执行时，事情就会发生，也就是说循环的不同部分中的水将根据拉动的杠杆执行不同的操作。当按钮被关闭时，水停止在循环周围流动（代码停止重复执行），一切都停止。 –

答

我刚才编辑整个代码，现在它的工作

function pump() { 
 
    console.log("pump"); 
 
    currentvalue = document.getElementById('onoff').value; 
 
    if(currentvalue == "Off"){ 
 
     document.getElementById("onoff").value="On"; 
 
     //currentvalue = "On" 
 
     //run(currentvalue) 
 
    } 
 
    else{ 
 
     document.getElementById("onoff").value="Off"; 
 
     currentvalue == "Off" 
 
     //run(currentvalue) 
 
    } 
 
}

<div id="main"> 
 
    <div id="intruc" class="instructions">Instructions go in here</div> 
 
    <input type="button" value="On" id="onoff" onclick="pump();"> 
 
    <div id="moniac"></div> 
 

 
</div>

Fiddle（但不是在小提琴正常工作，测试它在本地）

答

我认为正确的方法做这样的事情将包括使用区间。

您可以了解那些在这里：
https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval
https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/clearInterval
（您也可以找到W3Schools的信息，但是我比较推荐MDN）

你可以做这样的事情：
（中两个文件必须在同一目录下）

的index.html

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <title>Pump</title> 
    <script type="text/javascript" src="scripts.js" charset="utf-8"></script> 
    </head> 
    <body> 
    <div id="main"> 
     <div id="intructions" class="instructions">Instructions go in here</div> 
     <input id="pumpToggleButton" type="button" value="OFF"> 
     <div id="pumpOutput">0</div> 
    </div> 
    </body> 
</html>

脚本。JS

window.addEventListener("load", init, false); 

var pumpToggleButton; 

var pumpValue = 0, pumpState = false, pumpInterval; 

var pumpFrequency = 100; 

function init() { 
    pumpToggleButton = document.getElementById("pumpToggleButton"); 
    pumpToggleButton.addEventListener("click", pumpToggle, false); 
} 

function pumpAction() { 
    pumpValue += 5; 
    document.getElementById("pumpOutput").innerHTML = pumpValue; 
} 

function pumpToggle() { 
    pumpState = !pumpState; 

    pumpToggleButton.value = pumpState ? "ON" : "OFF"; 

    if (pumpState) { 
    pumpInterval = setInterval(pumpAction, pumpFrequency); 
    } else { 
    clearInterval(pumpInterval); 
    } 
}

正如你所看到的，我也推荐使用事件侦听器，而不是旧的onload="action()"方式分配功能的按钮。

PS：我试图用的jsfiddle和codepen，但似乎他们不处理事件侦听器太清楚......

答

下面是一个使用data-attribute(s)的泵按钮值一个简单的例子：https://jsfiddle.net/ahvonenj/pL9qf5mq/

document.getElementById('pumpbutton').addEventListener('click', pump); 

function pump() 
{ 
    var pumpState = this.dataset.value; 

    if(pumpState === 'true') 
    { 
     this.dataset.value = 'false'; 
     this.value = 'OFF'; 
    } 
    else 
    { 
     this.dataset.value = 'true'; 
     this.value = 'ON'; 
    } 
}

答

感谢大家的输入，我决定使用setInterval函数来执行我需要的功能。在这个例子中，我将它设置为每三秒进行一次测试，但在最后一块时它的运行速度要快得多。我的解决方案如下所示：

<div id="main"> 
    <div id="intruc" class="instructions">Instructions go in here</div> 
    <input type="button" value="Off" id="onoff" html="Turn on" onclick="onOff();"> 
</div> 

<script> 

var switchStatus=document.getElementById('onoff').value; 
console.log("Switch status at the start= ",switchStatus) 
var run = setInterval(function(){ pump(switchStatus) }, 3000); 

function onOff() { 
    console.log("onOff"); 
    switchStatus=document.getElementById('onoff').value; 
    if(switchStatus =="Off"){ 
     document.getElementById("onoff").value="On"; 
     switchStatus = "On" 
    } 
    else{ 
     document.getElementById("onoff").value="Off"; 
     switchStatus = "Off" 
    } 
} 

function pump(status) { 
    console.log("pump"); 
    console.log(status); 
    if (status=="On"){ 
     console.log("do all the code") 

    } 

}

只做一些代码，而一个按钮有一个特定的值属性

的index.html

脚本。JS

相关推荐