js随机获取动态背景颜色

最新推荐文章于 2024-02-06 15:34:18 发布
最新推荐文章于 2024-02-06 15:34:18 发布
阅读量734 收藏 3
点赞数 1
文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_55788590/article/details/115872397
版权

今天小编和大家玩一玩上次说到的三个非常实用的函数中的获取随机数
获取随机数能干什么呢，或者说有什么实际用处，今天就带大家看看随机数的妙用
首先我们要现在HTML中创建一个div

<body>
    <div class="container"></div>
</body>

是的，我们只需要一个空的div就行，其他的所以样式全部用js实现
今天的实战项目是获取随机的动态背景颜色
说到背景颜色，我们就需要先了解在HTML中颜色的表达方式：

  1. 英文语义法
  2. rgb/rgba方法
  3. #+十六进制法

我在这里使用的是第三种方法，做一个项目前，我们要滤清思路，获取一个动态的背景颜色，也就是说颜色是要改变的，而html颜色表达式的#+十六进制的方法改变的也就是#号后面的十六进制的数字，那我们就只需要将十六个数字放进一个数组中，然后使用随机数获取数组中随机的一个下标，再循环六次与#号凭借即可&

最低0.47元/天 解锁文章
风有多温柔.
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js随机生成网页背景颜色的方法
10-24
在JavaScript中，随机生成网页背景颜色的方法涉及到对颜色值的理解、随机数的生成以及DOM操作。下面我们将详细探讨这些知识点： 1. **颜色值**：网页中的颜色通常以十六进制表示，例如`#FFFFFF`代表白色。颜色值由...
js：随机获取一个RGB颜色值
彭世瑜的博客
08-22 484
【代码】js：随机获取一个RGB颜色值。
php 随机获取颜色,获取随机颜色
weixin_42358594的博客
03-25 203
摘要：获取随机颜色获取随机颜色a{width:150px;height:150px;line-height:150px;display: inline-block;font-size:12px;margin-left:10px;border-radius:50%;text-align:center;text-decoration:none;}a:hover{cursor:pointer;}butt...
html随机获取颜色代码,JavaScript随机生成颜色的方法
weixin_29243279的博客
06-03 508
废话不多说了直接给大家贴js代码了，具体代码如下所述：调用第一种调用第二种调用第三种var btn1=document.getElementById('btn1');btn1.onclick=function(){document.body.style.background=bg1()};var btn2=document.getElementById('bnt2');btn2.onclick=f...
js随机颜色获取，点击按钮换背景颜色
q12as的博客
08-28 458
<style> .box { width: 200px; margin: 100px auto; } #box { width: 200px; height: 200px; background-color: aqua; } </style> <body> <di.
js获取随机颜色函数，获取深色随机函数，不重复获取；
Xu_Lisa的博客
06-29 1514
//exist_color为已存在的颜色数组 function getRandomColor(exist_color){ // 如果有指定的背景的颜色，那也要先加入也不能重复，只要假如一次就够了 //exist_color.push("#4169E1"); //以下的*192都是为了是获取到的颜色为深色的 let r = Math.floor(Math.random()*192); let g = Math.floor(Math.random()*192); let b = Math.floor
js随机页面背景色
weixin_46811890的博客
02-06 420
自定义随机颜色函数 采用字符串拼接的方式产生随机颜色值 设置定时器实现每2s更换一次背景色
js随机生成16进制颜色值
Duktig的博客
05-21 3360
想让你的网页拥有随机颜色的特效，试试js随机生成16进制颜色值吧
JavaScript获取随机颜色Hex
只写有用的笔记
05-07 107
将hex十六进制的每一位逐一列出，然后循环六次不断随机抽取里面任意一个字符添加到结果的最后面，最后再返回。
vue 随机背景颜色
yhd1998的博客
07-11 682
vue
js获取随机颜色值的函数
10-26
在JavaScript中，生成随机颜色值是一项常见的任务，特别是在创建动态用户界面或图形设计时。本文将详细介绍如何使用JavaScript编写函数来获取随机颜色值，并解析上述给出的代码。 首先，我们来看一下提供的函数： ...
js实现点击按钮随机生成背景颜色
10-14
在JavaScript中，我们可以利用事件监听和数学方法来实现点击按钮后随机生成背景颜色的功能。以下是对给定的标题、描述和代码内容的详细解释： ### 随机颜色生成原理 随机生成背景颜色的核心在于创建一个十六进制...
jQuery获取随机颜色的实例代码
10-18
在JavaScript和jQuery中，生成随机颜色是一个常见的需求，特别是在网页设计和动态效果中。这篇文章将深入探讨如何使用jQuery获取随机颜色，并提供多个实例代码供学习参考。 首先，我们来看一个基本的jQuery函数`...
动态随机背景滚动.zip
07-05
3. **动画效果**：jQuery的`.animate()`函数是实现平滑过渡的关键，它可以改变背景颜色、图片位置等属性，创造出流畅的滚动效果。 4. **随机函数**：为了实现“随机”效果，开发者可能使用JavaScript内置的`Math....
chromedriver-mac-arm64_126.0.6474.0.zip
07-31
chromedriver-mac-arm64_126.0.6474.0.zip
chromedriver-mac-arm64_128.0.6548.0.zip
07-31
chromedriver-mac-arm64_128.0.6548.0.zip
MySQL查询加速器：利用Query Cache提升效率
07-31
MySQL是一个流行的开源关系型数据库管理系统（RDBMS），广泛用于Web应用程序的后端数据存储。它基于结构化查询语言（SQL）来管理数据，并且是LAMP（Linux, Apache, MySQL, PHP/Python/Perl）技术栈的一部分，这个技术栈常用于构建动态网站和Web应用程序。 MySQL的特点包括： - **开放源代码**：MySQL的源代码是公开的，任何人都可以自由使用和修改。 - **跨平台**：MySQL可以在多种操作系统上运行，包括Linux、Windows、macOS等。 - **高性能**：MySQL以其快速的查询处理和良好的性能而闻名。 - **可靠性**：MySQL提供了多种机制来确保数据的完整性和可靠性，包括事务支持、备份和恢复功能。 - **易于使用**：MySQL提供了简单直观的界面和丰富的文档，便于用户学习和使用。 - **可扩展性**：MySQL支持从小型应用到大型企业级应用的扩展。 - **社区支持**：由于其广泛的使用，MySQL拥有一个活跃的开发者社区，提供大量的资源和支持。 MySQL被广泛应用于各种场景，包括在线事务处理（OL
Objective-C语言的基础教程.md
最新发布
07-31
Objective-C是一种面向对象的编程语言，是C语言的扩展。它主要用于苹果的iOS和macOS应用程序开发。
js随机div背景颜色rgb
05-14
你可以使用JavaScript来实现随机div背景颜色RGB的效果，具体实现方式如下： 1. 首先，你需要获取到需要随机背景颜色的div元素，可以使用document.getElementById或者document.querySelector等方法来获取。 2. 接着，你需要编写一个生成随机RGB颜色的函数，代码如下： ``` function randomColor() { var r = Math.floor(Math.random() * 256); // 生成0~255之间的随机整数 var g = Math.floor(Math.random() * 256); var b = Math.floor(Math.random() * 256); return "rgb(" + r + "," + g + "," + b + ")"; // 将RGB颜色拼接成字符串返回 } ``` 3. 最后，在需要随机背景颜色的事件中调用该函数，将返回的随机RGB颜色作为div元素的背景色即可。示例代码如下： ``` var div = document.getElementById("myDiv"); // 获取需要随机背景颜色的div元素 div.style.backgroundColor = randomColor(); // 设置div元素的背景色为随机生成的RGB颜色 ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值