最初に効果を見てみましょう
コードは次のとおりです
<!doctype html> <html> <head> <head> charset = "utf-8"> <title>ランダムタグクラウド</title> <style type = "text/css">*{margin:0;パディング:0} a {Text-Decoration:none} #wrap {width:400px;マージン:auto} </style> <script type = "text/javascript"> window.onload = function(){var obox = document.getElementbyId( "wrap"); var obj = obox.getelementsbytagname( "a"); //ランダムメソッド関数rand(num){return parseint(math.random()*num+1); } //ランダムカラー値関数randomcolor(){var str = math.ceil(math.random()*16777215).toString(16); if(str.length <6){str = "0"+str; } return str; } // loop for(len = obj.length、i = len; i - ;){obj [i] .classname = "color"+rand(5); obj [i] .style.zindex = rand(5); obj [i] .style.fontsize = rand(12)+12+ "px"; // obj [i] .style.background = "#"+randomcolor(); obj [i] .style.color = "#"+randomcolor(); obj [i] .onmouseover = function(){this.style.background = "#"+randomcolor(); } obj [i] .onmouseout = function(){this.style.background = "none"; }}} </scrip> </head> <body> <div id = "wrap"> <a href = "#"> web標準学習</a> <a href = "#"> css </a> <a href = "> javascript </a> <a href ="# " href = "#"> video </a> <a href = "#"> audio </a> <a href = "#"> jquery </a> <a href = "#"> jquery </a> <a href = "> jquerymobile </a> <a href =" href = "#"> chrome </a> <a href = "#"> opera </a> <a href = "#"> ie9 </a> <a href = "#"> css3.0 </a> < href = "#"> href = "#"> google </a> <a href = "#"> jobs </a> </div> </body> </html>このアルゴリズムは比較的単純です(私はOrz ...を理解できます...)が、基本的に要件を実装します
上記は、この記事のコンテンツ全体です。 JavaScriptの詳細については、「JavaScriptリファレンスチュートリアル」と「JavaScriptコードスタイルガイド」をご覧ください。また、誰もがwulin.comをもっとサポートすることを願っています。