Fatal编程技术网
  • javascript/
  • Javascript 尝试使用jquery加载随机图像--不起作用

Javascript 尝试使用jquery加载随机图像--不起作用

javascript jquery image

Javascript 尝试使用jquery加载随机图像--不起作用,javascript,jquery,image,onload,Javascript,Jquery,Image,Onload,我是javascript和jquery的新手。我想在加载页面时加载随机图像。我发现了一些看起来很简单的代码，但我似乎无法让它工作，我不知道我做错了什么。我觉得一切都很好 我的HTML如下： <html xmlns="http://www.23.org/19999/xhtml"> <head> <title>A Site Just For Me!</title> <script type="text/javascript" s

我是javascript和jquery的新手。我想在加载页面时加载随机图像。我发现了一些看起来很简单的代码，但我似乎无法让它工作，我不知道我做错了什么。我觉得一切都很好

我的HTML如下：

<html xmlns="http://www.23.org/19999/xhtml">
<head>
    <title>A  Site Just For Me!</title>
    <script type="text/javascript" src="jquery.min.js"></script>
    <link href='http://fonts.googleapis.com/css?family=Economica:400,700|Francois+One' rel='stylesheet' type='text/css'>

    <script type="text/javascript" src="myjs.js"></script> 
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">

    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">

    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

    <link rel="stylesheet" type="text/css" href="me_css.css">

</head>

<body >         
    <div class="jumbotron">
        <div class="container">
            <div class="greeting"></div>
            <div id="happypic"></div>
            <div id="banner"></div>
            <div id="banner2"></div>
        </div>
    </div>
</body>
</html> 


一个网站只为我！
这是我的javascript文件：

// A $( document ).ready() block.
$( document ).ready(function() {

});

//This is where i set up my greeting.

var nowDate=new Date();
var nowHour=nowDate.getHours();
var greeting;

if (nowHour<11)
{
    //good morning
    greeting="Good morning";
}   
else if (nowHour<16)
     {
        //good afternoon
        greeting="Good afternoon";
     }
     else 
     {
        //good evening
        greeting="Good evening";
     }
//document.write("<center><h1>"+greeting+", Loser!");//

// This is where i put my random picture chooser
// pictures

//random image experiment

var hawaiiPix=new Array("hawaii1.jpg", "hawaii2.jpg", "hawaii3.jpg", "hawaii4.jpg", "hawaii5.jpg");
$('<img src="img/'+hawaiiPix[Math.floor(Math.random()*hawaiiPix.length)]+'">"').appendTo('#happypic');

var images = ["hawaii1.jpg", "hawaii2.jpg", "hawaii3.jpg", "hawaii4.jpg", "hawaii5.jpg"];
$('<img src="images/' + images[Math.floor(Math.random() * images.length)] + '">').appendTo('#banner');

$('<h1>Hello</h1>').appendTo('#banner2');

//一个$（document）.ready（）块。
$（文档）.ready（函数（）{
});
//这是我打招呼的地方。
var nowDate=新日期（）；
var nowHour=nowDate.getHours（）；
问候语；

如果（nowHour问题是jQuery代码在就绪函数之外，因此它在加载DOM之前运行，因此无法添加图像，因为HTML页面中还不存在这些元素

一种方法是将
myjs.js
文件的加载放在
之前，以便在执行时加载项（您需要删除jQuery.ready代码），或者可以将其放在ready块中，如下所示：


$( document ).ready(function() {
 //This is where i set up my greeting.
    var nowDate=new Date();
    var nowHour=nowDate.getHours();
    var greeting;

    if (nowHour<11)
    {
        //good morning
        greeting="Good morning";
    }   

    else if (nowHour<16)
    {
        //good afternoon
        greeting="Good afternoon";
    }
    else 
    {
        //good evening
        greeting="Good evening";
    }
    //document.write("<center><h1>"+greeting+", Loser!");//

    // This is where i put my random picture chooser
    // pictures

    //random image experiment

    var hawaiiPix=new Array("hawaii1.jpg", "hawaii2.jpg", "hawaii3.jpg", "hawaii4.jpg", "hawaii5.jpg");
    $('<img src="img/'+hawaiiPix[Math.floor(Math.random()*hawaiiPix.length)]+'">"').appendTo('#happypic');

    var images = ["hawaii1.jpg", "hawaii2.jpg", "hawaii3.jpg", "hawaii4.jpg", "hawaii5.jpg"];
    $('<img src="images/' + images[Math.floor(Math.random() * images.length)] + '">').appendTo('#banner');


    $('<h1>Hello</h1>').appendTo('#banner2');
});



$（文档）.ready（函数（）{
//这是我打招呼的地方。
var nowDate=新日期（）；
var nowHour=nowDate.getHours（）；
问候语；

if（nowHourThank）非常感谢！这就解决了问题！很明显，在你说了之后，但在我不理解之前，代码需要在函数中。很抱歉格式设置不好。下次我会密切关注。