Fatal编程技术网
  • javascript/
  • Javascript 如何触发脚本使用按钮循环重新加载我的页面

Javascript 如何触发脚本使用按钮循环重新加载我的页面

javascript jquery

Javascript 如何触发脚本使用按钮循环重新加载我的页面,javascript,jquery,Javascript,Jquery,这是我的第一个问题 我正在处理一个项目，该项目包含我的esp的HTML控件。 问题是：我必须在每次单击后重新加载页面才能再次执行此操作 我尝试将setInterval与location.reload和mousedown事件一起使用… 当我按下按钮时，它产生的问题是：页面重新加载。。。但我每次都要再次点击 我需要的是：当我按下键时，它每10毫秒发送一次get方法 我的代码： <!DOCTYPE html> <html> <head> <titl

这是我的第一个问题

我正在处理一个项目，该项目包含我的esp的HTML控件。
问题是：我必须在每次单击后重新加载页面才能再次执行此操作

我尝试将
setInterval
与
location.reload
和
mousedown
事件一起使用…
当我按下按钮时，它产生的问题是：页面重新加载。。。但我每次都要再次点击

我需要的是：当我按下键时，它每10毫秒发送一次get方法

我的代码：

<!DOCTYPE html>
<html>
  <head>
    <title>Our Robot Game Controller</title>
  </head>
  <body>
    <p class="lab1">Left Arm Controls</p>
    <p class="lab2">Wheels Controls</p>
    <p class="lab3">Right Arm Controls</p>
    <div class="AB-1" >
      <button id="up" class="car" >forward</button> 
    </div>
    <div class="AB-2" >
      <button id="do" class="car" >backword</button> <!-- button for pin 11 -->
    </div>
    <div class="AB-3" >
      <button id="ri" class="car">right</button> <!-- button for pin 11 -->
    </div>
    <div class="AB-4" >
      <button id="le" class="car">left</button> <!-- button for pin 11 -->
    </div>
    <div class="Rightarm">
      <div class="AB-5" >
        <button id="up" class="rarm"  >UP</button> 
      </div>
      <div class="AB-6" >
        <button id="do" class="rarm" >Down</button>
      </div>
      <div class="AB-7" >
        <button id="ru" class="rarm">Rotate UP</button>
      </div>
      <div class="AB-8" >
        <button id="rd" class="rarm">Rotate Down</button> 
      </div>
      <div class="AB-9" >
        <button id="ca" class="rarm">collect</button> 
      </div>
    </div>
    <div class="leftarm">
      <div class="AB-10" >
        <button id="up" class="larm"  >up</button> 
      </div>
      <div class="AB-11" >
        <button id="do" class="larm" >down</button>
      </div>
      <div class="AB-12" >
        <button id="ru" class="larm">Rotate UP</button>
      </div>
      <div class="AB-13" >
        <button id="rd" class="larm">Rotate Down</button>
      </div>
      <div class="AB-14" >
        <button id="ca" class="larm">collect</button>
      </div>
    </div>
    <p id="demo"></p>
    <script src="jquery.min.js"></script>
    <script>
      var x;
      $(document).ready(function(){
        $(".car").mousedown(function (){
          x=  setInterval(function() {
            var p = $(this).attr('id');

            $.get("http://192.168.4.1:80/", {car:p}); 
            parent.document.getElementById(p).reload();
            var d = new Date();
            var t = d.toLocaleTimeString();
            document.getElementById("demo").innerHTML = t;
          },10)});
        $(".rarm").mousedown(function (){
          x=  setInterval(function() {
            var d = new Date();
            var t = d.toLocaleTimeString();
            document.getElementById("demo").innerHTML = t;
            var p = $(this).attr('id');

            $.get("http://192.168.4.1:80/", {rarm:p}); 
            parent.document.getElementById(p).reload();
          },10)});
        $(".larm").mousedown(function (){
          x=  setInterval(function() {
            var p = $(this).attr('id');

            $.get("http://192.168.4.1:80/", {larm:p}); 
            parent.document.getElementById(p).reload();
            var d = new Date();
            var t = d.toLocaleTimeString();
            document.getElementById("demo").innerHTML = t;
          },10)});
        $(".car").mouseup(function(){
          clearInterval(x);
          document.getElementById("demo").innerHTML = "";
          location.reload();
        });
        $(".rarm").mouseup(function(){
          clearInterval(x);
          document.getElementById("demo").innerHTML = "";
          location.reload();
        });
        $(".larm").mouseup(function(){
          clearInterval(x);
          document.getElementById("demo").innerHTML = "";
          location.reload();
        });
      });
    </script>
  </body>
</html>


我们的机器人游戏控制器

左臂控制

车轮控制装置


右臂控制

向前地
背景词
正确的
左边
向上的
向下
向上旋转
向下旋转
收集
向上的
向下
向上旋转
向下旋转
收集


var x；
$（文档）.ready（函数（）{
$（“.car”）.mousedown（函数（）{
x=设置间隔（函数（）{
var p=$（this.attr（'id'）；
$.get（”http://192.168.4.1:80/“，{car:p}）；
parent.document.getElementById（p.reload（）；
var d=新日期（）；
变量t=d.toLocaleTimeString（）；
document.getElementById（“demo”）.innerHTML=t；
},10)});
$（“.rarm”）.mousedown（函数（）{
x=设置间隔（函数（）{
var d=新日期（）；
变量t=d.toLocaleTimeString（）；
document.getElementById（“demo”）.innerHTML=t；
var p=$（this.attr（'id'）；
$.get（”http://192.168.4.1:80/“，{rarm:p}）；
parent.document.getElementById（p.reload（）；
},10)});
$（“.larm”）.mousedown（函数（）{
x=设置间隔（函数（）{
var p=$（this.attr（'id'）；
$.get（”http://192.168.4.1:80/“，{larm:p}）；
parent.document.getElementById（p.reload（）；
var d=新日期（）；
变量t=d.toLocaleTimeString（）；
document.getElementById（“demo”）.innerHTML=t；
},10)});
$（“.car”）.mouseup（函数（）{
净间隔（x）；
document.getElementById（“demo”）.innerHTML=“”；
location.reload（）；
});
$（“.rarm”）.mouseup（函数（）{
净间隔（x）；
document.getElementById（“demo”）.innerHTML=“”；
location.reload（）；
});
$（“.larm”）.mouseup（函数（）{
净间隔（x）；
document.getElementById（“demo”）.innerHTML=“”；
location.reload（）；
});
});
制作一个JSFIDLE会有帮助，请您解释一下好吗？这意味着创建一个关于JSFIDLE的工作示例。可能会很尴尬，因为您有这么多GET请求，所以您必须模拟/替换它们，除非资源是公共的并接受CORS请求。至少考虑在这里更清楚地格式化你的代码，很难读懂它，缩进都是错误的。谢谢。我会检查一下：DAn Ajax请求（你的代码> $.GET（…）<代码> >）每10毫秒只能失败…这个延迟太短了。然后，您应该使用Ajax刷新一个“容器”。。。不是整页。多读一点关于Ajax的知识只会帮助您……；）