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 DataTable实现前后台动态分页
Jun 17 jQuery
基于jQuery封装的分页组件
Jun 26 jQuery
jQuery响应滚动条事件功能示例
Oct 14 jQuery
jQuery实现滚动效果
Nov 17 jQuery
JQuery 又谈ajax局部刷新
Nov 27 jQuery
jQuery实现碰到边缘反弹的动画效果
Feb 24 jQuery
jQuery 获取除某指定对象外的其他对象 ( :not() 与.not())
Oct 10 jQuery
jquery+css实现Tab栏切换的代码实例
May 14 jQuery
Jquery滑动门/tab切换实现方法完整示例
Jun 05 jQuery
jQuery 动态粒子效果示例代码
Jul 07 jQuery
jQuery实现放大镜案例
Oct 19 jQuery
jquery插件实现悬浮的菜单
Apr 24 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
php 格式化数字的时候注意数字的范围
2010/04/13 PHP
PHP日期处理函数 整型日期格式
2011/01/12 PHP
php处理json时中文问题的解决方法
2011/04/12 PHP
php实现查询百度google收录情况(示例代码)
2013/08/02 PHP
php函数实现判断是否移动端访问
2015/03/03 PHP
thinkphp在php7环境下提示Cannot use ‘String’ as class name as it is reserved的解决方法
2016/09/30 PHP
基于jquery实现的一个选择中国大学的弹框 (数据、步骤、代码)
2012/07/26 Javascript
javascript两种function的定义介绍及区别说明
2013/05/02 Javascript
基于Unit PNG Fix.js有时候在ie6下不正常的解决办法
2013/06/26 Javascript
浅谈javascript函数式编程
2015/09/06 Javascript
jquery模拟实现鼠标指针停止运动事件
2016/01/12 Javascript
JavaScript 正则表达式中global模式的特性
2016/02/25 Javascript
一个用jquery写的判断div滚动条到底部的方法【推荐】
2016/04/29 Javascript
vue分页组件table-pagebar使用实例解析
2020/11/15 Javascript
vue多页面开发和打包正确处理方法
2018/04/20 Javascript
JS Array.from()将伪数组转换成数组的方法示例
2020/03/23 Javascript
[02:48]DOTA2超级联赛专访海涛:你们的选择没有错
2013/06/07 DOTA
[02:05]2014DOTA2西雅图邀请赛 专访啸天mik夫妻档
2014/07/08 DOTA
[01:19:33]DOTA2-DPC中国联赛 正赛 iG vs VG BO3 第一场 2月2日
2021/03/11 DOTA
Python tornado队列示例-一个并发web爬虫代码分享
2018/01/09 Python
Python封装原理与实现方法详解
2018/08/28 Python
对python多线程与global变量详解
2018/11/09 Python
python+selenium实现简历自动刷新的示例代码
2019/05/20 Python
python中时间转换datetime和pd.to_datetime详析
2019/08/11 Python
基于python实现matlab filter函数过程详解
2020/06/08 Python
基于Python爬取51cto博客页面信息过程解析
2020/08/25 Python
Python中实现一行拆多行和多行并一行的示例代码
2020/09/06 Python
PyChon中关于Jekins的详细安装(推荐)
2020/12/28 Python
科尔士百货公司官网:Kohl’s
2016/07/11 全球购物
日本网路线上商品代购服务:转送JAPAN
2016/08/05 全球购物
全球最大运动品牌的男装、女装和童装官方库存商:A&A Sports
2021/01/17 全球购物
经济系大学生求职信
2013/10/01 职场文书
村庄环境整治方案
2014/05/15 职场文书
运动会广播稿100字
2014/09/14 职场文书
志愿者工作心得体会
2016/01/15 职场文书
JS前端轻量fabric.js系列物体基类
2022/08/05 Javascript