脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → jquery 随机颜色

jQuery获取随机颜色的实例代码

 更新时间：2018年05月21日 10:59:47   作者：The_road_of_ordinary  
这篇文章主要介绍了jQuery获取随机颜色的实例代码,非常不错，具有一定的参考借鉴价值，感兴趣的朋友跟随脚本之家小编来学习吧

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> 

效果：

下面在看一段代码关于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获取随机颜色的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

相关文章

  • 二级域名或跨域共享Cookies的实现方法

    二级域名或跨域共享Cookies的实现方法

    适用于Asp。 在主域名设置的Cookie，在各子域名共用；适用于博客等提供二级域名。这个问题，以网上有众多帖子，可惜都没有完整解决。
    2008-08-08
  • 详解微信小程序「渲染层网络层错误」的解决方法

    详解微信小程序「渲染层网络层错误」的解决方法

    这篇文章主要介绍了详解微信小程序「渲染层网络层错误」的解决方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2021-01-01
  • ASP中进行HTML数据及JS数据编码函数

    ASP中进行HTML数据及JS数据编码函数

    在有些时候我们无法控制乱码的出现, 比如发送邮件的时候有些邮件显示乱码, 比如Ajax返回数据总是乱码. 怎么办?
    2009-11-11
  • 限制textbox或textarea输入字符长度的JS代码

    限制textbox或textarea输入字符长度的JS代码

    textbox或textarea的输入字符限制有很多方法，在本将为大家详细介绍下js中时如何实现的，感兴趣的朋友不要错过
    2013-10-10
  • 前端数据加密方式的常用6种使用最详解

    前端数据加密方式的常用6种使用最详解

    在前端开发中加密技术是保护数据安全的重要手段,本文介绍了六种常用的加密方法,其中包括Base64、MD5、SHA256、SHA1、AES和字符串的escape编码,每种加密方法都有其特定用途和使用场景,选择合适的加密方法可以有效提升应用的安全性,需要的朋友可以参考下
    2024-10-10
  • JavaScript的事件机制详解

    JavaScript的事件机制详解

    事件是将JavaScript脚本与网页联系在一起的主要方式，是JavaScript中最重要的主题之一。本文将详细探讨JavaScript的事件机制，并对比分析了浏览器之间的不同，具体内容包括事件流、事件处理程序绑定方式、事件对象等。
    2017-01-01
  • uniapp与webview直接进行传值的代码示例

    uniapp与webview直接进行传值的代码示例

    在使用UniApp开发应用时,经常需要实现WebView与UniApp之间的数据交互,文中通过代码介绍的非常详细,对大家的学习或者工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2024-09-09
  • js学使用setTimeout实现轮循动画

    js学使用setTimeout实现轮循动画

    这篇文章主要为大家详细介绍了js使用setTimeout实现轮循动画，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-07-07
  • javascript 使用sleep函数的常见方法详解

    javascript 使用sleep函数的常见方法详解

    这篇文章主要介绍了javascript 使用sleep函数的常见方法,结合实例形式分析总结了javascript sleep函数的功能、常见使用方法与操作注意事项,需要的朋友可以参考下
    2020-04-04
  • JS简单实现数组去重的方法分析

    JS简单实现数组去重的方法分析

    这篇文章主要介绍了JS简单实现数组去重的方法,结合具体实例形式分析了javascript数组遍历、判断实现去重复的相关操作技巧与注意事项,需要的朋友可以参考下
    2017-10-10

最新评论