快捷導(dǎo)航

Javascript隨機(jī)標(biāo)簽云代碼實(shí)例

更新時(shí)間：2016年06月21日 14:51:27 作者：沫魚

這篇文章主要分享一個(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)格指南》，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

JavaScript內(nèi)置對(duì)象math,global功能與用法實(shí)例分析
這篇文章主要介紹了JavaScript內(nèi)置對(duì)象math,global功能與用法,結(jié)合實(shí)例形式分析了javascript中內(nèi)置對(duì)象math與global的基本概念、功能及使用方法,需要的朋友可以參考下
2019-06-06
JavaScript實(shí)現(xiàn)前端飛機(jī)大戰(zhàn)小游戲
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)前端飛機(jī)大戰(zhàn)小游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-05-05
js 冒泡事件與事件監(jiān)聽(tīng)使用分析
js 冒泡事件與事件監(jiān)聽(tīng) 代碼分析
2009-09-09
購(gòu)物車選中得到價(jià)格實(shí)現(xiàn)示例
本文為大家介紹下購(gòu)物車如何實(shí)現(xiàn)選中得到價(jià)格，下面有個(gè)不錯(cuò)的示例，大家可以參考下
2014-01-01
JS限制Textarea文本域字符個(gè)數(shù)的具體實(shí)現(xiàn)
這篇文章介紹了JS限制Textarea文本域字符個(gè)數(shù)的具體實(shí)現(xiàn)，有需要的朋友可以參考一下
2013-08-08
js實(shí)現(xiàn)快速分享功能(你的文章分享工具)
這是一款簡(jiǎn)單易用的文章分享工具，您只需將下面的html代碼拷貝到模板中就可以實(shí)現(xiàn)文章快速分享功能，具體的實(shí)現(xiàn)如下，感興趣的朋友可以參考下哈，希望對(duì)大家有所幫助
2013-06-06
關(guān)于Mozilla瀏覽器不支持innerText的解決辦法
在各大瀏覽器中，除Mozilla瀏覽器外，幾乎都支持一個(gè)元素的屬性：innerText。我們可以通過(guò)它來(lái)快速獲取某個(gè)元素的內(nèi)的文本。
2011-01-01
JavaScript實(shí)現(xiàn)將UPC轉(zhuǎn)換成ISBN的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)將UPC轉(zhuǎn)換成ISBN的方法,涉及javascript字符串操作的相關(guān)技巧,需要的朋友可以參考下
2015-05-05
JSON格式的鍵盤編碼對(duì)照表
這篇文章主要介紹了JSON格式的鍵盤編碼對(duì)照表,本文給出英文鍵名、對(duì)應(yīng)數(shù)值和中文注釋,需要的朋友可以參考下
2015-01-01
24個(gè)解決實(shí)際問(wèn)題的ES6代碼片段(小結(jié))
這篇文章主要介紹了24個(gè)解決實(shí)際問(wèn)題的ES6代碼片段，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-02-02