效果预览：

源码分享：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #box{
            width: 300px;
            border: 1px solid #d5d5d5;
            padding: 10px;
            margin: 100px auto;
            overflow: hidden;
        }
        #box a{
            display: block;
            float: left;
            height: 30px;
            line-height: 30px;
            padding: 0 10px;
            color: #fff;
            background: #000;
            margin: 0 10px 10px 0;
            text-decoration: none;
            -webkit-border-radius: 4px;
            -moz-border-radius: 4px;
            border-radius: 4px;
            font-family: "Microsoft YaHei";
        }
    </style>
</head>
<body>
<div id="box">
    <a href="#">Java</a>
    <a href="#">Css</a>
    <a href="#">HTML</a>
    <a href="#">JavaScript</a>
    <a href="#">前端优化</a>
    <a href="#">前端开发</a>
    <a href="#">Java</a>
    <a href="#">Css</a>
    <a href="#">HTML</a>
    <a href="#">JavaScript</a>
    <a href="#">前端优化</a>
    <a href="#">前端开发</a>
    <a href="#">Java</a>
    <a href="#">Css</a>
    <a href="#">HTML</a>
    <a href="#">JavaScript</a>
    <a href="#">前端优化</a>
    <a href="#">前端开发</a>
</div>
<script>
    window.onload = function () {
        //获取节点
        var oBox = document.getElementById('box');
        var aList = oBox.getElementsByTagName('a');
        for(var i=0;i<aList.length;i++)
        {
            //设置背景颜色
            aList[i].style.background = randColor();
        };
        console.log(randColor());
    };

    //随机色方法
    function randColor()
    {
        var colors = Math.floor(Math.random() * (255 * 255 * 255));
        colors = colors.toString(16);
        if( colors.length < 6 )
        {
            colors = '0'+colors;
        }
        return '#'+colors;
    };
</script>
</body>
</html>

[原创] JavaScript实现简单的颜色类标签云的更多相关文章

  1. javascript实战 : 简单的颜色渐变

    HTML <div id="color"></div> CSS .item{ display:inline-block; margin:10px; widt ...

  2. SP2010 3D标签云Web部分--很酷的效果，强烈推荐！！

    SP2010 3D标签云Web部分--很酷的效果.强烈推荐! ! 项目描述叙事         基于简单Flash的3D标签云Web部件.SP Server 2010使用. 建立在内置标签云Web部件 ...

  3. [原创]Javascript模拟“类”的综合实现方式以及部分细节【截至ES6】

    [原创]Javascript模拟“类”的综合实现方式以及部分细节[截至ES6] 前言   最近几个旧项目里使用的图片编辑插件出现Bug, 经Review 后确定需要在其内外均做些改动,但是头疼的发现部 ...

  4. 初学HTML 常见的标签(三) 插入类标签

    第三篇博客, 这次说的是插入链接类标签, 我们平常在网页中经常能看到蓝色的链接类标签, 或者是一张图片, 一个电邮, 这些都是插入链接类的标签起的作用. <a></a>链接标签 ...

  5. [原创]JavaScript继承详解

    原文链接:http://www.cnblogs.com/sanshi/archive/2009/07/08/1519036.html 面向对象与基于对象 几乎每个开发人员都有面向对象语言(比如C++. ...

  6. JavaScript基于对象(面向对象)<一>类和对象

    javascript中一切皆对象,比如:Array,Date.....这些都是对象.javascript中没有class的定义,function既是定义函数,也可以是定义类.function Obj( ...

  7. 一个简单的jsp自定义标签

    学到了一个简单的jsp自定义标签,后面有更多的例子,会更新出来: 例子1: 步骤: 1.编写标签实现类: 继承javax.servlet.jsp.tagext.SimpleTagSupport; 重写 ...

  8. javascript组件开发之基类继承实现

    上一篇文章大概的介绍了一下关于javascript组件的开发方式,这篇文章主要详细记一下基类的编写,这个基类主要是实现继承的功能 为什么要封装基类? 由于这次重构项目需要对各种组件进行封装,并且这些组 ...

  9. Javascript的简单测试环境

    在<JavaScript忍者秘籍>2.4测试条件基础知识中,作者给出了一个精简版的assert和assert组的实现,对于初学者而言,这无疑是一个很好的例子,既让我们得到了一个好用的小工具 ...

随机推荐

  1. TypeScript设计模式之职责链、状态

    看看用TypeScript怎样实现常见的设计模式,顺便复习一下. 学模式最重要的不是记UML,而是知道什么模式可以解决什么样的问题,在做项目时碰到问题可以想到用哪个模式可以解决,UML忘了可以查,思想 ...

  2. koahub.js 0.09 发布，新增钩子机制

    koahubjs发布0.09 新增钩子机制添加钩子机制,控制器钩子和函数钩子修复自动加载bug,实现除自动加载导出的default外,还能自动加载其他的方法记koahubjs钩子开发过程在使用koah ...

  3. JS实现购物车特效

    学习通过JavaScript实现类似于淘宝的购物车效果,包括商品的单选.全选.删除.修改数量.价格计算.数目计算.预览等功能. 1. 实现兼容低版本IE的getElementsByClassName( ...

  4. 双系统删除Ubuntu后出现grub界面而无法正常启动Windows系统的解决方法

    第一次安装双系统的时候由于不怎么会弄,设置了ubuntu引导windows,这种方法是非常不推荐的,因为当ubuntu出现问题或者是当你不再使用ubuntu的时候,删除ubuntu就会成为一个很麻烦的 ...

  5. ASP.NET MVC 创建控制器类过程

    MvcHandler.ProcessRequestInit()方法: 1.1获取控制器的名称string requiredString = this.RequestContext.RouteData. ...

  6. 关于数据库与JAVA连接及其出现问题的解决方式

    数据库连接java的方式一共有两个 建立JDBC-ODBC桥接器 加载纯JAVA数据库驱动程序 注意: JDBC-ODBC桥接器无需下载数据库的驱动程序,但是JDK1.8已经把JDBC-ODBC桥接器 ...

  7. Static语句块和初始语句块的使用---2015年10月恒生电子笔试试卷

    package lhm.test; /** * @author lenovo * */public class Person { private int id; private static int ...

  8. 【树莓派】制作树莓派最小镜像：img裁剪瘦身

    制作树莓派镜像,可以参考这篇文章:http://blog.csdn.net/talkxin/article/details/50456282 摘录部分要点内容如下(如果作者不允许转载,请联系即删除): ...

  9. Git的安装使用和基本命令(一)

    版本控制系统是每一个程序员的必备神器,我相信任何一个程序员都要用到版本控制系统,它的强大之处我就不作解释了,在这我将Git(分布式版本控制系统)的安装使用和基本的命令给初学者介绍一下(在linux系统 ...

  10. VisualVM监控远程主机上的JAVA应用程序

    使用VisualVM监控远程主机上JAVA应用程序时,需要开启远程主机上的远程监控访问,或者在远程JAVA应用程序启动时,开启远程监控选项,两种方法,选择其中一种就可以开启远程监控功能,配置完成后就可 ...