Javascript随机标签云代码实例


Posted in Javascript onJune 21, 2016

先来看一下效果

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代码风格指南》,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
兼容Mozilla必须知道的知识。
Jan 09 Javascript
把textarea中字符串里含有的回车换行替换成&amp;lt;br&amp;gt;的javascript代码
Apr 20 Javascript
jQuery 性能优化指南(2)
May 21 Javascript
JavaScript的eval JSON object问题
Nov 15 Javascript
Javascript(AJAX)解析XML的代码(兼容FIREFOX/IE)
Jul 11 Javascript
js实现快速分享功能(你的文章分享工具)
Jun 25 Javascript
javascript 循环调用示例介绍
Nov 20 Javascript
从零学JSON之JSON数据结构
May 19 Javascript
JavaScript获取当前日期是星期几的方法
Apr 06 Javascript
Vue.js基础指令实例讲解(各种数据绑定、表单渲染大总结)
Jul 03 Javascript
js实现3D照片墙效果
Oct 28 Javascript
Vue性能优化的方法
Jul 30 Javascript
Bootstrap轮播插件简单使用方法介绍
Jun 21 #Javascript
JS实现的跨浏览器解析XML文件实例
Jun 21 #Javascript
第四篇Bootstrap网格系统偏移列和嵌套列
Jun 21 #Javascript
第三篇Bootstrap网格基础
Jun 21 #Javascript
Bootstrap三种表单布局的使用方法
Jun 21 #Javascript
第二篇Bootstrap起步
Jun 21 #Javascript
基于zepto.js简单实现上传图片
Jun 21 #Javascript
You might like
谈谈新手如何学习PHP 默默经典版本
2009/08/04 PHP
php遍历解析xml字符串的方法
2016/05/05 PHP
js实现的网站首页随机公告随机公告
2007/03/14 Javascript
从盛大通行证上摘下来的身份证验证js代码
2011/01/11 Javascript
Extjs 3.3切换tab隐藏相应工具栏出现空白解决
2013/04/02 Javascript
利用js的Node遍历找到repeater的一个字段实例介绍
2013/04/25 Javascript
javascript特殊用法示例介绍
2013/11/29 Javascript
JS获得QQ号码的昵称,头像,生日的简单实例
2013/12/04 Javascript
js 点击页面其他地方关闭弹出层(示例代码)
2013/12/24 Javascript
js实现按Ctrl+Enter发送效果
2014/09/18 Javascript
JS实现部分HTML固定页面顶部随屏滚动效果
2015/12/24 Javascript
javascript实现checkbox复选框实例代码
2016/01/10 Javascript
js事件处理程序跨浏览器解决方案
2016/03/27 Javascript
Zabbix添加Node.js监控的方法
2016/10/20 Javascript
js原生实现FastClick事件的实例
2016/11/20 Javascript
jQuery中的siblings()是什么意思(推荐)
2016/12/29 Javascript
vue自定义过滤器创建和使用方法详解
2017/11/06 Javascript
使用vue脚手架(vue-cli)搭建一个项目详解
2019/05/09 Javascript
Element中Slider滑块的具体使用
2020/07/29 Javascript
python中os操作文件及文件路径实例汇总
2015/01/15 Python
python写入xml文件的方法
2015/05/08 Python
python pycurl验证basic和digest认证的方法
2018/05/02 Python
pygame游戏之旅 载入小车图片、更新窗口
2018/11/20 Python
Python装饰器基础概念与用法详解
2018/12/22 Python
python 多线程重启方法
2019/02/18 Python
Python 利用高德地图api实现经纬度与地址的批量转换
2019/08/14 Python
解决import tensorflow导致jupyter内核死亡的问题
2021/02/06 Python
Reformation官网:美国女装品牌
2018/09/14 全球购物
旅游管理本科生求职信
2013/10/14 职场文书
学院书画协会部门职责
2013/11/28 职场文书
考核工作实施方案
2014/03/30 职场文书
交通志愿者活动总结
2014/06/27 职场文书
入党积极分子自我批评思想汇报
2014/10/10 职场文书
2014个人年终工作总结范文
2014/12/15 职场文书
2019思想汇报范文
2019/05/21 职场文书
浅谈Redis的keys命令到底有多慢
2021/10/05 Redis