效果预览：

源码分享：

<!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. JAVA开发环境搭建 - Eclipse基本配置

    Eclipse设置的内容包括许多方面,不同的开发人员,不同的项目需要,可能对Eclipse的设置不尽相同.如下内容仅是对本人的一些基本设置做一些记录,以作备忘.后期会逐渐对相关内容进行更新,仅供参考. ...

  2. SQL server 数据库——数学函数、字符串函数、转换函数、时间日期函数

    数学函数.字符串函数.转换函数.时间日期函数 1.数学函数 ceiling()--取上限  select ceiling(oil) as 油耗上限 from car floor()--取下限 sele ...

  3. 当前最上层的视图控制器vc 和 当前最上层的导航控制器nav

    在处理 URL Router 跳转的时候,我们经常需要得到 当前最上层的视图控制器 和 当前最上层的导航控制器 来进行视图跳转或者方法调用.- (UIViewController *)currentV ...

  4. OAuth2.0 知多少

    1. 引言 周末逛简书,看了一篇写的极好的文章,点击大红心点赞,就直接给我跳转到登录界面了,原来点赞是需要登录的. 可是没有我并没有简书账号,一直使用的QQ的集成登录.下面有一排社交登录按钮,我们可以 ...

  5. Octave Tutorial（《Machine Learning》）之第一课《数据表示和存储》

    Octave Tutorial 第一课 Computation&Operation 数据表示和存储 1.简单的四则运算,布尔运算,赋值运算(a && b,a || b,xor( ...

  6. Android Studio项目构建常见问题解决

    1. 创建或导入项目后编译时一直在等待 问题: 原因:AS连网去下载gradle了,但是网络不好或不通 解决:禁用网络,AS就会立即自动终止下载进入到主界面了.此时再去指定离线的gradle版本进行编 ...

  7. Yii2高级模板vendor和application非同级目录部署

    上面是Yii2的高级模板,当我们有多个application的时候,这种高级模板可以可以提供很好的扩展性,多个application共用一份YII2框架,默认情况下,框架和application是在同 ...

  8. Java基础—String类小结

    一.String类是什么 public final class String implements java.io.Serializable, Comparable<String>, Ch ...

  9. Object-C知识点

    Object-C常用的知识点,以下为我在实际开发中用到的知识点,但是又想不起来,需要百度一下的知识点 1. p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: ...

  10. POPTEST老李分享session,cookie的安全性以及区别 1

    POPTEST老李分享session,cookie的安全性以及区别   poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试,测试工具开发等工作为目标.如果对课程 ...