JS写一个 一个舒适的渐变背景效果

2023-11-02

很久没有写博客了,今天学习看到一个博客网站,停留了一会,被这个效果吸引住了,于是就把这块的代码搬过来了。
效果如下:很简单,就是停留一个页面,然后会随机变换背景颜色,下面是效果的GIF图片。
请添加图片描述
实现代码

  1. 首先这个背景是全都由 js 生成的,我们只需要创建一个 div 元素,然后将它设定为 fixed ,层级设定的低一点,在添加到 body 底下
  2. 然后这个背景色和随机数分别是一个随机生成颜色和随机数函数生成的
  3. 这些东西整合起来,就能实现一个随机生成的背景色,接下去就是背景隔一段时间自己改变,这就要通过定时器来完成
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>渐变背景</title>
</head>
<body>
    
</body>
</html>
<script>
    let randomTimer

    function randomColor() {
        const r = randomInt(255)
        const g = randomInt(255)
        const b = randomInt(255)
        const c = `#${r.toString(16)}${g.toString(16)}${b.toString(16)}000`
        return c.slice(0, 7)
    }

    function randomInt(max) {
        return Math.floor(Math.random() * max)
    }

    function randomBgImg() {
        clearInterval(randomTimer)
        const el = document.createElement('div')
        const deg = randomInt(360)
        el.id = 'random-light-bg'
        el.style.cssText = `
        position:fixed;
        top:0;
        left:0;
        right:0;
        bottom:0;
        z-index:-99;
        transition: 1s linear;`
        el.style.backgroundImage =
            `linear-gradient(${deg}deg, ${randomColor()} 0%, ${randomColor()} 100%)`
        document.body.appendChild(el)
        function setBg() {
            const randomBg =
                `linear-gradient(${deg}deg, ${randomColor()} 0%, ${randomColor()} 100%)`
            el.style.opacity = '.3'
            setTimeout(() => {
                el.style.backgroundImage = randomBg
                el.style.opacity = '1'
            }, 1000)
        }
        randomTimer = setInterval(setBg, 10000)
    }
    randomBgImg();
</script>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

