JavaScript函数不会产生预期的行为

时间：2017-03-27 20:43:24

标签： javascript html arrays

我认为我做的一切都是正确的但当我点击“Batter Up！”按钮时，没有任何反应。请帮我弄清楚我在这里缺少什么样的东西。

以下是代码：

var leftball = new Array(423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 421, 419, 418, 416, 414, 413, 411, 409, 407, 406, 404, 402, 401, 399, 397, 395, 394, 392, 390, 389, 387, 385, 383, 382, 380, 378, 377, 375, 373, 371, 370, 368, 366, 365, 363, 361, 359, 358, 356, 354, 353, 351, 349, 347, 346, 344, 342, 341, 339, 337, 335, 334, 332, 330, 329, 327, 325, 323, 322, 320, 318, 317, 315, 313, 311, 310, 308, 306, 305, 303, 301, 299, 298, 296, 294, 293, 291, 289, 287, 286, 284, 282, 281, 279, 277, 275, 274, 272, 270, 269, 267, 265, 263, 262, 260, 258, 257, 255, 253, 251, 250, 248, 246, 245, 243, 241, 239, 238, 236, 234, 233, 231, 229, 227, 226, 224, 222, 221, 219, 217, 215, 214, 212, 210, 208, 207, 205, 203, 202, 200);
var topball = new Array(365, 367, 369, 371, 373, 375, 377, 379, 381, 383, 385, 387, 389, 391, 393, 395, 397, 399, 401, 403, 405, 407, 409, 411, 413, 415, 417, 419, 421, 423, 425, 427, 429, 431, 433, 435, 437, 439, 441, 443, 445, 447, 449, 451, 453, 455, 457, 459, 461, 463, 465, 467, 469, 471, 473, 475, 477, 479, 481, 483, 485, 487, 489, 491, 493, 495, 497, 499, 501, 503, 500, 496, 492, 487, 483, 479, 475, 471, 466, 462, 458, 454, 450, 445, 441, 437, 433, 429, 425, 420, 416, 412, 408, 404, 399, 395, 391, 387, 383, 379, 374, 370, 366, 362, 358, 353, 349, 345, 341, 337, 333, 328, 324, 320, 316, 312, 307, 303, 299, 295, 291, 286, 282, 278, 274, 270, 266, 261, 257, 253, 249, 245, 240, 236, 232, 228, 224, 220, 215, 211, 207, 203, 199, 194, 190, 186, 182, 178, 173, 169, 165, 161, 157, 153, 148, 144, 140, 136, 132, 127, 123, 119, 115, 111, 107, 102, 98, 94, 90, 86, 81, 77, 73, 69, 65, 61, 56, 52, 48, 44, 40, 35, 31, 27, 23, 19, 14, 10, 6, 2, -2, -6, -11, -15, -19, -23, -27, -32, -36, -40);
var widthsize = new Array(1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 9, 17, 25, 33, 41, 49, 57, 65, 73, 81, 89, 97, 105, 113, 121, 129, 137, 145, 153, 161, 169, 177, 185, 193, 201, 209, 217, 225, 233, 241, 249, 257, 265, 273, 281, 289, 297, 305, 313, 321, 329, 337, 345, 353, 361, 369, 377, 385, 393, 401, 409, 417, 425, 433, 441, 449, 457, 465, 473, 481, 489, 497, 505, 512, 520, 528, 536, 544, 552, 560, 568, 576, 584, 592, 600);
var heightsize = new Array(1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 3, 6, 9, 11, 14, 17, 19, 22, 25, 27, 30, 32, 35, 38, 40, 43, 46, 48, 51, 54, 56, 59, 62, 64, 67, 70, 72, 75, 78, 80, 83, 86, 88, 91, 94, 96, 99, 101, 104, 107, 109, 112, 115, 117, 120, 123, 125, 128, 131, 133, 136, 139, 141, 144, 147, 149, 152, 155, 157, 160, 163, 165, 168, 170, 173, 176, 178, 181, 184, 186, 189, 192, 194, 197, 200);

/////////////////////////////////////////////////////////////////
var timer;
var cycle = 0;

function moveBall(a, b) {
  x = a + document.getElementById("ball").offsetLeft;
  document.getElementById("ball").style.left = x + "px";

  y = b + document.getElementById("ball").offsetTop;
  document.getElementById("ball").style.top = y + "px";
}

