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插件FusionCharts绘制的3D双柱状图效果示例【附demo源码】
Apr 20 jQuery
jQuery扩展_动力节点Java学院整理
Jul 05 jQuery
jquery.uploadView 实现图片预览上传功能
Aug 10 jQuery
jQuery选择器之子元素过滤选择器
Sep 28 jQuery
jQuery md5加密插件jQuery.md5.js用法示例
Aug 24 jQuery
jQuery使用$.extend(true,object1, object2);实现深拷贝对象的方法分析
Mar 06 jQuery
jQuery实现条件搜索查询、实时取值及升降序排序的方法分析
May 04 jQuery
JQuery animate动画应用示例
May 14 jQuery
jQuery实现可编辑的表格
Dec 11 jQuery
jQuery弹框插件使用方法详解
May 26 jQuery
jquery实现简单拖拽效果
Jul 20 jQuery
jQuery zTree如何改变指定节点文本样式
Oct 16 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读取本地json文件的实例
2018/03/07 PHP
PHP排序算法之直接插入排序(Straight Insertion Sort)实例分析
2018/04/20 PHP
javascritp实现input输入框相关限制用法
2007/06/29 Javascript
Js 回车换行处理的办法及replace方法应用
2013/01/24 Javascript
parentElement,srcElement的使用小结
2014/01/13 Javascript
jQuery实现下滑菜单导航效果代码
2015/08/25 Javascript
轻松实现javascript数据双向绑定
2015/11/11 Javascript
使用jQuery判断Div是否在可视区域的方法 判断div是否可见
2016/02/17 Javascript
Bootstrap基本模板的使用和理解1
2016/12/14 Javascript
将input框中输入内容显示在相应的div中【三种方法可选】
2017/05/08 Javascript
js实现淘宝首页的banner栏效果
2019/11/26 Javascript
nodejs环境使用Typeorm连接查询Oracle数据
2019/12/05 NodeJs
Vue自定义全局弹窗组件操作
2020/08/11 Javascript
vue-simple-uploader上传成功之后的response获取代码
2020/09/07 Javascript
[03:40]DOTA2英雄梦之声_第01期_炼金术士
2014/06/23 DOTA
python实现巡检系统(solaris)示例
2014/04/02 Python
跟老齐学Python之玩转字符串(3)
2014/09/14 Python
Python 对输入的数字进行排序的方法
2018/06/23 Python
对python 数据处理中的LabelEncoder 和 OneHotEncoder详解
2018/07/11 Python
用python给自己做一款小说阅读器过程详解
2019/07/11 Python
使用Python将图片转正方形的两种方法实例代码详解
2020/04/29 Python
Python中如何添加自定义模块
2020/06/09 Python
css3弹性盒模型(Flexbox)详细介绍
2014/10/08 HTML / CSS
浅析HTML5中的 History 模式
2017/06/22 HTML / CSS
迪卡侬印度官网:购买所有体育用品
2017/06/24 全球购物
大学生军训自我评价分享
2013/11/09 职场文书
动物科学专业毕业生的自我评价
2013/11/29 职场文书
公司人力资源的自我评价
2014/01/02 职场文书
贺卡寄语大全
2014/04/11 职场文书
2016年教师节感恩寄语
2015/12/04 职场文书
《所见》教学反思
2016/02/23 职场文书
小学作文指导之如何写人?
2019/07/08 职场文书
总结一些Java常用的加密算法
2021/06/11 Java/Android
MySQL 用 limit 为什么会影响性能
2021/09/15 MySQL
Python中的turtle画箭头,矩形,五角星
2022/03/16 Python
Java 异步任务计算FutureTask
2022/04/28 Java/Android