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获取随机颜色的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
接触和学习javascript也有3~4年了，真正牵扯到前后台数据的交互，数据算法等高级编程知之甚少，甚至很少用，如果你问我你知道js什么知识呢？我可能只能说知道点jQuery的技巧，说编程都谈不上，所以需要把某一些技巧作为编程习惯固定下来，免于以后有人问我你知道什么？2015-04-04
javascript 读取内联之外的样式(style、currentStyle、getComputedStyle区别介绍
最常用的是style属性，在JavaScript中，通过document.getElementById(id).style.XXX就可以获取到XXX的值，但意外的是，这样做只能取到通过内嵌方式设置的样式值，即style属性里面设置的值。2010-05-05
这篇文章主要为大家详细介绍了微信小程序scroll-view实现左右联动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
本文为大家详细介绍下JavaScript怎么将相对地址转换为绝对地址，具体的示例如下，感兴趣的朋友可以参考下哈，希望对大家有所帮助2013-07-07
这篇文章主要介绍了前端使用Blob下载文件的几种方式,分别是直接返回文件的网络地址和返回文件流,文中通过代码介绍的非常详细,需要的朋友可以参考下2025-01-01
这篇文章主要介绍了JavaScript封闭函数及常用内置对象,结合实例形式分析了JavaScript封闭函数及常用内置对象的定义与简单使用相关操作技巧,需要的朋友可以参考下2019-05-05
如何使用bootstrap框架 bootstrap入门必看!
如何使用bootstrap？这篇文章就是告诉大家如何使用bootstrap框架，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-04-04
你知道世界上有多少种浏览器吗？除了我们熟知的IE, Firefox, Opera, Safari四大浏览器之外，世界上还有近百种浏览器。2009-02-02
本文主要介绍了js实现下一页页码效果的实例，具有很好的参考价值。下面跟着小编一起来看下吧2017-03-03
这篇文章主要介绍了详解webpack进阶之插件篇，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
最新评论