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监听扫码枪输入并禁止手动输入的实现方法(推荐)
Mar 21 jQuery
解决jQuery ajax动态新增节点无法触发点击事件的问题
May 24 jQuery
jQuery用户头像裁剪插件cropbox.js使用详解
Jun 07 jQuery
jQuery Form插件使用详解_动力节点Java学院整理
Jul 17 jQuery
jQuery EasyUI结合zTree树形结构制作web页面
Sep 01 jQuery
jQuery基于闭包实现的显示与隐藏div功能示例
Jun 09 jQuery
jQuery模拟12306城市选择框功能简单实现方法示例
Aug 13 jQuery
jQuery Migrate 插件用法实例详解
May 22 jQuery
jquery实现掷骰子小游戏
Oct 24 jQuery
jquery检测上传文件大小示例
Apr 26 jQuery
jquery+ajax实现异步上传文件显示进度条
Aug 17 jQuery
jQuery实现全选按钮
Jan 01 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
使用apache模块rewrite_module (转)
2007/02/14 PHP
PHP中使用imagick生成PSD文件缩略图教程
2015/01/26 PHP
thinkphp Apache配置重启Apache1 restart 出错解决办法
2017/02/15 PHP
360搜索引擎自动收录php改写方案
2018/04/28 PHP
php实现对文件压缩简单的方法
2019/09/29 PHP
jQuery使用手册之三 CSS操作
2007/03/24 Javascript
纯javascript实现的小游戏《Flappy Pig》实例
2015/07/27 Javascript
js实现显示手机号码效果
2017/03/09 Javascript
Javascript前端经典的面试题及答案
2017/03/14 Javascript
JS对象的深度克隆方法示例
2017/03/16 Javascript
jQuery插件FusionWidgets实现的Bulb图效果示例【附demo源码下载】
2017/03/23 jQuery
Vue-Router2.X多种路由实现方式总结
2018/02/09 Javascript
使用JSON格式提交数据到服务端的实例代码
2018/04/01 Javascript
vue使用混入定义全局变量、函数、筛选器的实例代码
2019/07/29 Javascript
JS模拟浏览器实现全局搜索功能
2019/09/11 Javascript
2019年度web前端面试题总结(主要为Vue面试题)
2020/01/12 Javascript
Python中with及contextlib的用法详解
2017/06/08 Python
windows10下python3.5 pip3安装图文教程
2018/04/02 Python
python判断数字是否是超级素数幂
2018/09/27 Python
树莓派使用USB摄像头和motion实现监控
2019/06/22 Python
Django中使用Json返回数据的实现方法
2020/06/03 Python
python的链表基础知识点
2020/09/13 Python
css3进行截取替代js的substring
2013/09/02 HTML / CSS
css3实现椭圆轨迹旋转的示例代码
2018/10/29 HTML / CSS
Html5页面中的返回实现的方法
2018/02/26 HTML / CSS
eBay爱尔兰站:eBay.ie
2019/08/09 全球购物
CAT鞋加拿大官网:CAT Footwear加拿大
2020/08/05 全球购物
日语专业个人的求职信
2013/12/03 职场文书
2014自荐信的写作技巧
2014/01/28 职场文书
医学专业职业生涯规划范文
2014/02/05 职场文书
模具专业自荐信
2014/05/29 职场文书
党员自我剖析材料(群众路线)
2014/10/06 职场文书
介绍信格式样本
2015/05/05 职场文书
2016年6.5世界环境日宣传活动总结
2016/04/01 职场文书
vue中 this.$set的使用详解
2021/11/17 Vue.js
Vue.Draggable实现交换位置
2022/04/07 Vue.js