在浏览 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. vscode中vue代码颜色插件

    vue提示插件[Vscode]       编者寄语:vscode的确是前端开发中很好的工具,安装颜色插件,从视觉上是美的享受.曾经的我遇到了vscode代码全是灰色,黑色的困惑,后来整理找到方法,整 ...

  2. python3 函数注意要点

    一.定义一个函数: def test(): #用def关键词开头 print('*****') def test2(a,b): #a,b为形参 print(a,b) return a,b # retu ...

  3. [原创]EBAZ4205 Linux log打印输出

    下载器与板级之前的连接 JTAG红色为1脚,请注意 RX接板级TX TX接板级RX UART_Vref接板级VCC GND接板级GND U-Boot 2014.01 (Apr 14 2019 - 10 ...

  4. Python学习（四十三）—— Djago-admin管理工具

    一.admin组件使用 Django 提供了基于 web 的管理工具. Django 自动管理工具是 django.contrib 的一部分.你可以在项目的 settings.py 中的 INSTAL ...

  5. 如何用js去判断当前是否在微信中打开的链接页面

    function is_weixin() { var ua = navigator.userAgent.toLowerCase(); if (ua.match(/MicroMessenger/i) = ...

  6. Android进阶：三、这一次，我们用最详细的方式解析Android消息机制的源码

    决定再写一次有关Handler的源码 Handler源码解析 一.创建Handler对象 使用handler最简单的方式:直接new一个Handler的对象 Handler handler = new ...

  7. DOS批处理中对含有特殊字符的文件名的处理方法

    从一些网站下载的文件,文件名带有广告,典型的就是网站的名称和域名,搞得文件名很长.在一些场景下,广告看得见,真正的文件名却被...了.在以前,我是遇到就手工去掉广告,但一是麻烦,二是效率低.反正经常下 ...

  8. Linux-信号量与P,V操作

    Linux-信号量与P,V操作 内容 使用信号量实现进程互斥 使用信号量及PV实现子进程读写同步 机理 Linux信号量集 Linux信号量作为IPC机制的一种,与其他通信方式类似,Linux也是通过 ...

  9. webpack问题列表及解决方案

    1.提升webpack打包速度 2.cssloader顺序有先后 3.如何正确引用图片 4.打包后访问不到json文件 5.打包后如何访问项目 6.打包后的文件 7.为什么执行webpack,就可以打 ...

  10. iOS键盘事件实现、控制

    记录于2013/6/26:   一.点击键盘上的“Done”按钮关闭键盘 1.视图控制器实现UITextFieldDelegate协议 2.设置文本框属性      textField.returnK ...