Javascript隨機(jī)標(biāo)簽云代碼實(shí)例
更新時(shí)間：2016年06月21日 14:51:27 作者：沫魚(yú)
這篇文章主要分享一個(gè)Javascript隨機(jī)標(biāo)簽云代碼實(shí)例,需要的朋友可以參考下。
先來(lái)看一下效果
代碼如下
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>隨機(jī)標(biāo)簽云</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");
//隨機(jī)方法
function rand(num){
return parseInt(Math.random()*num+1);
}
//隨機(jī)顏色值
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標(biāo)準(zhǔn)學(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>
這個(gè)的算法較為簡(jiǎn)單（偶能看得懂 orz....），但也基本上實(shí)現(xiàn)了要求
以上就是本文的全部?jī)?nèi)容，了解更多JavaScript的語(yǔ)法，大家可以查看：《JavaScript 參考教程》、《JavaScript代碼風(fēng)格指南》，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- 用JS實(shí)現(xiàn)3D球狀標(biāo)簽云示例代碼
- js簡(jiǎn)單實(shí)現(xiàn)標(biāo)簽云效果實(shí)例
- javascript實(shí)現(xiàn)動(dòng)態(tài)標(biāo)簽云
- JavaScript實(shí)現(xiàn)的圓形浮動(dòng)標(biāo)簽云效果實(shí)例
- 教你用javascript實(shí)現(xiàn)隨機(jī)標(biāo)簽云效果_附代碼
- 深入解析JS實(shí)現(xiàn)3D標(biāo)簽云的原理與方法
- jquery 3D 標(biāo)簽云示例代碼
- vue實(shí)現(xiàn)標(biāo)簽云效果的方法詳解
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了JS輪播圖實(shí)現(xiàn)簡(jiǎn)單代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08
js實(shí)現(xiàn)圖片無(wú)縫循環(huán)輪播
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)圖片無(wú)縫循環(huán)輪播，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-10-10
這篇文章主要為大家詳細(xì)介紹了十大熱門(mén)的JavaScript框架和庫(kù)，前端必備，感興趣的小伙伴們可以參考一下2017-03-03
Javascript技術(shù)棧中的四種依賴(lài)注入詳解
這篇文章主要為大家詳細(xì)介紹了Javascript技術(shù)棧中的四種依賴(lài)注入，感興趣的小伙伴們可以參考一下2016-02-02
原生javascript實(shí)現(xiàn)拖動(dòng)元素示例代碼
首先改變被拖動(dòng)元素的布局屬性，接著捕捉鼠標(biāo)事件，當(dāng)觸發(fā)mousedown時(shí)，記錄下當(dāng)前鼠標(biāo)在元素中的相對(duì)位置，接著處理mousemove事件2014-09-09
淺談typescript中keyof與typeof操作符用法
本文主要介紹了typescript中keyof與typeof操作符用法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06
淺談在fetch方法中添加header后遇到的預(yù)檢請(qǐng)求問(wèn)題
下面小編就為大家?guī)?lái)一篇淺談在fetch方法中添加header后遇到的預(yù)檢請(qǐng)求問(wèn)題。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-08-08 
js前臺(tái)分頁(yè)顯示后端JAVA數(shù)據(jù)響應(yīng)
js前臺(tái)分頁(yè)顯示使用jquery1.8.7框架，本文目的主要給那些剛?cè)胄熊浖_(kāi)發(fā)，喜歡這也看看，程序需要有投入才有收獲感興趣的你可不要錯(cuò)過(guò)了哈，希望可以幫助到你
2013-03-03 
JS實(shí)現(xiàn)環(huán)形進(jìn)度條（從0到100%）效果
這篇文章主要介紹了JS實(shí)現(xiàn)環(huán)形進(jìn)度條（從0到100%）效果的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2016-07-07