2017-05-29 66 views
0

我剛剛從jsfiddle複製了一些Javascript代碼。無法在本地html文件上運行jsfiddle代碼

這裏是我做過什麼:

<!DOCTYPE html> 
 
<html> 
 
<!-- The function below comes from here: http://jsfiddle.net/redler/QcUPk/8/ --> 
 
<head> 
 
<script type="text/javascript" src="http://code.jquery.com/jquery-3.2.1.min.js"></script> 
 
<!-- <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script> --> 
 
<script type="text/javascript"> 
 
(function makeDiv(){ 
 
    var divsize = ((Math.random()*100) + 50).toFixed(); 
 
    var color = '#'+ Math.round(0xffffff * Math.random()).toString(16); 
 
    $newdiv = $('<div/>').css({ 
 
     'width':divsize+'px', 
 
     'height':divsize+'px', 
 
     'background-color': color 
 
    }); 
 
    
 
    var posx = (Math.random() * ($(document).width() - divsize)).toFixed(); 
 
    var posy = (Math.random() * ($(document).height() - divsize)).toFixed(); 
 
    
 
    $newdiv.css({ 
 
     'position':'absolute', 
 
     'left':posx+'px', 
 
     'top':posy+'px', 
 
     'display':'none' 
 
    }).appendTo('body').fadeIn(100).delay(300).fadeOut(200, function(){ 
 
     $(this).remove(); 
 
     makeDiv(); 
 
    }); 
 
})(); 
 
</script> 
 
<title>squares with random position</title> 
 
</head> 
 
<body onload="makeDiv()"> 
 
</body> 
 
</html>

它不會在本地HTML文件的工作。實際上,它的代碼片段工具從#1,但有一個錯誤信息的工作原理:

Error: 
 
{ 
 
    "message": "ReferenceError: makeDiv is not defined", 
 
    "filename": "https://stacksnippets.net/js", 
 
    "lineno": 1, 
 
    "colno": 1 
 
}

任何想法,我做錯了什麼?

此致敬禮。

+0

嘗試使jQuery的鏈接HTTPS – AthMav

回答

1

你已經把這個函數放在一個匿名函數中。

更改代碼以下面的代碼:

<!DOCTYPE html> 
 
    <html> 
 
    <!-- The function below comes from here: http://jsfiddle.net/redler/QcUPk/8/ --> 
 
    <head> 
 
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 
 
    <!-- <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script> --> 
 
    <script type="text/javascript"> 
 
    function makeDiv(){ 
 
     var divsize = ((Math.random()*100) + 50).toFixed(); 
 
     var color = '#'+ Math.round(0xffffff * Math.random()).toString(16); 
 
     $newdiv = $('<div/>').css({ 
 
      'width':divsize+'px', 
 
      'height':divsize+'px', 
 
      'background-color': color 
 
     }); 
 
     
 
     var posx = (Math.random() * ($(document).width() - divsize)).toFixed(); 
 
     var posy = (Math.random() * ($(document).height() - divsize)).toFixed(); 
 
     
 
     $newdiv.css({ 
 
      'position':'absolute', 
 
      'left':posx+'px', 
 
      'top':posy+'px', 
 
      'display':'none' 
 
     }).appendTo('body').fadeIn(100).delay(300).fadeOut(200, function(){ 
 
     $(this).remove(); 
 
     makeDiv(); 
 
     }); 
 
    } 
 
    </script> 
 
    <title>squares with random position</title> 
 
    </head> 
 
    <body onload="makeDiv()"> 
 
    </body> 
 
    </html>

+0

這是它。謝謝! – user9

相關問題