임의로 선택한 텍스트를 관련 이미지와 함께 어떻게 표시합니까?

저는 초보자 웹 디자이너로서 어떻게하면 다른 것을 연결할 수 있는지 알아야합니다. 문제는 사이트가 새로 고침 될 때마다 다른 따옴표가 변경된다는 것입니다. 그리고 다른 div 태그에있는 이미지를 사용하여 동일한 작업을 수행해야합니다. 이미지를 연결해야하는 이유는 이미지가 따옴표로 조정되어야하기 때문입니다. 예를 들어 : 이미지 여기에 0임의로 선택한 텍스트를 관련 이미지와 함께 어떻게 표시합니까?

에 인용 0 자바 스크립트 코드 :

var quotes=new Array(); 
quotes[0] = "text1"; 
quotes[1] = "Text2"; 
quotes[2] = "text3"; 
quotes[3] = "text4"; 

var q = quotes.length; 
var whichquote=Math.round(Math.random()*(q-1)); 
function showquote(){document.write(quotes[whichquote]);} 
showquote();

그리고 이것은 자바 스크립트 텍스트있는 코드입니다 : 당신이 뭔가를 가정

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

출처

2013-07-13 nastiark

자바 스크립트로 자바 스크립트가 필요해 보이지 않습니다. 자바 스크립트를 조정해야하고 이미지를 생성하는 것이 무엇이든지 들리는 것 같습니다. –

감사합니다. 어떻게 할 수 있니? – nastiark

FYI (자바 스크립트를 처음 사용하기 때문에) :'new Array'를 사용할 이유가 거의 없습니다. 배열 리터럴을 사용하십시오. 이 경우 : http://pastie.org/8137855 별도로'language' 속성은 90 년대에 사용되지 않았으며'script'의'type'의 기본값은'text/javascript'입니다. 그래서 단지 '만 있으면 충분합니다. 죄송합니다. 귀하의 임의 번호가 잘못되었습니다. 당신은'= Math.round (Math.random() * q)'를 원하지만'q-1'이 아닙니다. –

일부 노트 :

function showquote(){ 
    document.getElementById('quote').innerHTML = quotes[whichquote]; 
    document.getElementsByTagName('img')[whichquote].style.display="block"; 
}

여기에 바이올린을 참조하십시오. 잘못된 방식으로 가져 가지 마십시오. JavaScript를 처음 사용하는 사람입니다! 모두가 한 번, 사람들이 우리가 배우는 한 가지 방법입니다.

new Array을 사용할 이유가 거의 없습니다. 배열 리터럴을 사용하십시오. 이 경우 :
```
var quotes = [ 
    "text1", 
    "Text2", 
    "text3", 
    "text4" 
]; 
```
language 속성은 90 년대에 사용되지 않습니다, 그리고 script에 type의 기본 값은 text/javascript입니다. 따라서 <script src="..."></script> 만 있으면됩니다.
임의의 숫자가 잘못되었습니다. Math.random은 0 (포함)에서 1 (독점)까지의 숫자를 반환하므로 숫자에서 1을 뺀 것이 아니라 이미지 수를 곱하면됩니다.
document.write은 피해야합니다. 현대 웹 프로그래밍에서 사용하는 이유는 거의 없습니다.

여기에 설명 된 방법에 접근하는 방법이 있습니다. Live Example | Live Source

(두 개의 항목 만 있기 때문에 새로 고침해야합니다. 따라서 동일한 항목을 볼 확률이 매우 높습니다.) 내가 거기에 무슨 짓을

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=utf-8 /> 
<title>Random Text Plus Image</title> 
</head> 
<body> 
    <div id="quote"></div> 
    <script> 
    (function() { 
     var quotes = [ 
     { 
      text: "text1", 
      img: "http://i.stack.imgur.com/FqBE6.jpg?s=32&g=1" 
     }, 
     { 
      text: "text2", 
      img: "https://www.gravatar.com/avatar/ca3e484c121268e4c8302616b2395eb9?s=32&d=identicon&r=PG", 
     } 
     ]; 
     var quote = quotes[Math.floor(Math.random() * quotes.length)]; 
     document.getElementById("quote").innerHTML = 
     '<p>' + quote.text + '</p>' + 
     '<img src="' + quote.img + '">'; 
    })(); 
    </script> 
</body> 
</html>

I 출력 요소는 <div id="quote"></div>, 견적 및 이미지를 개최. 대신 document.write입니다.
나는 배열 리터럴을 사용하지만, 문자 그대로의 내 배열은 객체 리터럴 포함 (text: "text1"으로 {...} 일을하고있는 등). 따라서 내 배열에는 각 객체의 속성이 text (해당 견적의 텍스트)이고 img (사용할 이미지의 URL) 인 객체가 포함되어 있습니다.
무작위로 고쳤습니다.
텍스트 출력
이미지 (I 가정 HTML 태그이다), I는 않는 코드 위 quotediv I 출력을 설정함으로써 innerHTML.
저는 모든 코드를 즉시 호출하는 둘러싼 함수에 넣었습니다. 이렇게하면 전역 변수가 작성되지 않습니다.

희망이 있습니다.

출처

2013-07-13 17:43:15

나에게 제공하고 시간을내어 설명하는 데 도움을 주셔서 대단히 감사합니다! 나는 더 잘 배우고 정말 훌륭한 전문가가되기를 바랍니다. 내게 준 답은 제게 많은 도움이되었습니다! :) 나는 모두가 좋은 하루 보내길 바란다. – nastiark

을 다음과 같은 html :

<div id="quote"></div> 
<div> 
    <img class="image" src="http://www.placehold.it/100x50&text=1" /> 
    <img class="image" src="http://www.placehold.it/100x50&text=2" /> 
    <img class="image" src="http://www.placehold.it/100x50&text=3" /> 
    <img class="image" src="http://www.placehold.it/100x50&text=4" /> 
</div>

및 css

.image { 
    display: none; 
}

그런 다음 당신은 당신의 showquote 기능이 같은 작업을 수행해야합니다 그 코드에 http://jsfiddle.net/fYPY7/

출처

2013-07-13 17:42:07 MiRaIT

예! 고맙습니다!!!! :디!!!! 너는 내 하루를 보냈다 !!! :) – nastiark

임의로 선택한 텍스트를 관련 이미지와 함께 어떻게 표시합니까?

답변

관련 문제