function sizeSign(a, b) {
  x = a + document.getElementById("homerun").offsetHeight;
  document.getElementById("homerun").style.height = x + "px";

  y = b + document.getElementById("homerun").offsetWidth;
  document.getElementById("homerun").style.width = y + "px";
}

function runIt() {
  if (cycle < 200) {
    moveBall(leftball, topball)
  } else if (cycle = 200) {
    document.getElementById("ball").style.visibility = "hidden";
    document.getElementById("homerun").style.visibility = "visible";
  } else if (cycle < 275) {
    sizeSign(heightsize, widthsize);
  } else if (cycle = 275) {
    clearInterval(timer);
  }
  cycle++;
}

function batterup() {
  timer = setInterval(runIt, 50);
}
//////////////////////////////END////////////////////////////////
body {
  background-color: blue;
}

#ballfield {
  position: absolute;
  top: 0px;
  left: 0px;
  margin-left: 150px;
  margin-top: 10px;
  z-index: -1;
}

#ball1 {
  position: absolute;
  top: 365px;
  left: 423px;
  z-index: 2;
  visibility: visible;
}

#homerun {
  position: absolute;
  top: 200px;
  left: 150px;
  z-index: 3;
  visibility: hidden;
  height: 1px;
  width: 1px;
}

#button1 {
  position: absolute;
  left: 15px;
  top: 30px;
}
<input type="button" id="button1" value="Batter Up!" onclick="batterup()" />
<img src="baseballfield.jpg" alt="ballfield" id="ballfield" />
<img src="baseball.gif" alt="baseball" id="ball1" />
<img src="homerun.gif" alt="home run" id="homerun" />

和图片：

[baseball.gif]

[baseballfield.jpg]

[homerun.gif]

https://www.dropbox.com/s/idnjd49p2iuo3wu/ImagesBatter.zip?dl=0

我知道这只会带给你们一点时间，请帮助！

谢谢！

1 个答案:

答案 0 :(得分：0)

如果正确解释问题，OP的javascript将数组作为字符串传递给函数，而不是数组的元素。

您可以在.slice()调用时调用runIt()来复制数组，然后在使用.style设置Array.prototype.shift()的函数中引用复制数组的元素。

另请注意，if..else指定值内的比较，未检查值是否相等。

<!DOCTYPE html>
<html>

