JavaScript随机生成颜色的方法

 更新时间:2016年10月15日 15:37:29   作者:li_han  
这篇文章主要介绍了JavaScript随机生成颜色的方法的相关资料,非常不错,代码简单易懂,具有参考借鉴价值,需要的朋友可以参考下

废话不多说了直接给大家贴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>

以上所述是小编给大家介绍的JavaScript随机生成颜色的方法,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的,在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • 服务器安全设置的几个注册表设置

    服务器安全设置的几个注册表设置

    服务器安全设置的几个注册表设置...
    2007-07-07
  • Bpmn.js activiti 流程编辑器详细教程

    Bpmn.js activiti 流程编辑器详细教程

    流程编辑器是一种用于创建、编辑和管理流程图的工具,它提供了一个可视化的界面,使用户能够以图形化的方式定义和配置流程的各个步骤、条件和流程间的关系,说明关于bpmn.js的一些事件, 通过本文你可以了解到,感兴趣的朋友一起看看吧
    2023-10-10
  • knockoutjs模板实现树形结构列表

    knockoutjs模板实现树形结构列表

    这篇文章主要介绍了knockoutjs模板实现树形结构列表的实现代码,非常不错,具有参考借鉴价值,需要的朋友参考下吧
    2017-07-07
  • JavaScript实现隐藏省略文字效果的方法

    JavaScript实现隐藏省略文字效果的方法

    这篇文章主要介绍了JavaScript实现隐藏省略文字效果的方法,涉及javascript基于事件响应实现页面字符串元素的获取、截取、设置等相关操作技巧,需要的朋友可以参考下
    2017-04-04
  • layui问题之模拟table表格中的选中按钮选中事件的方法

    layui问题之模拟table表格中的选中按钮选中事件的方法

    今天小编就为大家分享一篇layui问题之模拟table表格中的选中按钮选中事件的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • 浅谈Webpack多页应用HMR卡住问题

    浅谈Webpack多页应用HMR卡住问题

    这篇文章主要介绍了浅谈Webpack多页应用HMR卡住问题,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-04-04
  • 基于JS实现接粽子小游戏的示例代码

    基于JS实现接粽子小游戏的示例代码

    端午节马上就到了,听说你们公司没发粽子大礼包?没关系,这里用 JS实现了一个简单的接粽子小游戏,能接到多少粽子,完全看你手速,快跟随小编一起来学习学习吧
    2022-05-05
  • 怎么使用javascript深度拷贝一个数组

    怎么使用javascript深度拷贝一个数组

    一般情况下,使用 “=” 可以实现赋值。但对于数组、对象、函数等这些引用类型的数据,这个符号就不好使了。下面我们来详细学习下吧
    2019-06-06
  • JavaScript作用域、闭包、对象与原型链概念及用法实例总结

    JavaScript作用域、闭包、对象与原型链概念及用法实例总结

    这篇文章主要介绍了JavaScript作用域、闭包、对象与原型链,结合实例形式总结分析了javascript中变量与函数的作用域、闭包、对象、原形链相关概念、用法及注意事项,需要的朋友可以参考下
    2018-08-08
  • 微信小程序-API接口安全详解

    微信小程序-API接口安全详解

    这篇文章主要介绍了微信小程序-API接口安全详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-07-07

最新评论