Question

我遇到了使用此代码 Not Answered 的Java Script问题。

让它在https://jsfiddle.net/p3kdbquh/2/工作但不在本地工作

  $('#myModal').modal('show');

var particleCount = 300;
var particleMax   = 1000;
var sky           = document.querySelector('.modal');
var canvas        = document.createElement('canvas');
var ctx           = canvas.getContext('2d');
var width         = sky.clientWidth; //THIS LINE
var height        = sky.clientHeight;
var i             = 0;
var active        = false;
var snowflakes    = [];
var snowflake;
canvas.style.position = 'absolute';
canvas.style.left = canvas.style.top = '0';

var Snowflake = function () {
  this.x = 0;
  this.y = 0;
  this.vy = 0;
  this.vx = 0;
  this.r = 0;

  this.reset();
};

Snowflake.prototype.reset = function() {
  this.x = Math.random() * width;
  this.y = Math.random() * -height;
  this.vy = 1 + Math.random() * 3;
  this.vx = 0.5 - Math.random();
  this.r = 1 + Math.random() * 2;
  this.o = 0.5 + Math.random() * 0.5;
};

function generateSnowFlakes() {
  snowflakes = [];
  for (i = 0; i < particleMax; i++) {
    snowflake = new Snowflake();
    snowflake.reset();
    snowflakes.push(snowflake);
  }
}

generateSnowFlakes();

function update() {
  ctx.clearRect(0, 0, width, height);

  if (!active) {      
    return;
  }

  for (i = 0; i < particleCount; i++) {
    snowflake = snowflakes[i];
    snowflake.y += snowflake.vy;
    snowflake.x += snowflake.vx;

    ctx.globalAlpha = snowflake.o;
    ctx.beginPath();
    ctx.arc(snowflake.x, snowflake.y, snowflake.r, 0, Math.PI * 2, false);
    ctx.closePath();
    ctx.fill();

    if (snowflake.y > height) {
      snowflake.reset();
    }
  }

  requestAnimFrame(update);
}

function onResize() {
  width = sky.clientWidth;
  height = sky.clientHeight;
  canvas.width = width;
  canvas.height = height;
  ctx.fillStyle = '#FFF';

  var wasActive = active;
  active = width > 600;

  if (!wasActive && active) {
    requestAnimFrame(update);
  }
}

// shim layer with setTimeout fallback
window.requestAnimFrame = (function() {
  return  window.requestAnimationFrame       ||
          window.webkitRequestAnimationFrame ||
          window.mozRequestAnimationFrame    ||
          function( callback ){
            window.setTimeout(callback, 1000 / 60);
          };
})();

onResize();
window.addEventListener('resize', onResize, false);

sky.appendChild(canvas);

var gui = new dat.GUI();
gui.add(window, 'particleCount').min(1).max(particleMax).step(1).name('Particles count').onFinishChange(function() {
  requestAnimFrame(update);
});

我已经阅读过这篇文章并看到它与document.querySelector('.modal');定义的类有关，但是我的aspx代码具有相同的名称，所以它不应该返回null。

这是客户端的代码，其中模式已正确定义

<head runat="server">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
<%--        <link rel="stylesheet" href="Content/bootstrap.min.css" />--%>
      <link rel="stylesheet" type="text/css" href="Style/Site.css" />
    <link rel="stylesheet" href="Style/animate.min.css" />



     <script src="Scripts/jquery-1.9.1.min.js"></script>
    <script src="Scripts/bootstrap.min.js"></script>
            <script src="Script/query.js"></script>

</head>
<body>
  <div class="modal fade" id="myModal" tabindex="-1" role="dialog">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <div class="top-image">
              <img src="https://tutsplus.github.io/merry-christmas-web-app-build/images/xmas-tree.png" alt="" />
            </div>
            <h1 class="modal-title">I wish you</h4>
          </div>
          <div class="modal-body">
            <p>Merry Christmas and Happy Holidays!</p>
            <hr />
            <p>Its time to say "<span>Thank You!</span>"</p>
          </div>
          <div class="modal-footer">
            <div class="img-footer">
            </div>
          </div>
        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
    </body>

我从此页面获取了代码“https://codepen.io/nunofidalgo/pen/zrYoVr”

任何人都可以帮忙吗

我从慰问中得到错误

Answer 1

我没有收到该错误

https://jsfiddle.net/p3kdbquh/

console.log(sky)

div class =＆＃34; modal fade＆＃34; ID =＆＃34; myModal＆＃34;的tabindex =＆＃34; -1＆＃34;角色=＆＃34;对话框＆＃34;

您是否可以通过重新设计问题来制作自己的代码？如果document.querySelector(query)找不到任何元素，则会返回null，因此我假设您的配置存在问题。确保你的JS正确加载你的HTML，并且你已正确拼写你的类名等。

另外我觉得我应该注意.modal()不是jQuery stdlib的一部分。我相信.modal()是bootstrap's JS

Answer 2

这个问题的全部问题是我的脚本在HTML页面中的定位，我必须在关闭body标签之前定位它并解决了这个问题。谢谢大家的帮助

Java脚本错误“无法使用模态读取null的属性'clientWidth'

2 个答案: