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 相关文章推荐
BootStrap中jQuery插件Carousel实现轮播广告效果
Mar 27 jQuery
解决jQuery ajax动态新增节点无法触发点击事件的问题
May 24 jQuery
jQuery+HTML5实现WebGL高性能烟花绽放动画效果【附demo源码下载】
Aug 18 jQuery
基于jQuery实现图片推拉门动画效果的两种方法
Aug 26 jQuery
jQuery自动或手动图片切换效果
Oct 11 jQuery
jQuery实现的鼠标滚轮控制图片缩放功能实例
Oct 14 jQuery
使用jQuery给Table动态增加行、清空table的方法
Sep 05 jQuery
jQuery Raty星级评分插件使用方法实例分析
Nov 25 jQuery
jQuery实现鼠标移入显示蒙版效果
Jan 11 jQuery
jquery实现简易验证插件封装
Sep 13 jQuery
使用jQuery实现购物车
Oct 29 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下载远程文件类(支持断点续传)
2008/11/14 PHP
PHP 伪静态隐藏传递参数名的四种方法
2010/02/22 PHP
php数组函数序列之array_push() 数组尾部添加一个或多个元素(入栈),返回新长度。
2011/11/07 PHP
ThinkPHP3.1新特性之多层MVC的支持
2014/06/19 PHP
PHP实现支持加盐的图片加密解密
2016/09/09 PHP
laravel csrf排除路由,禁止,关闭指定路由的例子
2019/10/21 PHP
javascript仿php的print_r函数输出json数据
2013/09/13 Javascript
Javascript MVC框架Backbone.js详解
2014/09/18 Javascript
JS+CSS相对定位实现的下拉菜单
2015/10/06 Javascript
JS实现选项卡实例详解
2015/11/17 Javascript
javascript的函数劫持浅析
2016/09/26 Javascript
JavaScript trim 实现去除字符串首尾指定字符的简单方法
2016/12/27 Javascript
详解Angular 4 表单快速入门
2017/06/05 Javascript
原生js实现简单的链式操作
2017/07/04 Javascript
[43:26]完美世界DOTA2联赛PWL S2 Forest vs Rebirth 第二场 11.20
2020/11/23 DOTA
Python的Bottle框架的一些使用技巧介绍
2015/04/08 Python
Python选择排序、冒泡排序、合并排序代码实例
2015/04/10 Python
python opencv设置摄像头分辨率以及各个参数的方法
2018/04/02 Python
python unittest实现api自动化测试
2018/04/04 Python
详谈套接字中SO_REUSEPORT和SO_REUSEADDR的区别
2018/04/28 Python
对python dataframe逻辑取值的方法详解
2019/01/30 Python
详细介绍pandas的DataFrame的append方法使用
2019/07/31 Python
python RC4加密操作示例【测试可用】
2019/09/26 Python
Python for循环及基础用法详解
2019/11/08 Python
Python 实现加密过的PDF文件转WORD格式
2020/02/04 Python
python实现猜拳游戏
2020/03/04 Python
关于Keras Dense层整理
2020/05/21 Python
Python 实现自动登录+点击+滑动验证功能
2020/06/10 Python
python中数字是否为可变类型
2020/07/08 Python
python多线程和多进程关系详解
2020/12/14 Python
利用Node实现HTML5离线存储的方法
2020/10/16 HTML / CSS
银行主办会计岗位职责
2014/08/13 职场文书
餐饮服务食品安全承诺书
2015/04/29 职场文书
自书遗嘱范文
2015/08/07 职场文书
交通安全教育主题班会
2015/08/12 职场文书
Python常用配置文件ini、json、yaml读写总结
2021/07/09 Python