Wie generieren Sie zufällige Bilder in javascript?

Ich habe mit den folgenden code zum generieren von Zufalls-Bilder, aber keines der Bilder angezeigt werden.

<html>

<head>
<SCRIPT LANGUAGE="JavaScript">

var theImages = new Array() 

theImages[0] = '<img class="atvi-image-image" alt=""src="/content/dam/atvi/callofduty/blackops2/cod-bo2/dlc/mdlc-calling-card-flags.png" title="" height="467" width="675">'
theImages[1] = '<img class="atvi-image-image" alt="" src="/content/dam/atvi/callofduty/blackops2/cod-bo2/dlc/mdlc-nuketown-zombies.png" title="" height="732" width="1084">'
theImages[2] = '<img class="atvi-image-image" alt="" src="/content/dam/atvi/callofduty/blackops2/cod-bo2/dlc/mdlc-extra-slots.png" title="" height="480" width="752">'
theImages[3] = '<img class="atvi-image-image" alt="" src="/content/dam/atvi/callofduty/blackops2/cod-bo2/dlc/mdlc-nuketown-2025.png" title="" height="412" width="683">'



var j = 0
var p = theImages.length;
var preBuffer = new Array()
for (i = 0; i < p; i++){
preBuffer[i] = new Image()
preBuffer[i].src = theImages[i]
}
var whichImage = Math.round(Math.random()*(p-1));
function showImage(){
document.write(theImages[whichImage]);
}
</script>
</head>
<body>
<SCRIPT LANGUAGE="JavaScript">
showImage();
</script>
</body>
</html>

Vielen Dank im Voraus für Eure Hilfe!

  • Ihnen fehlt ein schließendes quote für den src="" und das Ende des img-Tags ( '/>') in Ihrem Dokument.schreiben' nennen
  • Machen die Leute sich nicht die Mühe endlinien in diesen Tagen?;
  • Warum sollten Sie auch?
  • welche Linie meinst du?
  • Viele Zeilen javascript-Chuck. @Ian ich weiß nicht, irgendwie, warum ich gefragt habe - ich weiß noch aus der guten Praxis, andere Sprachen, die ich Schreibe, sind mehr wählerisch und benötigen Sie. Nur eine gute Gewohnheit, nehme ich an..
  • Zeilen sollten immer geschlossen sein. das Semikolon einfügen gezählt werden sollte als Teil des Debuggers, der nicht Teil des Compilers! der wichtigste Grund, um zu schließen Ihre Linien sind dokumentiert sowie auf andere Orte, ich sage nur hier, dass Sie nicht tun, was Sie denken in zu viele edge-Fällen, die Verwendung des Semikolon-Einfügung zuverlässig. wenn Sie ein js-Profi, und Sie verstehen die Regeln der Aufnahme können Sie nicht fügen Sie Sie, aber dann ein noob ist wird Ihr Skript, verwenden Sie es, passen Sie es, verschieben Sie die wahre ein return true in die nächste Zeile und brechen alles.
  • ausführlich Sprachen wie Java und C).* erfordern ein Semikolon und Leerraum ignorieren. Genial Sprachen wie ruby und javascript behandeln, wie statement-Separatoren, sondern lassen Sie verwenden Sie Semikolons zu/statt. Javascript bedeutet, dass durch das einfügen von Semikolons herum, bis es Sinn macht, so lange es ein newline oder ein Recht lockig. In ruby, es ist eine schlechte Gewohnheit, verwenden Sie ein Semikolon (oder then) und ein Zeilenumbruch. In Javascript, niemand kümmert sich wirklich (außer dass Sie nicht linebreak rechts nach return (oder eine beschriftet Pause), ohne ein zusätzliches Semikolon eingefügt dort). Ich mag Semikolons in prozeduralen code, obwohl
  • wenn Sie split return true auf mehrere Leitungen, was zu brechen, Semikolons oder nicht. Ich glaube nicht, dass ein Semikolon zu motivieren, sagte noobs nicht split-returs entweder.
  • Okay, ich wollte nur, um sicherzustellen, dass Sie nicht glaube, Sie waren notwendig. Ich wie immer auch, aber es ist nicht notwendig. Es ist in manchen Situationen, aber wenn Sie Ihren code strukturieren richtig, sollte es kein problem sein Sie zu nutzen
  • Es gibt nicht "viele Grenzfälle". Es gibt ein paar. Wenn Sie die Sprache kennen und schreiben/strukturieren Sie Ihren code richtig ist, sollten Sie nicht ein problem haben, nicht mit Semikolon. Ich verwende Sie immer, aber es ist weit von notwendig/vorgeschlagen/benötigt. Wenn noobs aufteilen return - Anweisung, dann erhalten Sie eine Ausnahme, und Sie entweder die recherche im Internet oder kommen Sie zu StackOverflow, um herauszufinden, warum. Es gibt kein problem mit, dass
  • github.com/twitter/bootstrap/issues/3057#issuecomment-5135512
  • ich möchte nicht in diese Diskussion hier auch, aber die ersten drei Beiträge Summe das problem Recht gut. Semikolon-Einfügung ist verwirrend für Neulinge und Profis gleichermaßen. und, selbst wenn der compiler einfügen können, Sie es nicht bedeuten, dass Ihr Recht zu machen, tun Sie es.

