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操作css样式
May 15 jQuery
jQuery序列化后的表单值转换成Json
Jun 16 jQuery
jQuery图片缩放插件smartZoom使用实例详解
Aug 25 jQuery
jQuery图片查看插件Magnify开发详解
Dec 25 jQuery
js和jQuery以及easyui实现对下拉框的指定赋值方法
Jan 23 jQuery
jQuery+Datatables实现表格批量删除功能【推荐】
Oct 24 jQuery
jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】
Jun 06 jQuery
JS实现点击生成UUID的方法完整实例【基于jQuery】
Jun 12 jQuery
jQuery zTree插件快速实现目录树
Aug 16 jQuery
Jquery动态列功能完整实例
Aug 30 jQuery
jQuery实现飞机大战小游戏
Jul 05 jQuery
jQuery实现穿梭框效果
Jan 19 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
实用函数7
2007/11/08 PHP
破解图片防盗链的代码(asp/php)测试通过
2010/07/02 PHP
分享一个漂亮的php验证码类
2016/09/29 PHP
PHP解决中文乱码
2017/04/28 PHP
PHP实现负载均衡下的session共用功能
2018/04/17 PHP
javascript自执行函数之伪命名空间封装法
2010/12/25 Javascript
javascript利用控件对windows的操作实现原理与应用
2012/12/23 Javascript
JS实现让网页背景图片斜向移动的方法
2015/02/25 Javascript
js控制文本框只输入数字和小数点的方法
2015/03/10 Javascript
使用JavaScript为Kindeditor自定义按钮增加Audio标签
2016/03/18 Javascript
jQuery过滤特殊字符及JS字符串转为数字
2016/05/26 Javascript
JavaScript利用正则表达式替换字符串中的内容
2016/12/12 Javascript
js实现自定义路由
2017/02/04 Javascript
angular实现图片懒加载实例代码
2017/06/08 Javascript
vue.js2.0点击获取自己的属性和jquery方法
2018/02/23 jQuery
利用原生JS实现欢乐水果机小游戏
2020/04/23 Javascript
jQuery实现增删改查
2020/12/22 jQuery
[55:11]完美世界DOTA2联赛PWL S2 SZ vs LBZS 第一场 11.26
2020/11/30 DOTA
python人人网登录应用实例
2014/09/26 Python
深入理解Python 代码优化详解
2014/10/27 Python
Python如何快速实现分布式任务
2017/07/06 Python
Python算法之求n个节点不同二叉树个数
2017/10/27 Python
python 删除列表里所有空格项的方法总结
2018/04/18 Python
python实现简单成绩录入系统
2019/09/19 Python
Django框架反向解析操作详解
2019/11/28 Python
Python 实现判断图片格式并转换,将转换的图像存到生成的文件夹中
2020/01/13 Python
HTML5 canvas基本绘图之图形变换
2016/06/27 HTML / CSS
什么是规则表达式
2012/05/03 面试题
委托证明的格式
2014/01/10 职场文书
采购意向书范本
2014/03/31 职场文书
诚信贷款承诺书
2014/05/30 职场文书
工作目标责任书
2014/07/23 职场文书
关于读书的演讲稿400字
2014/08/27 职场文书
检讨书格式范文
2015/05/07 职场文书
风之谷观后感
2015/06/11 职场文书
python 逐步回归算法
2021/04/06 Python