Javascript隨機標簽云代碼實例
更新時間：2016年06月21日 14:51:27 作者：沫魚
這篇文章主要分享一個Javascript隨機標簽云代碼實例,需要的朋友可以參考下。
先來看一下效果
代碼如下
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>隨機標簽云</title>
<style type="text/css">
*{
margin:0;
padding:0
}
a{
text-decoration:none
}
#wrap{
width:400px;
margin:auto
}
</style>
<script type="text/javascript">
window.onload=function(){
var obox=document.getElementById("wrap");
var obj=obox.getElementsByTagName("a");
//隨機方法
function rand(num){
return parseInt(Math.random()*num+1);
}
//隨機顏色值
function randomcolor(){
var str=Math.ceil(Math.random()*16777215).toString(16);
if(str.length<6){
str="0"+str;
}
return str;
}
//循環(huán)
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";
}
}
}
</script>
</head>
<body>
<div id="wrap">
<a href="#">web標準學(xué)習(xí)</a>
<a href="#">css</a>
<a href="#">javascript</a>
<a href="#">html5</a>
<a href="#">canvas</a>
<a href="#">video</a>
<a href="#">audio</a>
<a href="#">jQuery</a>
<a href="#">jQuerymobile</a>
<a href="#">flash</a>
<a href="#">firefox</a>
<a href="#">chrome</a>
<a href="#">opera</a>
<a href="#">IE9</a>
<a href="#">css3.0</a>
<a href="#">andriod</a>
<a href="#">apple</a>
<a href="#">google</a>
<a href="#">jobs</a>
</div>
</body>
</html>
這個的算法較為簡單（偶能看得懂 orz....），但也基本上實現(xiàn)了要求
以上就是本文的全部內(nèi)容，了解更多JavaScript的語法，大家可以查看：《JavaScript 參考教程》、《JavaScript代碼風(fēng)格指南》，也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript內(nèi)置對象math,global功能與用法實例分析
這篇文章主要介紹了JavaScript內(nèi)置對象math,global功能與用法,結(jié)合實例形式分析了javascript中內(nèi)置對象math與global的基本概念、功能及使用方法,需要的朋友可以參考下2019-06-06
JavaScript實現(xiàn)前端飛機大戰(zhàn)小游戲
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)前端飛機大戰(zhàn)小游戲，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-05-05
js 冒泡事件與事件監(jiān)聽 代碼分析2009-09-09
本文為大家介紹下購物車如何實現(xiàn)選中得到價格，下面有個不錯的示例，大家可以參考下2014-01-01
JS限制Textarea文本域字符個數(shù)的具體實現(xiàn)
這篇文章介紹了JS限制Textarea文本域字符個數(shù)的具體實現(xiàn)，有需要的朋友可以參考一下2013-08-08
這是一款簡單易用的文章分享工具，您只需將下面的html代碼拷貝到模板中就可以實現(xiàn)文章快速分享功能，具體的實現(xiàn)如下，感興趣的朋友可以參考下哈，希望對大家有所幫助2013-06-06
關(guān)于Mozilla瀏覽器不支持innerText的解決辦法
在各大瀏覽器中，除Mozilla瀏覽器外，幾乎都支持一個元素的屬性：innerText。我們可以通過它來快速獲取某個元素的內(nèi)的文本。2011-01-01
JavaScript實現(xiàn)將UPC轉(zhuǎn)換成ISBN的方法
這篇文章主要介紹了JavaScript實現(xiàn)將UPC轉(zhuǎn)換成ISBN的方法,涉及javascript字符串操作的相關(guān)技巧,需要的朋友可以參考下2015-05-05
這篇文章主要介紹了JSON格式的鍵盤編碼對照表,本文給出英文鍵名、對應(yīng)數(shù)值和中文注釋,需要的朋友可以參考下2015-01-01
這篇文章主要介紹了24個解決實際問題的ES6代碼片段，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02