效果预览：

源码分享：

<!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. C#如何获取指定周的日期范围

    1. 不允许跨年 1) 第一周的第一天从每年的第一天开始,最后一周的最后一天为每年的最后一天. static void Main(string[] args) { DateTime first, la ...

  2. Visual Studio 20周年，我和VS不得不说的故事（内含福利）

    Visual Studio 2017正式版已如期发布(点击这里查看发布全记录)!自去年 11 月正式宣布 Visual Studio 项目之后,微软终于正式推出了“宇宙最强集成开发环境(IDE)”的最 ...

  3. hudson入门

    持续集成hudson入门博客分类: Java 单元测试配置管理maven项目管理Tomcat         极限编程中一项建议实践便是持续集成,持续集成是指在开发阶段,对项目进行持续性自动化编译.测 ...

  4. 1708: [Usaco2007 Oct]Money奶牛的硬币

    1708: [Usaco2007 Oct]Money奶牛的硬币 Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 544  Solved: 352[Submi ...

  5. ORM-Dapper学习<一>

    ORM 框架简介 对象-关系映射(Object/Relation Mapping,简称ORM),是随着面向对象的软件开发方法发展而产生的.面向对象的开发方法是当今企业级应用开发环境中的主流开发方法,关 ...

  6. python + selenium <二>

    应用Webdriver,实现自动化 #coding:gbk from selenium import webdriver import os from selenium.webdriver.suppo ...

  7. 一个小时学会jQuery

    前一段时间录了一套关于jQuery的视频分享给大家,可以在下载区下载到,本来想配合文字一起的,后面发现视频+帮助文档也是非常好的学习方法. 一.jQuery简介与第一个jQuery程序 1.1.jQu ...

  8. 有个程序猿要去当CEO了：（一）事情始末

    事情大概是这样的: 去年年底,我从原公司离职,原因大概是公司绩效不好,呆着也没意思. 后来听说,年终结算遣散了所有人. 今年年初的时候,前老板又找上我,说希望能和我再合作. 起先是想分我一部分干股,让 ...

  9. windows python flask上传文件出现IOError: [Errno 13] Permission denied: 'E:\\git\\test\\static\\uploads'的解决方法

    在浏览器中输入时,出现IOError: [Errno 13] Permission denied: 'E:\\git\\test\\static\\uploads' http://127.0.0.1: ...

  10. 【SF】开源的.NET CORE 基础管理系统 -介绍篇

    [SF]开源的.NET CORE 基础管理系统 -系列导航 1.环境: .NET Core SDK (https://www.microsoft.com/net/core) SQL Server or ...