jQuery获取随机颜色的实例代码


Posted in jQuery onMay 21, 2018

1.js

//获取十六进制颜色 
  function randomColor1(){ 
   var r = Math.floor(Math.random()*256); 
   var g = Math.floor(Math.random()*256); 
   var b = Math.floor(Math.random()*256); 
   if(r < 16){ 
    r = "0"+r.toString(16); 
   }else{ 
    r = r.toString(16); 
   } 
   if(g < 16){ 
    g = "0"+g.toString(16); 
   }else{ 
    g = g.toString(16); 
   } 
   if(b < 16){ 
    b = "0"+b.toString(16); 
   }else{ 
    b = b.toString(16); 
   } 
   return "#"+r+g+b; 
  } 
  $("h3").css("color",randomColor1());

2.html

.<h3>获取任意颜色</h3> 

效果:

jQuery获取随机颜色的实例代码

下面在看一段代码关于js几种生成随机颜色方法

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title></title>
</head>
<body>
  <button id="btn1">调用第一种</button>
  <button id="bnt2">调用第二种</button>
  <button id="btn3">调用第三种</button>
  <script>
   var btn1=document.getElementById('btn1');
   btn1.onclick=function(){
    document.body.style.background=bg1()
   };
   var btn2=document.getElementById('bnt2');
   btn2.onclick=function(){
    document.body.style.background=bg2();
   };
   var btn3=document.getElementById('btn3');
   btn3.onclick=function(){
    document.body.style.background=bg3();
   };
   function bg1(){
    return '#'+Math.floor(Math.random()*256).toString(10);
   }
   function bg2(){
    return '#'+Math.floor(Math.random()*0xffffff).toString(16);
   }
   function bg3(){
    var r=Math.floor(Math.random()*256);
    var g=Math.floor(Math.random()*256);
    var b=Math.floor(Math.random()*256);
    return "rgb("+r+','+g+','+b+")";//所有方法的拼接都可以用ES6新特性`其他字符串{$变量名}`替换
   }
  </script>
</body>
</html>

总结

以上所述是小编给大家介绍的jQuery获取随机颜色的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

jQuery 相关文章推荐
关于jQuery中fade(),show()起始位置的一点小发现
Apr 25 jQuery
node.js+jQuery实现用户登录注册AJAX交互
Apr 28 jQuery
jQuery实现div跟随鼠标移动
Aug 20 jQuery
jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一
May 26 jQuery
jQuery用户头像裁剪插件cropbox.js使用详解
Jun 07 jQuery
360提示[高危]使用存在漏洞的JQuery版本的解决方法
Oct 27 jQuery
JS/jQuery实现DIV延时几秒后消失或显示的方法
Feb 12 jQuery
JQuery Ajax动态加载Table数据的实例讲解
Aug 09 jQuery
js jquery 获取某一元素到浏览器顶端的距离实现方法
Sep 05 jQuery
jquery实现动态创建form并提交的方法示例
May 27 jQuery
js判断复选框是否选中的方法示例【基于jQuery】
Oct 10 jQuery
jQuery实现轮播图源码
Oct 23 jQuery
如何用input标签和jquery实现多图片的上传和回显功能
May 16 #jQuery
jQuery中元素选择器(element)简单用法示例
May 14 #jQuery
jQuery中的类名选择器(.class)用法简单示例
May 14 #jQuery
基于jQuery实现无缝轮播与左右点击效果
May 13 #jQuery
jQuery实现模糊查询的方法分析
May 10 #jQuery
jQuery简单实现的HTML页面文本框模糊匹配查询功能完整示例
May 09 #jQuery
Vue引入jquery实现平滑滚动到指定位置
May 09 #jQuery
You might like
Mysql中limit的用法方法详解与注意事项
2008/04/19 PHP
php产生随机数的两种方法实例代码 输出随机IP
2011/04/08 PHP
浅析php fwrite写入txt文件的时候用 \r\n不能换行的问题
2013/08/06 PHP
php文件夹与文件目录操作函数介绍
2013/09/09 PHP
destoon文章模块调用企业会员资料的方法
2014/08/22 PHP
php支付宝系列之电脑网站支付
2018/05/30 PHP
PHP Swoole异步MySQL客户端实现方法示例
2019/10/24 PHP
Centos7安装swoole扩展操作示例
2020/03/26 PHP
Javascript 获取滚动条位置等信息的函数
2009/09/08 Javascript
JavaScript 联动的无限级封装类,数据采用非Ajax方式,随意添加联动
2010/06/29 Javascript
js离开或刷新页面检测(且兼容FF,IE,Chrome)
2014/03/05 Javascript
NodeJS Web应用监听sock文件实例
2015/02/18 NodeJs
js 颜色选择插件
2017/01/23 Javascript
Node.js发送HTTP客户端请求并显示响应结果的方法示例
2017/04/12 Javascript
node.js操作mysql简单实例
2017/05/25 Javascript
Vue2.0实现将页面中表格数据导出excel的实例
2017/08/09 Javascript
vue+element-ui动态生成多级表头的方法
2018/08/28 Javascript
vue.config.js常用配置详解
2019/11/14 Javascript
react PropTypes校验传递的值操作示例
2020/04/28 Javascript
vue 虚拟DOM的原理
2020/10/03 Javascript
[02:55]2018DOTA2国际邀请赛勇士令状不朽珍藏Ⅲ饰品一览
2018/08/01 DOTA
Python cookbook(数据结构与算法)根据字段将记录分组操作示例
2018/03/19 Python
python生成每日报表数据(Excel)并邮件发送的实例
2019/02/03 Python
Python Pandas数据结构简单介绍
2019/07/03 Python
基于Python批量生成指定尺寸缩略图代码实例
2019/11/20 Python
Python爬虫库requests获取响应内容、响应状态码、响应头
2020/01/25 Python
浅析python 动态库m.so.1.0错误问题
2020/05/09 Python
使用Keras训练好的.h5模型来测试一个实例
2020/07/06 Python
HTML5在线预览PDF的示例代码
2017/09/14 HTML / CSS
材料成型专业个人求职信范文
2013/09/25 职场文书
个人简历自荐信
2014/06/26 职场文书
企业务虚会发言材料
2014/10/20 职场文书
学校群众路线专项整治方案
2014/10/31 职场文书
展览会邀请函
2015/02/02 职场文书
Python带你从浅入深探究Tuple(基础篇)
2021/05/15 Python
用 Python 定义 Schema 并生成 Parquet 文件详情
2021/09/25 Python