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插件Echarts实现的渐变色柱状图
Mar 23 jQuery
jQuery插件FusionWidgets实现的Cylinder图效果示例【附demo源码】
Mar 23 jQuery
jQuery操作css样式
May 15 jQuery
Angular2使用jQuery的方法教程
May 28 jQuery
jQuery.form.js的使用详解
Jun 14 jQuery
jQuery访问浏览器本地存储cookie、localStorage和sessionStorage的基本用法
Oct 20 jQuery
jQuery中将json数据显示到页面表格的方法
May 27 jQuery
jQuery实现列表的增加和删除功能
Jun 14 jQuery
jQuery实现参数自定义的文字跑马灯效果
Aug 15 jQuery
JQuery获取可视区尺寸和文档尺寸及制作悬浮菜单示例
May 14 jQuery
jQuery操作动画完整实例分析
Jan 10 jQuery
jQuery 淡入/淡出效果函数用法分析
May 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
php5.2.0内存管理改进
2007/01/22 PHP
PHP开发中的错误收集,不定期更新。
2011/02/03 PHP
PHP获取php,mysql,apche的版本信息示例代码
2014/01/16 PHP
Linux下PHP安装mcrypt扩展模块笔记
2014/09/10 PHP
windows下apache搭建php开发环境
2015/08/27 PHP
PHP创建word文档的方法(平台无关)
2016/03/29 PHP
使用Yii2实现主从数据库设置
2016/11/20 PHP
PHP输出Excel PHPExcel的方法
2018/07/26 PHP
让GoogleCode的SVN下的HTML文件在FireFox下正常显示.
2009/05/25 Javascript
推荐30个新鲜出炉的精美 jQuery 效果
2012/03/26 Javascript
IE中jquery.form中ajax提交没反应解决方法分享
2012/09/11 Javascript
BootStrap下jQuery自动完成的样式调整
2016/05/30 Javascript
javascript 判断是否是微信浏览器的方法
2016/10/09 Javascript
js获取地址栏参数的两种方法
2017/06/27 Javascript
JavaScript模块详解
2017/12/18 Javascript
Vue单页及多页应用全局配置404页面实践记录
2018/05/22 Javascript
JavaScript Dom 绑定事件操作实例详解
2019/10/02 Javascript
ES6常用小技巧总结【去重、交换、合并、反转、迭代、计算等】
2019/12/21 Javascript
详解vue-router的Import异步加载模块问题的解决方案
2020/05/13 Javascript
antd-DatePicker组件获取时间值,及相关设置方式
2020/10/27 Javascript
Python字符串处理之count()方法的使用
2015/05/18 Python
python列表的常用操作方法小结
2016/05/21 Python
python监控进程脚本
2018/04/12 Python
使用Python通过win32 COM实现Word文档的写入与保存方法
2018/05/08 Python
更改Python的pip install 默认安装依赖路径方法详解
2018/10/27 Python
python修改txt文件中的某一项方法
2018/12/29 Python
Python绘制词云图之可视化神器pyecharts的方法
2021/02/23 Python
使用CSS3实现字体颜色渐变的实现
2020/08/10 HTML / CSS
俄罗斯卫浴采暖及维修用品超级市场:Dkrussia
2020/05/12 全球购物
求职信模版
2013/11/30 职场文书
2015年中个人总结范文
2015/03/10 职场文书
离婚起诉书范本
2015/05/18 职场文书
2015高中教师个人工作总结
2015/07/21 职场文书
党员反四风学习心得体会
2016/01/22 职场文书
z-index不起作用
2021/03/31 HTML / CSS
如何搭建 MySQL 高可用高性能集群
2021/06/21 MySQL