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 相关文章推荐
vue中如何引入jQuery和Bootstrap
Apr 10 jQuery
jQuery插件FusionCharts绘制的2D条状图效果【附demo源码】
May 13 jQuery
JQuery Ajax 异步操作之动态添加节点功能
May 24 jQuery
jQuery+Ajax实现用户名重名实时检测
Jun 01 jQuery
jqueryUI tab标签页代码分享
Oct 09 jQuery
利用jquery如何从json中读取数据追加到html中
Dec 01 jQuery
jQuery+Cookie实现切换皮肤功能【附源码下载】
Mar 25 jQuery
jQuery中的$是什么意思及 $. 和 $().的区别
Apr 20 jQuery
jQuery实现获取form表单内容及绑定数据到form表单操作分析
Jul 03 jQuery
jquery实现的简单轮播图功能【适合新手】
Aug 17 jQuery
详解jQuery中的easyui
Sep 02 jQuery
JQuery样式与属性设置方法分析
Dec 07 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函数
2008/10/03 PHP
php 分页类 扩展代码
2009/06/11 PHP
PHP工厂模式的日常使用
2019/03/20 PHP
50个优秀经典PHP算法大集合 附源码
2020/08/26 PHP
Aster vs KG BO3 第三场2.19
2021/03/10 DOTA
一个网马的tips实现分析
2010/11/28 Javascript
改善用户体验的五款jQuery插件分享
2011/05/22 Javascript
详解vue组件化开发-vuex状态管理库
2017/04/10 Javascript
php简单数据库操作类的封装
2017/06/08 Javascript
javascript变量提升和闭包理解
2018/03/12 Javascript
vue select选择框数据变化监听方法
2018/08/24 Javascript
Vue $emit $refs子父组件间方法的调用实例
2018/09/12 Javascript
Vue表情输入组件 微信face表情组件
2019/02/11 Javascript
JS删除数组指定值常用方法详解
2020/06/04 Javascript
Javascript confirm多种使用方法解析
2020/09/25 Javascript
Python读取mp3中ID3信息的方法
2015/03/05 Python
Python闭包之返回函数的函数用法示例
2018/01/27 Python
python 列表,数组和矩阵sum的用法及区别介绍
2018/06/28 Python
python3 kmp 字符串匹配的方法
2018/07/07 Python
python 3.7.0 下pillow安装方法
2018/08/27 Python
Django CSRF跨站请求伪造防护过程解析
2019/07/31 Python
Django如何使用redis作为缓存
2020/05/21 Python
CSS3弹性盒模型开发笔记(三)
2016/04/26 HTML / CSS
详解webapp页面滚动卡顿的解决办法
2018/12/26 HTML / CSS
Html5 new XMLHttpRequest()监听附件上传进度
2021/01/14 HTML / CSS
KIEHL’S科颜氏官方旗舰店:源自美国的顶级护肤品牌
2018/06/07 全球购物
2013年军训通讯稿
2014/02/05 职场文书
机械设计及其自动化求职推荐信
2014/02/17 职场文书
求职自荐信怎么写
2014/03/06 职场文书
生产车间标语
2014/06/11 职场文书
2014副镇长民主生活会个人对照检查材料思想汇报
2014/09/30 职场文书
2014年工程工作总结
2014/11/25 职场文书
外贸采购员岗位职责
2015/04/03 职场文书
2015党建工作简报
2015/07/21 职场文书
基于nginx实现上游服务器动态自动上下线无需reload的实现方法
2021/03/31 Servers
vue使用element-ui按需引入
2022/05/20 Vue.js