效果预览：

源码分享：

<!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. 交互神器 Facebook Origami

    最近用到了一个非常强大的工具,这是一款由 facebook 出品的原型设计软件,老规矩我们先来看一下效果.大家也可以先进去官网看看效果Origami 官网 scroll.gif swipe.gif O ...

  2. wemall app商城源码Android数据的SharedPreferences储存方式

    wemall-mobile是基于WeMall的Android app商城,只需要在原商城目录下上传接口文件即可完成服务端的配置,客户端可定制修改.本文分享wemall app商城源码Android数据 ...

  3. 1339 / 1163: [Baltic2008]Mafia

    1163: [Baltic2008]Mafia Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 96  Solved: 60[Submit][Statu ...

  4. 1592: [Usaco2008 Feb]Making the Grade 路面修整

    1592: [Usaco2008 Feb]Making the Grade 路面修整 Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 428  Solv ...

  5. loadrunner：Auto Correlate自动定位瓶颈

    Auto correlate可以根据数据趋势,自动分析出可能影响目标性能的数据项,通过它可以很方便地找出哪些数据之间有明显的相互依赖性. 下面以分析影响平均响应时间的windows资源为例,讲解Aut ...

  6. Burpsuite暴力破解

    神器:burpsuite 闲话不多说,直接开搞 1.打开文件BurpLoader.jar,进入Proxy--Options,启用代理 2.打开浏览器(IE),进入Internet选项-连接-局域网设置 ...

  7. Spring 4 支持的 Java 8 特性

    Spring 框架 4 支持 Java 8 语言和 API 功能.在本文中,我们将重点放在 Spring 4 支持新的 Java 8 的功能.最重要的是 Lambda 表达式,方法引用,JSR-310 ...

  8. java学习笔记----数据类型，变量，常量

    一.数据类型 1.基本类型(8种,又称内置数据类型).6种数字类型(byte,short,int,long,float,double),一种字符型(char),一种布尔类型(boolean). byt ...

  9. linux 下日常使用便利工具

    Nautilus 你工作中有在GUI和命令行之间切来切去吗?当你总是要在命令行中输入你要进入的目录的时候,你有沮丧无奈过吗?如果有的话,那么,你一定要试下这个nautilus插件 —— nautilu ...

  10. 维护Study

    ##老师发了一个study来让我们纠错维护,整个软件是日程管理系统,分为欢迎界面,登录 注册界面,提醒界面添加日程界面,还有个人中心等.一些主要代码老师让我们把缺失部分去维护.首先我们读一下主要代码# ...