js生成随机颜色方法代码分享(三种)


Posted in Javascript onDecember 29, 2016

话不多说,请看代码

<!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 相关文章推荐
JavaScript 基础篇之运算符、语句(二)
Apr 07 Javascript
form表单只提交数据而不进行页面跳转的解决方案
Sep 18 Javascript
jquery中常用的SET和GET$(”#msg”).html循环介绍
Oct 09 Javascript
JQuery删除DOM节点的方法
Jun 11 Javascript
JS实现的页面自定义滚动条效果
Oct 26 Javascript
JavaScript中清空数组的三种方式
Mar 22 Javascript
如何编写jquery插件
Mar 29 jQuery
Vue 2.0学习笔记之使用$refs访问Vue中的DOM
Dec 19 Javascript
vue-cli下的vuex的简单Demo图解(实现加1减1操作)
Feb 26 Javascript
为什么使用koa2搭建微信第三方公众平台的原因
May 16 Javascript
jquery实现搜索框功能实例详解
Jul 23 jQuery
Postman无法正常返回结果问题解决
Aug 28 Javascript
js实现把图片的绝对路径转为base64字符串、blob对象再上传
Dec 29 #Javascript
jQuery实现6位数字密码输入框
Dec 29 #Javascript
JQuery统计input和textarea文字输入数量(代码分享)
Dec 29 #Javascript
jQuery中的siblings()是什么意思(推荐)
Dec 29 #Javascript
JQuery获取鼠标进入和离开容器的方向
Dec 29 #Javascript
jQuery实现遮罩层登录对话框
Dec 29 #Javascript
JS实现的简易拖放效果示例
Dec 29 #Javascript
You might like
用文本作数据处理
2006/10/09 PHP
nginx下安装php7+php5
2016/07/31 PHP
利用PHP扩展Xhprof分析项目性能实践教程
2018/09/05 PHP
javascript笔记 String类replace函数的一些事
2011/09/22 Javascript
jQuery遍历DOM节点操作之filter()方法详解
2016/04/14 Javascript
JS获取IE版本号与HTML设置IE文档模式的方法
2016/10/09 Javascript
Dropzone.js实现文件拖拽上传功能(附源码下载)
2016/11/22 Javascript
Vue.js组件tree实现省市多级联动
2016/12/02 Javascript
微信小程序Server端环境配置详解(SSL, Nginx HTTPS,TLS 1.2 升级)
2017/01/12 Javascript
jQueryeasyui 中如何使用datetimebox 取两个日期间相隔的天数
2017/06/13 jQuery
详解Angular中通过$location获取地址栏的参数
2018/08/02 Javascript
使用Angular自定义字段校验指令的方法示例
2019/02/01 Javascript
Vue 后台管理类项目兼容IE9+的方法示例
2019/02/20 Javascript
jquery validate 实现动态增加/删除验证规则操作示例
2019/10/28 jQuery
WEB前端性能优化的7大手段详解
2020/02/04 Javascript
解决vue自定义指令导致的内存泄漏问题
2020/08/04 Javascript
Python守护进程(daemon)代码实例
2015/03/06 Python
python中管道用法入门实例
2015/06/04 Python
浅谈python中的占位符
2017/11/09 Python
python生成带有表格的图片实例
2019/02/03 Python
Python实现的对本地host127.0.0.1主机进行扫描端口功能示例
2019/02/15 Python
举例讲解Python常用模块
2019/03/08 Python
详解python的四种内置数据结构
2019/03/19 Python
python实现高斯(Gauss)迭代法的例子
2019/11/20 Python
python cv2在验证码识别中应用实例解析
2019/12/25 Python
python时间日期操作方法实例小结
2020/02/06 Python
python使用信号量动态更新配置文件的操作
2020/04/01 Python
HTML5 UTF-8 中文乱码的解决方法
2013/11/18 HTML / CSS
英国助听器购物网站:Hearing Direct
2018/08/21 全球购物
师范生实习个人的自我评价
2013/09/28 职场文书
防沙治沙典型材料
2014/05/07 职场文书
反腐倡廉标语
2014/06/24 职场文书
教师作风整顿个人剖析材料
2014/10/10 职场文书
2015年老干部工作总结
2015/04/23 职场文书
MySQL中in和exists区别详解
2021/06/03 MySQL
深入理解java.lang.String类的不可变性
2021/06/27 Java/Android