随机生成颜色切换

简介: 实现一个随机生成的16进制颜色值,点击div元素切换颜色,和蹦迪似切换颜色两种方案
将笔记跟大家分享,希望对大家也有所帮助,共同成长进步💪~\
如果大家喜欢,可以点赞或留言给个支持💕 ~~,谢谢大家⭐️⭐️⭐️~

实现一个随机生成的16进制颜色值,点击div元素切换颜色,和蹦迪似切换颜色两种方案

html部分

<div id="dv">第一种</div>
<div id="dv2">第二种</div>

封装一个getColor函数

//生成随机颜函数
function getColor() {
      var str = "#";
      var arr = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f"];
      for (var i = 0; i < 6; i++) {
        var num = parseInt(Math.random() * 16);
        str += arr[num];
      }
      return str;
}

第一种点击div元素切换颜色实现

var btndv = document.getElementById('dv')
btndv.onclick = function () {
  this.style.backgroundColor = getColor();
};

第二种点击蹦迪似切换颜色实现

var btndv2 = document.getElementById('dv2')
var jump=0;
var aa;
btndv2.onclick = function () {
  if(jump == '0'){
    aa = setInterval(()=>{
      this.style.backgroundColor = getColor();
    },50)
    jump=1;
  }else if(jump == '1'){
    clearInterval(aa);
    jump=0;
  }
};

效果图如下:

这里只放了第一种的效果图,具体效果可以在代码块部分看哦

Video_2021-08-23_093207.gif

目录
相关文章
|
10月前
|
存储 安全 关系型数据库
InnoDB引擎特性
InnoDB事务型数据库的首选引擎,支持事务安全表(ACID),支持行锁定和外键。MySQL5.5.5之后,InnoDB作为默认存储引擎,InnoDB主要特性有: InnoDB给MySQL提供了具有提交,回滚和崩溃恢复能力的事务安全(ACID兼容)存储引擎。InnoDB锁定在行级并且也在SELECT语句中提供了一个类似Oracle的非锁定读。 InnoDB是为处理巨大数据量的最大性能设计。它的CPU效率可能是任何其他基于磁盘关系的数据库引擎所不能匹敌的。 InnoDB存储引擎完全与MySQL服务器整合,InnoDB存储引擎为在主内存中缓存数据和索引而维持它自己的缓冲池
|
网络协议 Linux
Linux查看端口监听情况,以及Linux查看某个端口对应的进程号和程序
Linux查看端口监听情况,以及Linux查看某个端口对应的进程号和程序
1188 2
|
6月前
|
存储 安全 数据库
YashanDB身份认证
YashanDB身份认证
|
编译器
使用海思v500交叉编译器编译qt5.4.2版本
使用海思v500交叉编译器编译qt5.4.2版本
335 1
半小时速通Python爬虫!GitHub开源的Python爬虫入门教程
今天给小伙伴们带来了一篇详细介绍 Python 爬虫入门的教程,从实战出发,适合初学者。 小伙伴们只需在阅读过程紧跟文章思路,理清相应的实现代码,30 分钟即可学会编写简单的 Python 爬虫。
|
前端开发 JavaScript 开发者
Layui 简单介绍及入门
Layui 简单介绍及入门
288 0
带你读《5G大规模天线增强技术》——2.4.4 路径损耗计算
带你读《5G大规模天线增强技术》——2.4.4 路径损耗计算
|
存储 Web App开发 编解码
Web3.0 · 基础层技术 · SCQA模型趣谈密码学
Web3.0 · 基础层技术 · SCQA模型趣谈密码学
553 0
Web3.0 · 基础层技术 · SCQA模型趣谈密码学
|
SQL Oracle 关系型数据库
基于变量方式实现kettle快速循环迁移表数据(八)
基于变量方式实现kettle快速循环迁移表数据(八)
511 0
基于变量方式实现kettle快速循环迁移表数据(八)
|
负载均衡 关系型数据库 MySQL
MySQL主从复制和读写分离的区别是什么?底层原理是什么?
MySQL主从复制和读写分离的区别是什么?底层原理是什么?
377 0