2016-05-17 2 views
0

Я искал довольно долгое время и не могу найти то, что искал, поэтому, надеюсь, кто-то может помочь. Я совершенно новичок в написании сценариев, так голый со мной :)Изменение текста, отображаемого на веб-сайте

Что я хочу сделать, это изменить одно слово текста на моей веб-странице, чтобы пробежать список слов.

т.е.

<p>My favorite hobby is <u>fishing</u>!</p> 

Где «рыбалка» изменится примерно через 2 секунды до следующего слова списка хобби.

Ближайший пример я нашел это

<div id="welcome"> 
<h3>Welcome, welcome, welcome!</h3> 
<h3>Hang around a bit (for a surprise).</h3> 
</div> 
function ChangeIt() { 
    var newcontent = ' 
    <h1><a href="page.html">Click here</a> ' + 
    'for a web page with more of the same.</h1>'; 
    WriteContentIntoID("welcome",newcontent); 
} 
setTimeout("ChangeIt()",20000); 

Но я не могу заставить его работать.

ответ

1

Вот что-то простое, используя setInterval():

<p>My favorite hobby is <span id="ch">fishing</span>!</p> 

    <script> 
    var activities = ['eating', 'burping','coding']; 
    var i=0; 

    setInterval(function(){ 
     document.getElementById("ch").innerHTML = activities[i]; 

     if (i < activities.length-1) { 
     i++; 
     } else { 
     i=0; 
     } 

    }, 1000); 
    </script> 

FIDDLE Demo

EDIT: изменены, чтобы сделать это бесконечный цикл.

+0

Это работает отлично, если только он не доходит до конца переменных, я хочу, чтобы он просто повторялся. – salvador5266

+0

Только что отредактировал .... – WillardSolutions

+1

Теперь это прекрасно! Огромное спасибо. Хотелось бы, чтобы я спросила hrs ago LOL! – salvador5266

0

Используйте это:

<p>My favorite hobby is <u>fishing</u>!</p> 

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 

<script type="text/javascript"> 
function getnewword(){ 
    return "me";// fix this section with getting new word! 
} 
function ChangeIt() { 
    $("p u").html(getnewword()); 
    setTimeout("ChangeIt()",2000); 
} 
setTimeout("ChangeIt()",2000); 
<script> 
0

Программирование прохладно. Вы должны попробовать с помощью начинающих JavaScript-руководств, таких как http://www.w3schools.com/js/.

Вы должны инкапсулировать свой скрипт с помощью тега скрипта, и вы должны использовать селекторы (например, document.getElementById).

Это полный код:

<div id="welcome"> 
<h3>Welcome, welcome, welcome!</h3> 
<h3 id="hobby">Hang around a bit (for a surprise).</h3> 
</div> 
<script> 
// we start with 0 
var currentHobby = 0; 

function ChangeIt() { 
    // hobbies array 
    var hobbies = ["fishing", "eating", "drinking", "programming"]; 

    // we save the current hobby in hobbyString and increment the currentHobby number 
    var hobbyString = hobbies[currentHobby]; 
    currentHobby++; 

    // if the currentHobby number is too big, we start with 0 again 
    if(currentHobby >= hobbies.length) { 
     currentHobby = 0; 
    } 

    document.getElementById("hobby").innerHTML = "My favourite hobby is " + hobbyString; 
} 
setInterval("ChangeIt()",2000); 
</script> 
0

HTML ЧАСТЬ

I am going to <span id="changingtext">InitialWord</span> 

Javascript Часть - Вам нужно JQuery и вызвать следующий на onLoad

var texts = ["France", "Italy", "Ireland", "Wales"]; 
var count = 0; 
function updateval() { 
    $("#changingtext").text(texts[count]); 
    count < 4 ? count++ : count = 0; 
} 
setInterval(updateval, 2000); 

Рабочей JS Fiddle Ссылку Click Here

Нажмите на заходящей кнопке Javascript на JsFiddle к проверьте введенные настройки.

Смежные вопросы