登录  /  注册
首页 > web前端 > js教程 > 正文

jQuery获取随机颜色步骤详解

php中世界最好的语言
发布: 2018-05-23 09:35:25
原创
1142人浏览过

这次给大家带来jQuery获取随机颜色步骤详解,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 <p style="text-align: left;"><strong>2.html</strong></p><p style="text-align: left;"><code>.<h3>获取任意颜色</h3>  </code></p><p style="text-align: left;">效果:</p><p style="text-align: left;"><img alt="" src="https://img.php.cn/upload/article/000/061/021/c28f3622f90c0e16835abe9347da377d-0.png"></p><p   style="max-width:90%"><span style="color: #ff0000"><strong>下面在看一段代码关于js几种生成随机颜色方法</strong></span></p><pre class="brush:php;toolbar:false">nbsp;html&gt;


 <meta>
 <title></title>
  <button>调用第一种</button>
  <button>调用第二种</button>
  <button>调用第三种</button>
  <script>
   var btn1=document.getElementById(&#39;btn1&#39;);
   btn1.onclick=function(){
    document.body.style.background=bg1()
   };
   var btn2=document.getElementById(&#39;bnt2&#39;);
   btn2.onclick=function(){
    document.body.style.background=bg2();
   };
   var btn3=document.getElementById(&#39;btn3&#39;);
   btn3.onclick=function(){
    document.body.style.background=bg3();
   };
   function bg1(){
    return &#39;#&#39;+Math.floor(Math.random()*256).toString(10);
   }
   function bg2(){
    return &#39;#&#39;+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+&#39;,&#39;+g+&#39;,&#39;+b+")";//所有方法的拼接都可以用ES6新特性`其他字符串{$变量名}`替换
   }
  </script>
登录后复制

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

JavaScript callback回调函数使用案例详解

使用React Navigation注意事项有哪些

以上就是jQuery获取随机颜色步骤详解的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号