Javascript 在laravel项目中将.html文件更改为.php文件后，页面不工作_Javascript_Php_Jquery_Laravel

Javascript 在laravel项目中将.html文件更改为.php文件后，页面不工作

javascript php jquery laravel

Javascript 在laravel项目中将.html文件更改为.php文件后，页面不工作,javascript,php,jquery,laravel,Javascript,Php,Jquery,Laravel,不久前，我用javascript和jquery制作了一个内存游戏。现在我正试图用Laravel创建一个新网站，并在那里展示我所有的项目但是当我将html文件的内容放在.blade.php中时，它不会加载任何css或js，只加载.blade.php文件本身中的文本我可能在做一些愚蠢的事情，但我对这一切都是新手。不管怎么说，我不知道怎么修 html文件： <html> <head> <link rel="stylesheet" href="

不久前，我用javascript和jquery制作了一个内存游戏。现在我正试图用Laravel创建一个新网站，并在那里展示我所有的项目

但是当我将html文件的内容放在.blade.php中时，它不会加载任何css或js，只加载.blade.php文件本身中的文本

我可能在做一些愚蠢的事情，但我对这一切都是新手。不管怎么说，我不知道怎么修

html文件：

<html>
    <head>
        <link rel="stylesheet" href="Memorygame.css" type="text/css">
    </head>
    <body>
        <center><div id="kaas">Memory Game</div></center>
        <div class="container" id="container" onclick="Time()">
            <div class="mem"><img src="think.jpg" id="tile0" onclick="matchThis(0)"></div>
            <div class="mem"><img src="think.jpg" id="tile1" onclick="matchThis(1)"></div>
            <div class="mem"><img src="think.jpg" id="tile2" onclick="matchThis(2)"></div>
            <div class="mem"><img src="think.jpg" id="tile3" onclick="matchThis(3)"></div>
            <div class="mem"><img src="think.jpg" id="tile4" onclick="matchThis(4)"></div>
            <div class="mem"><img src="think.jpg" id="tile5" onclick="matchThis(5)"></div>
            <div class="mem"><img src="think.jpg" id="tile6" onclick="matchThis(6)"></div>
            <div class="mem"><img src="think.jpg" id="tile7" onclick="matchThis(7)"></div>
            <div class="mem"><img src="think.jpg" id="tile8" onclick="matchThis(8)"></div>
            <div class="mem"><img src="think.jpg" id="tile9" onclick="matchThis(9)"></div>
            <div class="mem"><img src="think.jpg" id="tile10" onclick="matchThis(10)"></div>
            <div class="mem"><img src="think.jpg" id="tile11" onclick="matchThis(11)"></div>
            <div class="mem"><img src="think.jpg" id="tile12" onclick="matchThis(12)"></div>
            <div class="mem"><img src="think.jpg" id="tile13" onclick="matchThis(13)"></div>
            <div class="mem"><img src="think.jpg" id="tile14" onclick="matchThis(14)"></div>
            <div class="mem"><img src="think.jpg" id="tile15" onclick="matchThis(15)"></div>
            <div class="mem"><img src="think.jpg" id="tile16" onclick="matchThis(16)"></div>
            <div class="mem"><img src="think.jpg" id="tile17" onclick="matchThis(17)"></div>
        </div>
        <audio id="dankmeme">
          <source src="macintoshplus.mp3" type="audio/mpeg">
        </audio>


        <div id="try">Tries: 0</div>
        <div id="moves">Score: 0</div>
        <div id="time">Time 0:00</div>
        <button id="knomp" onclick="Buttonpressyeah();"> New Game </button><br />
        <button id="home" onclick="gohome();">Home</button>

        <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
        <script src="Memorygame.js" type="text/javascript"></script>


    </body>
</html>

而js：

$(document).ready(function () {
  $('div.container').slideDown(500).removeClass('container');
});

$(function(){
  $(".mem").click(function(){
    $(this).fadeOut(1).fadeIn(400).removeClass(".mem");
  })
});

