テキストのランダムな配置を作成するのに役立つ

テキストボックス内にテキストがランダムに左、中央、または右に表示されるようにします。テキストのランダムな配置を作成するのに役立つ

はここでテストページです：www.creativewritingstudio.com/Home_2.html

以下は、私が使用していたスクリプトです：

<font face="helvetica" color="1b1b1b" size="5px" repeat> 

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>Random Text w/ jQuery</title> 
<style type="text/css"> 
#text-box { 

padding: 4px; 
width: 602px; 
} 
#text-content { 
color: #1b1b1b; 
text-align : center; 

} 
#text-reload { 

display: block; 
margin-top: 4px; 
text-align: right; 
outline: none; 
} 
</style> 

</head> 
<body> 

<div id="text-box"> 
<div id="text-content"></div> <!-- random text goes in ther --> 

</div> 
</body> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 
    var textArray = [ 
    'Flow', 
    'Precision', 
    'Voice', 
    'Imagery', 
    'Pace', 
    'Unity', 
    'Word Choice', 
    'Rhythm', 
    'Inspiration', 
    'Balance', 
    'Clarity', 
    'Simplicity', 
    'Revision', 
    'Discipline', 
    'Fundamentals', 
    'Dedication', 
    'Practice', 
    ]; 
    $('#text-content').loadText(textArray, 5500); // (array, interval) 
}); 
// custom jquery plugin loadText() 
$.fn.loadText = function(textArray, interval) { 
    return this.each(function() { 
    var obj = $(this); 
    obj.fadeOut('slow', function() { 
    obj.empty().html(random_array(textArray)); 
    obj.fadeIn('slow'); 
    }); 
    timeOut = setTimeout(function(){ obj.loadText(textArray, interval)}, interval); 
    // reload random text (if not animated) -- entirely optional, can be removed, along  with the reload link above (<a href="javascript:;" id="text-reload"><em>randomize</em></a>) 
    $("#text-reload").click(function(){ 
    if(!obj.is(':animated')) { clearTimeout(timeOut); obj.loadText(textArray,  interval);} // animation check prevents "too much recursion" error in jQuery 
    }); 
    }); 
} 
//public function 
function random_array(aArray) { 
    var rand = Math.floor(Math.random() * aArray.length + aArray.length); 
    var randArray = aArray[ rand - aArray.length ]; 
    return randArray; 
} 
</script> 
</html>

多くのおかげで！

出典

2011-01-17 Mindful

私は誰もがそれを打つ前に、深刻な再フォーマットが必要であると想像します。 –

かなり複雑なコードです。

<div id="myid">hello</div> 
<script type="text/javascript"> 
window.onload=function(){ 
    var alignarray=['left','center','right']; 
    var elem=document.getElementById('myid'); 
    elem.style.textAlign=alignarray[Math.round(Math.random()*2)]; 
} 
</script>

EDIT：これは何をしたいの線に沿って、おそらくもっとある：ここでは、ランダム要素のテキスト揃えたJavaScriptのビットです。また

<div id="myid">hello</div> 
<script type="text/javascript"> 
var myarray=['hello','goodbye','gone tomorrow','I like apples']; 
var elem=document.getElementById('myid'); 
window.setInterval(function(){ 
    elem.innerHTML=myarray[Math.round((myarray.length-1)*Math.random())]; 
},1500); 
</script>

は、心に留めておくこと1500手段1秒半で、テキストだけでなく、myarrayの任意のHTMLを入力することができます。

出典

2011-01-17 09:16:42

こんにちは。フィードバックに感謝します。何らかの理由で、私はテキストをランダムに移動するjavascriptを得ることができません。完全なスクリプトを貼り付けてください。それは有り難いです。 – Mindful

私はあなたが「コンパイル」されていることを知りません。あなたが望むなら、それをいくつかのHTMLと混在させることができます。 –

はい、ありがとうございます。私が作成した完全なスクリプトのテキストはランダムに配置されます - 良い！しかし、それは毎秒約10回、場所ごとにジャンプします！ – Mindful

テキストのランダムな配置を作成するのに役立つ

答えて

関連する問題