InformationsquelleAutor Chuck Norris | 2013-04-19
  1. 3

    Haben Sie bereits die voll <img> tag in das array. So einfach nutzen Sie:

    document.write(theImages[whichImage]);

    Zwar würde ich raten von der Verwendung von document.write. Natürlich, in deiner situation, wo es ausgeführt wird, in der Mitte von HTML, ich sehe nicht viel von einem problem. Es wäre schlimm, wenn document.write wurden ausgeführt, nachdem die Seite gerendert wurde. Normalerweise ist die bevorzugte Methode ist so etwas wie der appendChild Methode oder sogar die Einstellung innerHTML, obwohl es würde einige refactoring, um Ihren code zu verwenden.

    Hier ist ein Beispiel, wie ich es einrichten:

    (function () {
    var theImages = [{
        src: "http://www.techinasia.com/techinasia/wp-content/uploads/2009/12/smile.png",
        width: "675",
        height: "467"
    }, {
        src: "https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQdcHlJqgIKNOS0DaEjO31xK1zYtmJlza8z70ljiKFbo2ZgLdh9eA",
        width: "1084",
        height: "732"
    }, {
        src: "http://cdn2-b.examiner.com/sites/default/files/styles/large_lightbox/hash/68/d1/68d11ab242d40c8d5abbe8edb58fd4ed_0.jpg?itok=M3qtK47_",
        width: "200",
        height: "200"
    }];

    var preBuffer = [];
    for (var i = 0, j = theImages.length; i < j; i++) {
        preBuffer[i] = new Image();
        preBuffer[i].src = theImages[i].src;
        preBuffer[i].width = theImages[i].width;
        preBuffer[i].height = theImages[i].height;
    }

    function getRandomInt(min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min;
    }

    window.getRandomImage = function () {
        var whichImage = getRandomInt(0, preBuffer.length - 1);
        return preBuffer[whichImage];
    }
})();

window.onload = function () {
    var newImage = getRandomImage();
    console.log(newImage);
    document.body.appendChild(newImage);
};

    DEMO: http://jsfiddle.net/wFjGv/

    Dieser code verwendet ein neues Objekt, halten Sie die details für jedes Bild. Auf diese Weise können Sie leicht einstellen, und erhalten Sie jedes Bild die Eigenschaften, die Sie benötigen, ohne HTML-hardcoding.

    Es lädt die Bilder vorab in der preBuffer array, und, wenn benötigt, ein Bild abgerufen wird, aus dem array, und in der <body>. Sie können ändern Sie Ihr Ziel nicht in der onload Veranstaltung. Die getRandomImage Funktion gibt ein zufälliges Bild aus dem array. Ich aktualisiert die Methode, einen zufälligen integer-als auch.

    • Ich geändert es zu dokumentieren.schreiben(theImages[whichImage]); aber es ist immer noch nicht funktioniert, ich danke Ihnen für Ihre Hilfe though.
    • Es sollte gut funktionieren. Na ja, ich habe code Hinzugefügt, um meine Antwort, wie ich es handhaben würde, und es scheint zu sein mehr organisiert und funktioniert auch.
    InformationsquelleAutor Ian
  2. 0

    Sind Sie ein <img src= etwas, das nicht ist, was Sie wollen. Array (theImages) ist die Speicherung der gesamten <img> - tags, nicht einfach den link zu diesem Bild.

    Entweder ändern Sie theImages array zum speichern der Werte etwa so:

    theImages[0] = "/content/dam/atvi/callofduty/blackops2/cod-bo2/dlc/mdlc-calling-card-flags.png"

    ODER verwenden Sie das aktuelle setup als image-tag.

    document.write(theImages[whichImage]);

    Auch:

    • Mit Zufallszahlen, sollten Sie wahrscheinlich stick um Math.floor() damit
      Sie Runden über Ihre maximale Länge.

    • var j = 0 fehlt, ist ein ;

    • theImages img-tags nicht geschlossen sind (<img ... />

    InformationsquelleAutor David Starkey
  3. 0

    Versuchen, diese-

    var srcs = [
    "/content/dam/atvi/callofduty/blackops2/cod-bo2/dlc/mdlc-calling-card-flags.png",
    "/content/dam/atvi/callofduty/blackops2/cod-bo2/dlc/mdlc-nuketown-zombies.png",
    "foo/bar.jpg"
    ], imgs = [];
function init() {
    "use strict";
    var i, x, div;
    div = document.createElement('div');
    div.id = 'imageContainer';
    document.querySelector('body').appendChild(div);
    for (i = 0; i < srcs.length; i += 1) {
        x = new Image();
        x.src = srcs[i];
        imgs.push(x);
    }
}
function showRandom() {
    "use strict";
    document.querySelector('#imageContainer').innerHTML = imgs[Math.random * imgs.length];
}
init();

    Hinzufügen, ein zufälliges Bild-

    showRandom();

    PS - sollten Sie nicht verwenden document.write, aber wenn Sie das tun, sollten Sie den stream schließen document.close, zu sagen, der browser fertig laden der Seite. Lesen Sie mehr - MDN Docs JS

    InformationsquelleAutor ShuklaSannidhya
Schreibe einen Kommentar