<head>
  <title>Batter</title>
  <style type="text/css">
    body {
      background-color: blue;
    }
    
    #ballfield {
      position: absolute;
      top: 0px;
      left: 0px;
      margin-left: 150px;
      margin-top: 10px;
      z-index: -1;
    }
    
    #ball1 {
      position: absolute;
      top: 365px;
      left: 423px;
      z-index: 2;
      visibility: visible;
    }
    
    #homerun {
      position: absolute;
      top: 200px;
      left: 150px;
      z-index: 3;
      visibility: hidden;
      height: 1px;
      width: 1px;
    }
    
    #button1 {
      position: absolute;
      left: 15px;
      top: 30px;
    }
  </style>
  <script type="text/javascript">
    var leftball = new Array(423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 421, 419, 418, 416, 414, 413, 411, 409, 407, 406, 404, 402, 401, 399, 397, 395, 394, 392, 390, 389, 387, 385, 383, 382, 380, 378, 377, 375, 373, 371, 370, 368, 366, 365, 363, 361, 359, 358, 356, 354, 353, 351, 349, 347, 346, 344, 342, 341, 339, 337, 335, 334, 332, 330, 329, 327, 325, 323, 322, 320, 318, 317, 315, 313, 311, 310, 308, 306, 305, 303, 301, 299, 298, 296, 294, 293, 291, 289, 287, 286, 284, 282, 281, 279, 277, 275, 274, 272, 270, 269, 267, 265, 263, 262, 260, 258, 257, 255, 253, 251, 250, 248, 246, 245, 243, 241, 239, 238, 236, 234, 233, 231, 229, 227, 226, 224, 222, 221, 219, 217, 215, 214, 212, 210, 208, 207, 205, 203, 202, 200);
    var topball = new Array(365, 367, 369, 371, 373, 375, 377, 379, 381, 383, 385, 387, 389, 391, 393, 395, 397, 399, 401, 403, 405, 407, 409, 411, 413, 415, 417, 419, 421, 423, 425, 427, 429, 431, 433, 435, 437, 439, 441, 443, 445, 447, 449, 451, 453, 455, 457, 459, 461, 463, 465, 467, 469, 471, 473, 475, 477, 479, 481, 483, 485, 487, 489, 491, 493, 495, 497, 499, 501, 503, 500, 496, 492, 487, 483, 479, 475, 471, 466, 462, 458, 454, 450, 445, 441, 437, 433, 429, 425, 420, 416, 412, 408, 404, 399, 395, 391, 387, 383, 379, 374, 370, 366, 362, 358, 353, 349, 345, 341, 337, 333, 328, 324, 320, 316, 312, 307, 303, 299, 295, 291, 286, 282, 278, 274, 270, 266, 261, 257, 253, 249, 245, 240, 236, 232, 228, 224, 220, 215, 211, 207, 203, 199, 194, 190, 186, 182, 178, 173, 169, 165, 161, 157, 153, 148, 144, 140, 136, 132, 127, 123, 119, 115, 111, 107, 102, 98, 94, 90, 86, 81, 77, 73, 69, 65, 61, 56, 52, 48, 44, 40, 35, 31, 27, 23, 19, 14, 10, 6, 2, -2, -6, -11, -15, -19, -23, -27, -32, -36, -40);
    var widthsize = new Array(1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 9, 17, 25, 33, 41, 49, 57, 65, 73, 81, 89, 97, 105, 113, 121, 129, 137, 145, 153, 161, 169, 177, 185, 193, 201, 209, 217, 225, 233, 241, 249, 257, 265, 273, 281, 289, 297, 305, 313, 321, 329, 337, 345, 353, 361, 369, 377, 385, 393, 401, 409, 417, 425, 433, 441, 449, 457, 465, 473, 481, 489, 497, 505, 512, 520, 528, 536, 544, 552, 560, 568, 576, 584, 592, 600);
    var heightsize = new Array(1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 3, 6, 9, 11, 14, 17, 19, 22, 25, 27, 30, 32, 35, 38, 40, 43, 46, 48, 51, 54, 56, 59, 62, 64, 67, 70, 72, 75, 78, 80, 83, 86, 88, 91, 94, 96, 99, 101, 104, 107, 109, 112, 115, 117, 120, 123, 125, 128, 131, 133, 136, 139, 141, 144, 147, 149, 152, 155, 157, 160, 163, 165, 168, 170, 173, 176, 178, 181, 184, 186, 189, 192, 194, 197, 200);
    var _leftball, _topball, _widthsize, _heightsize;
    /////////////////////////////////////////////////////////////////
    var timer;
    var cycle = 0;

    function moveBall(a, b) {
      var x = a + document.getElementById("ball").offsetLeft;

      document.getElementById("ball").style.left = x + "px";

      var y = b + document.getElementById("ball").offsetTop;
      document.getElementById("ball").style.top = y + "px";
      console.log(x, y);
    }

    function sizeSign(a, b) {
      var x = a + document.getElementById("homerun").offsetHeight;
      document.getElementById("homerun").style.height = x + "px";

      var y = b + document.getElementById("homerun").offsetWidth;
      document.getElementById("homerun").style.width = y + "px";
    }

    function runIt() {
      if (cycle < 200) {
        moveBall(_leftball.shift(), _topball.shift())
      } else if (cycle === 200) {
        document.getElementById("ball").style.visibility = "hidden";
        document.getElementById("homerun").style.visibility = "visible";
      } else if (cycle < 275) {
        sizeSign(_heightsize.shift(), _widthsize.shift());
      } else if (cycle === 275) {
        clearInterval(timer);
      }
      cycle++;
    }

    function batterup() {
      if (timer) clearInterval(timer);
      _leftball = leftball.slice(0);
      _topball = topball.slice(0);
      _heightsize = heightsize.slice(0);
      _widthsize = widthsize.slice(0);
      timer = setInterval(runIt, 50);
    }
    //////////////////////////////END////////////////////////////////
  </script>
</head>

<body>

  <input type="button" id="button1" value="Batter Up!" onclick="batterup()" />
  <img src="http://lorempixel.com/sports/50/50/" alt="ballfield" id="ballfield" />
  <img src="http://lorempixel.com/sports/50/50/" alt="baseball" id="ball" />
  <img src="http://lorempixel.com/sports/50/50/" alt="home run" id="homerun" />


</body>

</html>

相关问题
最新问题