Question

我对javascript和Jquery有点新意，所以我对我正在做的事情一无所知。我通过一些试验和错误成功地完成了大部分工作。我不确定是否有更好的javascript替代方案。我知道一旦我开始工作，用户可以关闭javascript，这可能是这个脚本的一个问题，但如果可能的话，我真的不想使用PHP / Sever端的东西。

这就是我遇到的问题，我在控制台中没有收到任何错误，脚本一直运行但第一位不起作用。

我在html之后有一个.hidden和.visible CSS类以及div中的ID，因为这是覆盖屏幕上所有内容的唯一方法。

已经很晚了，所以直到明天才回复。

    $(function() {
        var loading = function() {
        var overlay = document.getElementById('overlay .hidden')

        overlay.onclick = function() {
            overlay.setAttribute('class', 'visible');
};
};
loading()
});

这是整个剧本。

$(window).bind("load", function() {
$('a[href^="http://"],a[href^="https://"]')
    .not('[href*="localhost"]')
    .click(function(e) {
    e.preventDefault();
    var goTo = this.getAttribute("href");

    $(function() {
        var loading = function() {
        var overlay = document.getElementById('overlay .hidden')

        overlay.onclick = function() {
            overlay.setAttribute('class', 'visible');
};
};
loading()
});

    setTimeout(function(){

         window.location = goTo;
    },7000);       
});
});

HTML位

<html lang="en">
<div id="overlay .hidden" class="overlay"></div>
 <head>

CSS

.hidden {
        display: none;
}
.visible {
        display: block;
   }

#overlay {
  display: inline;
  z-index: 99999999999;
  background: #000;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  text-align: center;
}

Answer 1

我发现我在源代码中缺少ajax libs href代码，因此我将其添加到我的标题中。我还在原始代码中添加了正在运行的代码。由于我使用了ajax源代码，因此没有将覆盖图确认为脚本的一部分。

感谢所有回复的人，尽管没有特别帮助。在这种情况下，我学到了很多东西。

$(window).bind("load", function() {
$('a[href^="http://"],a[href^="https://"]')
    .not('[href*="localhost"]')
    .click(function(e) {
    e.preventDefault(); // prevent default anchor behavior
    var goTo = this.getAttribute("href");

    $(function() {

    var loading = function() {
        // add the overlay with loading image to the page
        var over = '<div id="overlay">' +
            '<img id="loading" src="">' +
            '<a style="color:white; text-align:center"> This is test </a>'+
            '</div>';
        $(over).prependTo('body');
    };
    loading()
    });
    setTimeout(function(){

         window.location = goTo;
    },7000);       
});
});

JavaScript：叠加功能

1 个答案: