在浏览 https://ghost.org/xxxx/ 时。

可以使用 background-size: cover; 加上很小的像素图，放大后实现炫彩背景效果。

使用 js canvas 随机生成小的像素图，设置为背景图。来实现随机背景效果

代码如下：

<!--参考资料：https://ghost.org/xxxx/-->

<!DOCTYPE html>

<html lang="zh-CN">

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="renderer" content="webkit">

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>随机炫彩背景</title>

<style>

/* css style */

html, body{margin:0; padding:0; min-height:100%;}

body {

    background-size: cover;

    background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAADCAYAAABfwxXFAAAAYklEQVQIWwFXAKj/ARBhmP8R6wMAHhsgABLvBAByKg0AterTAP7W8wABGnGg/1InOABMECEAy4vRAEcMAADE98oA4PjqAAEgYIL/MDs3AEcGLADxieMAQhUWAO/xzwCh778ANjsgSPo2oIsAAAAASUVORK5CYII=");

}

</style>

</head>

<body>

<h1 style="text-align:center; color:#fff;">随机炫彩背景</h1>

<script>

// 生产随机数

// rand(10); 10

// rand([10, 100]); 10 ~ 100

// rand([50]); 0 ~ 50;

// rand([10,20,30]); 10|20|30

function rand(arr)

{

    if (typeof arr === 'number')

    {

        return arr;

    }

    var v = 0;

    if (arr.length == 1)

    {

        v = Math.round(Math.random() * arr[0]);

    }

    else if (arr.length == 2)

    {

        var a = arr[0];

        var b = arr[1];

        v = Math.round(a + Math.random() * (b - a));

    }

    else if (arr.length > 2)

    {

        v = arr[Math.round(Math.random() * (arr.length - 1))];

    }

    return v;

}

// h 色调 s 饱和度 l 亮度

function randColorHsl(h, s, l)

{

    h = h||[0, 360];

    s = s||50;

    l = l||50;

    return "hsl(" + rand(h) + ", " + rand(s) + "%, " + rand(l) + "%)";

}

function randColorRgb(r, g, b)

{

    r = r||[0, 255];

    g = g||[0, 255];

    b = b||[0, 255];

    return "rgb(" + rand(r) + ", " + rand(g) + ", " + rand(b) + ")";

}

var canvas = document.createElement('canvas');

// 像素大小控制图形复杂度

canvas.width = 7;

canvas.height = 3;

var ctx=canvas.getContext('2d');

function randBackground()

{

    for (var x=0; x<canvas.width; x++)

    {

        for (var y=0; y<canvas.height; y++)

        {

            // 随机颜色

            // ctx.fillStyle = randColorHsl();

            // ctx.fillStyle = randColorRgb();

            ctx.fillStyle = randColorHsl(250, 50, [50, 80]);

            ctx.fillRect(x,y,x+1,y+1);

        }

    }

    // 设置背景图

    document.body.style.backgroundImage = 'url("' + canvas.toDataURL() + '")';

}

window.setInterval(randBackground, 3000);

</script>

</body>

