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去掉时光轴头尾部线条的方法实例
Jun 16 jQuery
jQuery、layer实现弹出层的打开、关闭功能
Jun 28 jQuery
深入理解jquery的$.extend()、$.fn和$.fn.extend()
Jul 08 jQuery
JS和jQuery通过this获取html标签中的属性值(实例代码)
Sep 11 jQuery
jQuery实现所有验证通过方可提交的表单验证
Nov 21 jQuery
jQuery实现获取动态添加的标签对象示例
Jun 28 jQuery
jQuery分组选择器简单用法示例
Apr 04 jQuery
jQuery提示框插件SweetAlert用法分析
Aug 05 jQuery
jQuery设置下拉框显示与隐藏效果的方法分析
Sep 15 jQuery
jQuery与原生JavaScript选择HTML元素集合用法对比分析
Nov 26 jQuery
jQuery加PHP实现图片上传并提交的示例代码
Jul 16 jQuery
jQuery实现简单三级联动效果
Sep 05 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实现读取超大文件的方法
2014/07/28 PHP
PHP7.0安装笔记整理
2015/08/28 PHP
Js操作树节点自动折叠展开的几种方法
2014/05/05 Javascript
js读取json的两种常用方法示例介绍
2014/10/19 Javascript
jQuery搜索同辈元素方法
2015/02/10 Javascript
在JavaScript中处理数组之reverse()方法的使用
2015/06/09 Javascript
jquery实现点击变换导航样式的方法
2015/08/31 Javascript
基于Jquery制作图片文字排版预览效果附源码下载
2015/11/18 Javascript
解决AngualrJS页面刷新导致异常显示问题
2017/04/20 Javascript
jquery处理checkbox(复选框)是否被选中实例代码
2017/06/12 jQuery
基于JavaScript实现报警器提示音效果
2017/10/27 Javascript
实现jquery放大镜的两种方法
2018/02/22 jQuery
详解js 创建对象的几种方法
2019/03/08 Javascript
ES6之Proxy的get方法详解
2019/10/11 Javascript
node.js使用zlib模块进行数据压缩和解压操作示例
2020/02/12 Javascript
javaScript 实现重复输出给定的字符串的常用方法小结
2020/02/20 Javascript
一些常用的Python爬虫技巧汇总
2016/09/28 Python
儿童python练习实例
2018/05/27 Python
Python数据类型之String字符串实例详解
2019/05/08 Python
python 实现list或string按指定分段
2019/12/25 Python
深入理解Tensorflow中的masking和padding
2020/02/24 Python
CSS3实现点击放大的动画实例代码
2017/02/27 HTML / CSS
JD Sports德国官网:英国领先的运动鞋和运动服饰零售商
2018/02/26 全球购物
美国波西米亚风格精品店:South Moon Under
2019/10/26 全球购物
JD Sports西班牙:英国领先的运动服装公司
2020/01/06 全球购物
如何写出高性能的JSP和Servlet
2013/01/22 面试题
廉政教育心得体会
2014/01/01 职场文书
班子四风对照检查材料
2014/08/21 职场文书
小学六一儿童节活动方案
2014/08/27 职场文书
奥巴马经典演讲稿
2014/09/13 职场文书
2015大学生实训报告
2014/11/05 职场文书
党风廉正建设个人工作总结
2015/03/06 职场文书
千与千寻观后感
2015/06/04 职场文书
导游词范文之颐和园/重庆/云台山
2019/09/10 职场文书
Go标准容器之Ring的使用说明
2021/05/05 Golang
win11无线投屏在哪设置? win11无线投屏功能的使用方法
2022/04/08 数码科技