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日历价格、库存等设置插件
Jul 05 jQuery
jQuery实现可编辑表格并生成json结果(实例代码)
Jul 19 jQuery
JavaScript之事件委托实例(附原生js和jQuery代码)
Jul 22 jQuery
jQuery的时间datetime控件在AngularJs中的使用实例(分享)
Aug 17 jQuery
浅谈ajax在jquery中的请求和servlet中的响应
Jan 22 jQuery
jquery 给动态生成的标签绑定事件的几种方法总结
Feb 24 jQuery
jquery.param()实现数组或对象的序列化方法
Oct 08 jQuery
jQuery添加新内容的四个常用方法分析【append,prepend,after,before】
Mar 19 jQuery
JQuery获取可视区尺寸和文档尺寸及制作悬浮菜单示例
May 14 jQuery
jQuery实现提交表单时不提交隐藏div中input的方法
Oct 08 jQuery
jquery实现简易验证插件封装
Sep 13 jQuery
jquery插件懒加载的示例
Oct 24 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函数代码
2013/08/29 PHP
thinkphp自带验证码全面解析
2016/09/18 PHP
解决thinkphp5未定义变量会抛出异常,页面错误,请稍后再试的问题
2019/10/16 PHP
浅析PHP反序列化中过滤函数使用不当导致的对象注入问题
2020/02/15 PHP
javascript replace()正则替换实现代码
2010/02/26 Javascript
artdialog的图片/标题以及关闭按钮不显示的解决方法
2013/06/27 Javascript
js实现广告漂浮效果的小例子
2013/07/02 Javascript
JS保存和删除cookie操作 判断cookie是否存在
2013/11/13 Javascript
JQuery+CSS实现图片上放置按钮的方法
2015/05/29 Javascript
JavaScript编程中布尔对象的基本使用
2015/10/25 Javascript
关于javascript中dataset的问题小结
2015/11/16 Javascript
jQuery自动完成插件completer附源码下载
2016/01/04 Javascript
javascript实现随机显示星星特效
2016/01/28 Javascript
javascript实现label标签跳出循环操作
2016/03/06 Javascript
react-router JS 控制路由跳转实例
2017/06/15 Javascript
纯JS实现只能输入数字的简单代码
2017/06/21 Javascript
浅谈Angular2 模块懒加载的方法
2017/10/04 Javascript
微信小程序实现动态改变view标签宽度和高度的方法【附demo源码下载】
2017/12/05 Javascript
angular第三方包开发整理(小结)
2018/04/19 Javascript
vue.js中ref和$refs的使用及示例讲解
2019/08/14 Javascript
关于layui 弹出层一闪而过就消失的解决方法
2019/09/09 Javascript
基于better-scroll 实现歌词联动功能的代码
2020/05/07 Javascript
对vuex中store和$store的区别说明
2020/07/24 Javascript
手把手教你用python抢票回家过年(代码简单)
2018/01/21 Python
Python爬虫框架scrapy实现的文件下载功能示例
2018/08/04 Python
基于python实现百度翻译功能
2019/05/09 Python
Python使用xpath实现图片爬取
2020/09/16 Python
AmazeUI 面板的实现示例
2020/08/17 HTML / CSS
英国最大的电脑零售连锁店集团:PC World
2016/10/10 全球购物
运动会通讯稿500字
2014/02/20 职场文书
2014年文学毕业生自我鉴定
2014/04/23 职场文书
中国梦团日活动总结
2014/07/07 职场文书
印刷技术专业自荐信
2014/09/18 职场文书
公司员工宿舍管理制度
2015/08/03 职场文书
matplotlib画混淆矩阵与正确率曲线的实例代码
2021/06/01 Python
DSP接收机前端设想
2022/04/05 无线电