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 19 jQuery
jquery.uploadView 实现图片预览上传功能
Aug 10 jQuery
jQuery实现弹窗下底部页面禁止滑动效果
Dec 19 jQuery
轻松搞定jQuery+JSONP跨域请求的解决方案
Mar 06 jQuery
jQuery简单判断值是否存在于数组中的方法示例
Apr 17 jQuery
jQuery阻止事件冒泡实例分析
Jul 03 jQuery
jQuery的ztree仿windows文件新建和拖拽功能的实现代码
Dec 05 jQuery
jQuery实现移动端笔触canvas电子签名
May 21 jQuery
IDEA配置jQuery, $符号不再显示黄色波浪线的问题
Oct 09 jQuery
jQuery实现简单弹幕制作
Dec 10 jQuery
jquery实现鼠标悬浮弹出气泡提示框
Dec 23 jQuery
JS+JQuery实现无缝连接轮播图
Dec 30 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
模仿OSO的论坛(一)
2006/10/09 PHP
PHP加密扩展库Mcrypt安装和实例
2013/11/10 PHP
php输出全球各个时区列表的方法
2015/03/31 PHP
session 加入redis的实现代码
2016/07/15 PHP
php实现异步将远程链接上内容(图片或内容)写到本地的方法
2016/11/30 PHP
PHP生成随机码的思路与方法实例探索
2019/04/11 PHP
用js重建星际争霸
2006/12/22 Javascript
javascript+iframe 实现无刷新载入整页的代码
2010/03/17 Javascript
alert中断settimeout计时功能
2013/07/26 Javascript
在JavaScript中判断整型的N种方法示例介绍
2014/06/18 Javascript
js面向对象之公有、私有、静态属性和方法详解
2015/04/17 Javascript
js enter键激发事件实例代码
2016/08/17 Javascript
JavaScript中闭包之浅析解读(必看篇)
2016/08/25 Javascript
jQuery解析XML 详解及方法总结
2016/09/28 Javascript
AngularJS中$apply方法和$watch方法用法总结
2016/12/13 Javascript
详解JS去重及字符串奇数位小写转大写
2016/12/29 Javascript
jquery使用EasyUI Tree异步加载JSON数据(生成树)
2017/02/11 Javascript
vue 挂载路由到头部导航的方法
2017/11/13 Javascript
Angular5.0 子组件通过service传递值给父组件的方法
2018/07/13 Javascript
JS动态图片的实现方法完整示例
2020/01/13 Javascript
详解node.js 事件循环
2020/07/22 Javascript
独特的python循环语句
2016/11/20 Python
实践Vim配置python开发环境
2018/07/02 Python
Numpy中的mask的使用
2018/07/21 Python
python实现从文件中读取数据并绘制成 x y 轴图形的方法
2018/10/14 Python
python实现学员管理系统
2019/02/26 Python
html5 Canvas画图教程(2)—画直线与设置线条的样式如颜色/端点/交汇点
2013/01/09 HTML / CSS
HTML5响应式(自适应)网页设计的实现
2017/11/17 HTML / CSS
北美领先的智能产品购物网站:Wellbots
2018/06/11 全球购物
技能竞赛活动方案
2014/02/21 职场文书
领导走群众路线整改措施思想汇报
2014/10/12 职场文书
评职称个人总结
2015/03/05 职场文书
三八妇女节致辞
2015/07/31 职场文书
赞美教师的句子
2019/09/02 职场文书
导游词之香港-太平山顶
2019/10/18 职场文书
Python实现老照片修复之上色小技巧
2021/10/16 Python