JS写一个 一个舒适的渐变背景效果 的相关文章

  • Jquery获取选中的复选框

    您好 我想获取页面中选定复选框的列表 实际上我真正需要的是获取复选框旁边的元素的文本 该元素是一个 html 元素 li 代码如下 但它不起作用 这是我当前的 jQuery document ready function target cl
  • 在 HTML5 Javascript 中将 BlobBuilder 转换为字符串

    function blobToString blob var reader new FileReader var d reader onloadend function d callback reader result console lo
  • 使用本地存储在从另一个表保存的 HTML TABLE 中打印 JSON,以便我在另一个页面上打印我的表

    在我的作业中 我必须使用用户输入中的数据并将数据保存在本地存储中 我必须以水平表格式将这些数据从本地存储打印到其他页面 为此 我编写了用于用户输入并将数据保存在本地存储中的代码 div p p div
  • 如何阻止直接访问我的 JavaScript 文件?

    我使用 Minify 来缩小并缓存所有脚本请求 我只希望我的用户能够访问 JavaScript 文件的缩小版本 缩小位于www example com min我的脚本位于www example com scripts 如何阻止直接访问doc
  • Firebase,只得到新的孩子[重复]

    这个问题在这里已经有答案了 var firebase new Firebase firebaseRef on child added function snapshot 这将接收所有元素 有没有办法在创建新的 Firebase 引用时不接收
  • 在 Internet Explorer 中使用什么来监视 jscript 内存使用情况

    我们正在调试 GWT 应用程序 在 Firefox 中运行正常 在 IE6 0 中开始运行正常 但一段时间后 它就会崩溃并开始爬行 经过一些测试后 我们怀疑存在一些内存问题 使用了太多内存 内存泄漏等 除了使用taskmanager和pro
  • 从函数返回函数的目的是什么?

    阅读一些遗留代码 发现 A prototype setSize function var v1 new Vector2 return function size var halfSize v1 copy size multiplyScala
  • Vue 3 Composition API 提供/注入在单文件组件中不起作用

    我正在使用 Composition API 在 VueJS 3 中创建一个库 我实现了提供 注入 如中所述docs https v3 vuejs org guide composition api provide inject html i
  • 如何在网站上使用 svg 元素制作块的屏幕截图?

    我在网站上创建了一个构造函数 其本质是将所选元素及其颜色 svg中的元素 添加到访问者选择的背景和背景颜色 png中的背景 中 然后必须单击 保存 结果 按钮并仅执行工作区的屏幕截图 我写了这个脚本 但它需要屏幕截图 但只有背景 并忽略选定
  • JavaScript 验证和 PHP 验证?

    我正在使用 jquery 验证插件来验证空表单 我还应该在 PHP 中检查一下以确保 100 正确吗 或者用 javascript 验证就可以了 谢谢 您应该始终在服务器上进行验证 如果用户以某种方式不使用 Javascript 提交表单
  • JavaScript 中的 Promise 有什么意义?

    一个承诺是一个 可能现在可用 或将来可用 或永远不可用的值 来源 MDN 假设我有一个想要处理图片的应用程序 图片已加载 例如在算法在后台使用它之后 或某种其他类型的延迟 现在我想检查一下图片是否可以在future 通过使用承诺 而不是回调
  • IE 中的 XPath 查询使用从零开始的索引,但 W3C 规范是从一开始的。我应该如何处理差异?

    问题 我正在转换目前仅适用于 Internet Explorer 的相对较大的 Javascript 代码 以便使其也适用于其他浏览器 由于代码广泛使用 XPath 我们做了一些兼容性功能以使事情变得更容易 function selectN
  • 将 Firebase 云消息传递与 Windows 应用程序结合使用

    我在 Android 和 iOS 应用程序中使用 Firebase Cloud Messaging 但是我还有此应用程序的 Windows Mac OS 版本 我想保留相同的逻辑 我知道 Firebase Cloud Messaging 可
  • 如何使用 JavaScript 或 jQuery 克隆 HTML 元素的样式对象?

    我正在尝试克隆元素的样式对象 这应该允许我在更改后重置所述元素的样式 例如 el style left 50px curr style left 50px Modify the elements style The cloned style
  • Google Maps API (v3) 添加/更新标记

    编辑 它现在可以工作 但如果用户不允许或没有基于位置的服务 则不会加载 请参阅 jsfiddle 示例接受的答案评论 我已经浏览了一些教程和问题 但我无法安静地理解正在发生的事情 或者在这种情况下 没有发生 当用户单击链接时 我正在加载地图
  • 使用javascript动态更新css内容

    需要将 css 更新为动态值 我不确定最好的方法是什么 div style zoom 1 div 缩放级别将根据窗口大小调整触发 应用程序将相应缩放 我将此应用程序加载到 cordova 中并让它在 iPAD 中运行 然后我意识到需要使用
  • 滚动顶部不符合预期

    Note 由于上次忘记奖励而重新开放赏金 A Woff 大师已经给出答案 我想在用户展开某一行时到达该行 这样当最后一个可见行展开时 用户不必向下滚动即可查看内容 I used example tbody on click td green
  • 测量窗口偏移

    有没有一种方法可以测量 jQuery 中窗口的偏移量 以便我可以比较 固定 元素和相对定位元素的位置 我需要能够知道窗口滚动了多远 以便我可以使用该图来计算固定元素的高度 相对于视口顶部 和相对对象的高度 相对于顶部 之间的差异文件的内容
  • 没有输入的 jQuery 日期选择器

    我有一个相当复杂的网络应用程序 我想向其中添加一些日期选择 UI 我遇到的问题是我无法从文档中弄清楚如何真正控制日期选择器的出现方式和时间 不涉及任何表单元素 不 我不会添加秘密表单字段 因此简单的开箱即用方法根本行不通 我希望有人可以提供
  • 使用velocity.js制作可拖动元素的动画

    我正在使用velocity js 为用户拖动的可拖动 SVG 元素设置动画 然而 velocity js 将先前的 mousemove 坐标排队并通过所有后续的 mousemove 坐标进行动画处理 我想要的是velocity js 不要对