function shuffleArray(array) {
  for (var i = array.length - 1; i > 0; i--) {
      var j = Math.floor(Math.random() * (i + 1));
      var temp = array[i];
      array[i] = array[j];
      array[j] = temp;
  }
 return array;
}


var speelbord = ['pepe1.png','pepe1.png','pepe2.png','pepe2.png',
    'pepe3.png','pepe3.png','pepe4.png','pepe4.png','pepe5.png','pepe5.png',
    'pepe6.png','pepe6.png','pepe7.png','pepe7.png','pepe8.png','pepe8.png',
    'pepe9.png','pepe9.png'];

speelbord = shuffleArray(speelbord);

var aangeklikt = [];

var kaasjes = [];

var stop = 0;



function matchThis(index) {
  var img = document.getElementById("tile" + index);

  if(img.getAttribute("src") == 'think.jpg' && aangeklikt.length < 2) {
    img.src = speelbord[index];
    aangeklikt.push(index);
    checkTiles();
  }
}


function turnbackTiles() {
  var img1 = document.getElementById("tile" + aangeklikt[0]);
  var img2 = document.getElementById("tile" + aangeklikt[1]);

  img1.src = "think.jpg";
  img2.src = "think.jpg";

  aangeklikt = [];
}

var punt = 0;
var probeer = 0;

function checkTiles() {
  if(kaasjes.includes(aangeklikt[0] && aangeklikt[1])) {
    return false;
  }
    if(aangeklikt.length == 2) {
      stop = 1;
      if(speelbord[aangeklikt[0]] != speelbord[aangeklikt[1]]) {
        setTimeout(function() {
          turnbackTiles();
          probeer++;
          document.getElementById("try").innerHTML = "Tries: " + probeer;
        }, 500);
        setTimeout(function() {
          stop = 0;
        },600);

      }
      else {
        aangeklikt = [];
        punt++;
        document.getElementById("moves").innerHTML = "Score: " + punt;
    }
  }
}


var audiopiece = document.getElementById("dankmeme");
var doubly = 0;

function Time() {
  if (punt == 9) {
    clearInterval(start);
    document.getElementById("container").innerHTML = "<div id='winner'></div>";
    audiopiece.play();
  }

  if (doubly == 0) {
    doubly++
    start = setInterval(function() {sec()}, 1000)
  }
}

var seconde = 0;
var minuten = 0;
var extra = "00";

function sec() {
  seconde=seconde+1;

  var seconde1 = "" + seconde
  var seconde2 = extra.substring(0,extra.length - seconde1.length) + seconde1

  if (seconde == 60) {
    seconde=seconde-60;
    minuten=minuten+1;
    seconde2 = "00"
  }
  document.getElementById("time").innerHTML = "Time: " + minuten + ":" + seconde2;
}

function Buttonpressyeah() {
  location.reload();
}

function gohome() {
  window.location.href = "index.html";
}

