javascript - 尝试使用 jquery 加载随机图像

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

转载作者：行者123 更新时间：2023-11-28 00:40:21

27

4

我是 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');

任何见解将不胜感激......

最佳答案

问题在于您的 jQuery 代码位于 ready 函数之外，因此它在 DOM 加载之前运行，因此无法添加图像，因为这些元素在 HTML 中不存在页面尚未。

一种方法是加载 myjs.js </body>之前的文件因此，当它执行时，项目将被加载(您需要删除 jQuery.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');
});

最好的方法是将 jQuery 和 JS 文件的加载移到 html 代码的底部。

关于javascript - 尝试使用 jquery 加载随机图像 - 不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28017195/

27

4

0

文章推荐： javascript - 使用javascript计算对应字段

文章推荐： html - Angular Material textarea行css不起作用

实例分析Try {} Catch{} 作用
今天有小伙伴给我留言问到，try{...}catch(){...}是什么意思？它用来干什么？简单的说他们是用来捕获异常的下面我们通过一个例子来详细讲解下
html - 列表社交媒体链接的 ARIA 作用
我正在努力提高网站的可访问性，但我不知道如何在页脚中标记社交媒体链接列表。这些链接指向我在 facecook、twitter 等上的帐户。我不想用 role="navigation" 标记这些链接，因
java.util.Timer SystemTime 作用？
说现在是 6 点，我有一个 Timer 并在 10 点安排了一个 TimerTask。之后，System DateTime 被其他服务(例如 ntp)调整为 9 点钟。我仍然希望我的 TimerTas
php - 什么是 Doctrine hydration 作用？
就目前而言，这个问题不适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the
python入门:argparse浅析 nargs='+'作用
我就废话不多说了，大家还是直接看代码吧~ ? 1
Maven是什么?Maven的概念+作用+仓库的介绍+常用命令的详解
Maven系列1 1.什么是Maven？ Maven是一个项目管理工具，它包含了一个对象模型。一组标准集合，一个依赖管理系统。和用来运行定义在生命周期阶段中插件目标和逻辑。核心功能 Mav

首页

博学

6Ren·AI

商城

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