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;
}
//循环
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标准学习</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....），但也基本上实现了要求
以上就是本文的全部内容，了解更多JavaScript的语法，大家可以查看：《JavaScript 参考教程》、《JavaScript代码风格指南》，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家详细介绍了微信小程序实现点击生成随机验证码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-09-09
由于<input type="file">的value属性石只读的，所以要取消选择只能通过其他途径，此处有2种方法2013-03-03
BootstrapValidator实现注册校验和登录错误提示效果
这篇文章主要为大家详细介绍了Bootstrap Validator实现注册校验和登录错误提示效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-03-03
这篇文章主要介绍了js离开或刷新页面检测(且兼容FF,IE,Chrome)。需要的朋友可以过来参考下，希望对大家有所帮助2014-03-03
这篇文章主要介绍了JS排序算法之冒泡排序，选择排序与插入排序,结合实例形式分析了冒泡排序，选择排序与插入排序的概念、原理及实现方法,需要的朋友可以参考下2017-12-12
ie 处理 gif动画 的onload 事件的一个 bug...2007-04-04
webpack 插件是一个具有 apply 方法的 JavaScript 对象,apply 方法会被 webpack compiler 调用,并且在 整个编译生命周期都可以访问 compiler 对象,这篇文章主要介绍了基于webpack创建plugin并发布npm包,需要的朋友可以参考下2024-07-07
本文为大家详细介绍下javascript中绑定与解绑函数在Ie及Mozilla中的应用，感兴趣的各位可以参考下哈，希望对大家有所帮助2013-06-06
layui点击左侧导航栏,实现不刷新整个页面,只刷新局部的方法
今天小编就为大家分享一篇layui点击左侧导航栏,实现不刷新整个页面,只刷新局部的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
关于document.cookie的使用javascript
构造通用的cookie处理函数 cookie的处理过程比较复杂，并具有一定的相似性。因此可以定义几个函数来完成cookie的通用操作，从而实现代码的复用。2010-10-10
最新评论