$（文档）.ready（函数（）{
$（'div.container'）.slideDown（500）.removeClass（'container'）；
});
$（函数（）{
$（“.mem”）。单击（函数（）{
$（this.fadeOut（1.fadeIn（400.removeClass）（.mem））；
})
});
函数shuffleArray（数组）{
对于（var i=array.length-1；i>0；i--）{
var j=Math.floor（Math.random（）*（i+1））；
var-temp=数组[i]；
数组[i]=数组[j]；
数组[j]=温度；
}
返回数组；
}
var speelbord=['pepepe1.png'、'pepepe1.png'、'pepepe2.png'、'pepepe2.png'，
“pepe3.png”、“pepe3.png”、“pepe4.png”、“pepe4.png”、“pepe5.png”、“pepe5.png”，
“pepe6.png”、“pepe6.png”、“pepe7.png”、“pepe7.png”、“pepe8.png”、“pepe8.png”，
"pepe9.png","pepe9.png",；
speelbord=Shuffleray（speelbord）；
var aangeklikt=[]；
var kaasjes=[]；
var-stop=0；
函数匹配此（索引）{
var img=document.getElementById（“平铺”+索引）；
if（img.getAttribute（“src”）=='think.jpg'&&aangeklikt.length<2）{
img.src=speelbord[index]；
aangeklikt.推力（指数）；
checkTiles（）；
}
}
函数turnbackTiles（）{
var img1=document.getElementById（“tile”+aangeklikt[0]）；
var img2=document.getElementById（“tile”+aangeklikt[1]）；
img1.src=“think.jpg”；
img2.src=“think.jpg”；
aangeklikt=[]；
}
var punt=0；
var-probeer=0；
函数checkTiles（）{
if（kaasjes.包括（Angeklikt[0]&Angeklikt[1]））{
返回false；
}
如果（aangeklikt.length==2）{
停止=1；
if（speelbord[aangeklikt[0]！=speelbord[aangeklikt[1]]））{
setTimeout（函数（）{
回头砖（）；
probeer++；
document.getElementById（“try”）.innerHTML=“trys:”+probeer；
}, 500);
setTimeout（函数（）{
停止=0；
},600);
}
否则{
aangeklikt=[]；
punt++；
document.getElementById（“移动”）.innerHTML=“分数：”+punt；
}
}
}
var audiopiece=document.getElementById（“dankmeme”）；
var双重=0；
功能时间（）{
如果（平底=9）{
清除间隔（开始）；
document.getElementById（“容器”）.innerHTML=“”；
有声作品。播放（）；
}
如果（双重==0）{
加倍++
start=setInterval（函数（）{sec（）}，1000）
}
}
var seconde=0；
var minuten=0；
var extra=“00”；
函数sec（）{
seconde=seconde+1；
var seconde1=“”+seconde
var seconde2=extra.substring（0，extra.length-seconde1.length）+seconde1
如果（秒=60）{
seconde=seconde-60；
分钟=分钟+1；
seconde2=“00”
}
document.getElementById（“time”）.innerHTML=“time:+minuten+”：“+seconde2；
}
功能按钮pressYeah（）{
location.reload（）；
}
函数gohome（）{
window.location.href=“index.html”；
}

在laravel中，所有css和javascript文件都必须添加到公用文件夹中

例如，如果您在公用文件夹中创建了css文件夹，那么您必须包括如下内容

  <link rel="stylesheet" href="{{asset('css/bootstrap.min.css')}}">

对于js也一样。例如，如果你已经在js文件夹中添加了所有js文件，那么

<script src="{{asset('js/sweetalert.min.js')}}"></script>

您可以阅读官方文档中的一些帮助函数裁判：

对于叶片模板参考：

在laravel中，所有css和javascript文件都必须添加到公用文件夹中

例如，如果您在公用文件夹中创建了css文件夹，那么您必须包括如下内容

  <link rel="stylesheet" href="{{asset('css/bootstrap.min.css')}}">

对于js也一样。例如，如果你已经在js文件夹中添加了所有js文件，那么

<script src="{{asset('js/sweetalert.min.js')}}"></script>

您可以阅读官方文档中的一些帮助函数裁判：

对于叶片模板参考：

尝试使用css/js的绝对路径。它们将与您的公共目录相对。假设您的js是公开的/js：

<script src="/js/Memorygame.js" type="text/javascript"></script>

尝试使用css/js的绝对路径。它们将与您的公共目录相对。假设您的js是公开的/js：

<script src="/js/Memorygame.js" type="text/javascript"></script>

在laravel中，您必须在公用文件夹中创建css/js文件夹，然后必须包含以下文件：

对于CSS：

<link rel="stylesheet" href="{{asset('css/your-filename.css')}}">

对于JS：

<script src="{{asset('js/your-filename.js')}}"></script>

在laravel中，您必须在公用文件夹中创建css/js文件夹，然后必须包含以下文件：

对于CSS：

<link rel="stylesheet" href="{{asset('css/your-filename.css')}}">

对于JS：

<script src="{{asset('js/your-filename.js')}}"></script>

在直接跳入之前了解laravel在直接跳入之前了解laravel谢谢！成功了。不过这很奇怪，因为在另一个项目中，我可以用href=“/css/filename.css”链接到公共css文件夹文件，谢谢！成功了。但这很奇怪，因为在另一个项目中，我可以使用href=“/css/filename.css”链接到公共css文件夹文件