js 生成随机炫彩背景的更多相关文章

  1. js生成随机固定长度字符串的简便方法

    概述 碰到一个需求:用js生成固定长度的字符串.在网上查了很多资料,网上的方法都比较麻烦.我自己灵光一现,实现了一个比较简单的方法.记录下来,供以后开发时参考,相信对其他人也有用. js生成随机字符串 ...

  2. JS生成随机字符串的多种方法

    这篇文章主要介绍了JS生成随机字符串的方法,需要的朋友可以参考下 下面的一段代码,整理电脑时,记录备查. <script language="javascript"> ...

  3. MOCK.JS 生成随机数据，拦截 Ajax 请求

    mock.js 的用处 前后端分离 :让前端攻城师独立于后端进行开发. 增加单元测试的真实性 :通过随机数据,模拟各种场景. 开发无侵入 :不需要修改既有代码,就可以拦截 Ajax 请求,返回模拟的响 ...

  4. JS生成随机的由字母数字组合的字符串

    前言 最近有个需求,是需要生成3-32位长度的字母数字组合的随机字符串,另一个是生成43位随机字符串. 方法一 奇妙的写法   1 Math.random().toString(36).substr( ...

  5. js生成随机字符串或者随机数

    //返回一个指定范围内的随机数 function createRandomNum(Min,Max){ let Range = Max - Min; let Rand = Math.random(); ...

  6. 【分享】JS生成随机字符串

    之前忘了从哪里找到的一段代码,整理电脑时,记录为博文备查,原创不是我. function randomString(len) { len = len || 32; var $chars = 'ABCD ...

  7. JS 生成随机字符串 随机颜色

    使用Math.random()生成随机数 0.7489584611780002数字的.toString(n) 将数字转换为 n 进制的字符串 n取值范围(0~36)"0.vbpjw8lipf ...

  8. JS生成随机字符串

    function randomString(len) { len = len || 32; var $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxy ...

  9. 4月6日--js生成随机数列

    newarr=[1,2,3,4,5,6] function randomsort(a,b){ return Math.random()>0.5?-1:1;}//用Math.random()函数生 ...

随机推荐

  1. LoadRunner HTTP+Json 接口性能测试

    接口的请求参数和返回结果均是JSON字符串,请求可以用POST或者GET方法.先说GET方法: 一.GET方法测试 Insert - New step -选择Custom Request - web_ ...

  2. layUI弹出框提示

    简单介绍:项目使用layUI框架好久了,也没来的及写一篇关于layUI弹出层的随笔.现在补上.经常用到的,一般都是在ajax成功回调函数后边写. //js代码 s和fail 是ajax返回的数据lay ...

  3. C#控制台或应用程序中两个多个Main()方法的设置

    大多数初级程序员或学生都认为在C#控制台或应用程序中只能有一个Main()方法.但是事实上是可以有多个Main()方法的. 在C#控制台或应用程序中,在多个类中,且每个类里最多只能存在一个Main() ...

  4. C++多态及其实现原理

    1.    多态的定义:多态含义为一个事物有多种形态.在C ++程序设计中,多态性是指具有不同功能的函数可以用同一个函数名,这样就可以用一个函数名调用不同内容的函数,主要分为静态多态和动态多态: 静态 ...

  5. MBR分区操作-增加、扩展、删除

    MBR分区操作-增加.扩展.删除 GPT分区参考 http://www.blogjava.net/haha1903/archive/2011/12/21/366942.html l  fdisk 显示 ...

  6. AutoProject Studio 自动化项目生成器 下载地址

    一.ZCN.NET 自动化项目生成器 下载专区 [如果下载链接不可用,请直接联系作者,QQ:3080400049] 1.1.ZCN.NET 自动化项目生成器 安装程序 V2016Beta1       ...

  7. Python实现RSA无填充加密，兼容BouncyCastle

    场景 某系统登录时密码经过前台rsa加密传给后端,为实现模拟登录需要原样生成加密串. 分析 前台通过RSA.js.BigInt.js.Barrett.js三个js文件实现加密,公钥通过ajax请求获得 ...

  8. P1462 通往奥格瑞玛的道路 最短路

    题目背景 在艾泽拉斯大陆上有一位名叫歪嘴哦的神奇术士,他是部落的中坚力量 有一天他醒来后发现自己居然到了联盟的主城暴风城 在被众多联盟的士兵攻击后,他决定逃回自己的家乡奥格瑞玛 题目描述 在艾泽拉斯, ...

  9. 2018-2019 20165235 网络对抗技术 Exp0:kali的安装

    2018-2019 20165235 网络对抗技术 Exp0:kali的安装 安装kali 在官网上https://www.kali.org/下载kali 下载之后进行解压 打开VMware-> ...

  10. Invitation Cards POJ - 1511 （双向单源最短路）

    In the age of television, not many people attend theater performances. Antique Comedians of Malidine ...