随机推荐

  • uniapp为page设置背景色不生效 & lang=“scss“ scoped的page样式失效,uniapp重复打开页面

    一 lang scss scoped中的page选择器的样式失效 在用uniapp生成网页和H5时有效 但生成小程序或者app时无效 这是因为page选择器在小程序和app编译中是页面的父节点 所以加上scoped限定后 会导致无法选中 详
  • 《Centos6.5——图形化安装虚拟机》

    目录 安装虚拟机以及虚拟机的配置 1 先下载镜像 2 安装VMware Workstation 3 打开vm 点击创建新的虚拟机 1 一路下一步 直到选择镜像 2 继续下一步 直到如下图 选择CD 选择镜像后点击确定 然后点击开启虚拟机 3
  • 阿里云-云存储OSS

    1 简述OSS 数据的可靠性较强 三重备份 系统的安全性较强 对称加密 签名权限控制以及防盗链功能 文件存储的容量无限 无需人工运维 部署扩容 无需规则 按需扩容 提供丰富的API接口 SDK包 客户端工具台 控制台 方便应用程序调用 安全
  • 基于Python和mysql开发的今天吃什么微信小程序(源码+数据库+程序配置说明书+程序使用说明书)

    一 项目简介 本项目是一套基于Python和mysql开发的今天吃什么微信小程序 主要针对计算机相关专业的正在做毕设的学生与需要项目实战练习的Python学习者 包含 项目源码 项目文档 数据库脚本等 该项目附带全部源码可作为毕设使用 项目
  • 【深度学习】池化 (pooling)

    深度学习中 有两种实现非线性的算子 一个是激活函数 另一个就是池化 pooling 在知乎上面看到一个关于池化的神解释 摘来 池化 涨水 卷积的目的是为了得到物体的边缘形状 可以想象水要了解山立体的形状 水位低时得出山脚的形状 水位中等时得
  • 信息安全—密码学信息熵信息理论基础—熵的概念(熵、联合熵、条件熵、平均互信息)

    数学基础 概率论乘法法则 两个事件相互独立 P A B P A P B 意思是事件A和事件B同时发生的概率 事件A发生的概率 事件B发生的概率 举个栗子 掷两枚硬币硬币同时立着的概率 掷一枚硬币立着的概率 再掷一枚 硬币立着的概率 两个事件
  • Partition List

    题目 Given a linked list and a value x partition it such that all nodes less than x come before nodes greater than or equa
  • 关于免费获得WPS会员自动邀请助力的JAVA项目分享

    WPS自动邀请说明 一 基本说明 本项目不是全自动 需要用户每日13点前在微信WPS会员公众号完成在线签到 再完成签到后即可输入自己uid完成自动拉满10人的任务 本项目仅用于学习 不用于商业 二 具体步骤 添加微信公众号WPS会员 福利
  • python编程标准化_Python数据预处理:彻底理解标准化和归一化

    数据预处理 数据中不同特征的量纲可能不一致 数值间的差别可能很大 不进行处理可能会影响到数据分析的结果 因此 需要对数据按照一定比例进行缩放 使之落在一个特定的区域 便于进行综合分析 常用的方法有两种 最大 最小规范化 对原始数据进行线性变
  • go语言基础-----07-----方法

    1 方法的介绍 1 方法的概念 简单说就是一个对象里面的函数 称为方法 2 在go语言中 可以给任意自定义类型 包括内置类型 但不包括指针类型 添加相应的方法 3 方法总是绑定对象实例 并隐式将实例作为第一参数 4 方法的语法 func r
  • 数学建模常用模型简介&其他模型大全汇总

    一 预测与预报 1 灰色预测模型 必掌握 解决预测类型题目 由于属于灰箱模型 一般比赛期间 不优先 使用 满足两个条件可用 数据样本点个数少 6 15 个 数据呈现指数或曲线的形式 2 微分方程预测 高大上 备用 微分方程预测是方程类模型中
  • Python解析JSON数据的基本方法

    一 JSON数据格式介绍 JSON JavaScript Object Notation 是一种轻量级的数据交换格式 JSON建构于两种结构 json是Javascript中的对象和数组中的对象 本质上来讲就是有特定结构的字符串 所以可以通
  • Chrome 浏览器css样式不显示问题解决方法

    在eclipse里改动css 改动后刷新chrome 样式不变问题 但IE浏览器却可更新样式 刚开始以为是浏览器兼容之类的问题 后来发现是chrome会缓存css样式 按F5刷新是没用的 得清除缓存才行 更快捷的方式是按Ctrl F5强制重
  • elasticsearch查询之keyword字段的查询打分控制

    一 数据情况 purchase记录每个用户的购买信息 PUT purchase mappings properties id type keyword name type text goods properties id
  • DiskGenius 数据恢复教程,丢失的学习资料有救了

    DiskGenius 数据硬盘恢复教程 固态SSD 机械HHD 几个t的学习资料有救了 看到这个教程就省下几百块的恢复数据的钱 安排 老营销号了 用完记得点赞关注转发一键三连 文尾附软件 一 DiskGenius 能够恢复数据的前提条件 非
  • 在python中字典和集合都是用一对作为界定符_数据处理和分析Excel/Python答案

    单选题 下面不能创建一个集合的语句是 单选题 回收的问卷调查表中 有一些没有填写的项 处理这种缺失值的办法有多种 需要根据实际情况选择使用 对于一般性的缺失值项 最常用的方法是 单选题 若在单元格A1中输入公式 left 数据分析基础 4
  • android app升级 数据库表改动,android – 在app执行一次后将新表添加到数据库

    我正在 Android中创建一个简单的数据库 我想在代码执行一次后添加新表 现在 每当我尝试在EventDataSqlHelper类中更改我的onCreate 方法时 我的应用程序崩溃了 这可能是因为与SQLiteOpenHelper关联的
  • gateway网关

    这里先简单介绍下getway网关的大体实现 细节不去详述 这一篇也是最后一篇关于微服务的基础介绍 后面的文章中会介绍具体微服务和中间件的设计 编码和实现 项目中加入热部署 由于我们在开发阶段频繁的修改代码 所以在项目中加入热部署以免频繁的启
  • python实现淘宝自动回复_10分钟教你用Python实现微信自动回复功能

    01 前言 效果展示 相信大家都有忙碌的时候 不可能一直守在微信上及时回复消息 但微信又不能像qq一样设置自动回复 无妨 今天 我们就来用python实现微信的自动回复功能吧 并且把接收到的消息统一发送到文件助手里面 方便统一查看 效果如下
  • JS写一个 一个舒适的渐变背景效果

    很久没有写博客了 今天学习看到一个博客网站 停留了一会 被这个效果吸引住了 于是就把这块的代码搬过来了 效果如下 很简单 就是停留一个页面 然后会随机变换背景颜色 下面是效果的GIF图片 实现代码 首先这个背景是全都由 js 生成的 我们只