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实现QQ空间汉字转拼音功能示例
Jul 10 jQuery
详解webpack3如何正确引用并使用jQuery库
Aug 26 jQuery
jQuery图片加载失败替换默认图片方法汇总
Nov 29 jQuery
jquery如何实现点击空白处隐藏元素
Dec 05 jQuery
jQuery实现每隔一段时间自动更换样式的方法分析
May 03 jQuery
jQuery插件Validation表单验证详解
May 26 jQuery
js与jQuery实现获取table中的数据并拼成json字符串操作示例
Jul 12 jQuery
使用jquery DataTable和ajax向页面显示数据列表的方法
Aug 09 jQuery
详解如何使用webpack打包多页jquery项目
Feb 01 jQuery
jQuery Migrate 插件用法实例详解
May 22 jQuery
jquery中attr、prop、data区别与用法分析
Sep 25 jQuery
基于jQuery拖拽事件的封装
Nov 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
mysq GBKl乱码
2006/11/28 PHP
php生成xml简单实例代码
2009/12/16 PHP
学习php笔记 字符串处理
2010/10/19 PHP
PHP CLI模式下的多进程应用分析
2013/06/03 PHP
学习php设计模式 php实现合成模式(composite)
2015/12/08 PHP
PHP简单实现二维数组的矩阵转置操作示例
2017/11/24 PHP
PHP实现简单计算器小程序
2020/08/28 PHP
php文件包含的几种方式总结
2019/09/19 PHP
页面回到顶部的三种实现(锚标记,js)
2012/10/01 Javascript
JS解决ie6下png透明的方法实例
2013/08/02 Javascript
jQuery动态改变图片显示大小(修改版)的实现思路及代码
2013/12/24 Javascript
jquery中val()方法是从最后一个选项往前读取的
2015/09/06 Javascript
JavaScript利用HTML DOM进行文档操作的方法
2016/03/28 Javascript
js表单验证实例讲解
2016/03/31 Javascript
jQuery基于toggle实现click触发DIV的显示与隐藏问题分析
2016/06/12 Javascript
第十篇BootStrap轮播插件使用详解
2016/06/21 Javascript
JavaScript Ajax编程 应用篇
2016/07/02 Javascript
JS实现“隐藏与显示”功能(多种方法)
2016/11/24 Javascript
js实现城市级联菜单的2种方法
2017/06/23 Javascript
vue 监听键盘回车事件详解 @keyup.enter || @keyup.enter.native
2018/08/25 Javascript
Django+vue跨域问题解决的详细步骤
2019/01/20 Javascript
layui当点击文本框时弹出选择框,显示选择内容的例子
2019/09/02 Javascript
Vue性能优化的方法
2020/07/30 Javascript
Python爬取APP下载链接的实现方法
2016/09/30 Python
python urllib爬取百度云连接的实例代码
2017/06/19 Python
pytorch中如何使用DataLoader对数据集进行批处理的方法
2019/08/06 Python
python web框架中实现原生分页
2019/09/08 Python
python help函数实例用法
2020/12/06 Python
意大利奢侈品购物网站:Deliberti
2019/10/08 全球购物
《荷花》教学反思
2014/04/16 职场文书
建筑工地文明标语
2014/10/09 职场文书
单位个人查摆问题及整改措施
2014/10/28 职场文书
收银员岗位职责范本
2015/04/07 职场文书
护士年终工作总结不会写?各科护士模板总结
2020/01/02 职场文书
pytorch锁死在dataloader(训练时卡死)
2021/05/28 Python
CentOS 7安装mysql5.7使用XtraBackUp备份工具命令详解
2022/04/12 MySQL