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数组长度问题代码说明
Jan 20 Javascript
js中arguments的用法(实例讲解)
Nov 30 Javascript
IE中的File域无法清空使用jQuery重设File域
Apr 24 Javascript
Javascript中prototype属性实现给内置对象添加新的方法
May 14 Javascript
jquery.validate 自定义验证方法及validate相关参数
Jan 18 Javascript
JavaScript中的操作符类型转换示例总结
May 30 Javascript
javascript中的 object 和 function小结
Aug 14 Javascript
AngularJS 获取ng-repeat动态生成的ng-model值实例详解
Nov 29 Javascript
BootStrap实现带关闭按钮功能
Feb 15 Javascript
vue项目中v-model父子组件通信的实现详解
Dec 10 Javascript
JS实现获取word文档内容并输出显示到html页面示例
Jun 23 Javascript
js实现带积分弹球小游戏
Jul 21 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
PHP完整的日历类(CLASS)
2006/11/27 PHP
[转帖]PHP世纪万年历
2006/12/06 PHP
javascript String 对象
2008/04/25 Javascript
jquery 弹出登录窗口实现代码
2009/12/24 Javascript
JavaScript中为元素加上name属性的方法
2011/05/09 Javascript
ExtJS4 Grid改变单元格背景颜色及Column render学习
2013/02/06 Javascript
JQuery插件开发示例代码
2013/11/06 Javascript
原始XMLHttpRequest方法详情回顾
2013/11/28 Javascript
IE浏览器不支持getElementsByClassName的解决方法
2014/08/27 Javascript
Javascript函数式编程简单介绍
2015/10/11 Javascript
javascript实现的网站访问量统计代码
2015/12/20 Javascript
原生Javascript和jQuery做轮播图简单例子
2016/10/11 Javascript
小程序开发实战:实现九宫格界面的导航的代码实现
2017/01/19 Javascript
Vue.js实战之组件之间的数据传递
2017/04/01 Javascript
JS在if中的强制类型转换方式
2018/07/15 Javascript
JavaScript求一个数组中重复出现次数最多的元素及其下标位置示例
2018/07/23 Javascript
JS异步宏队列与微队列原理区别详解
2020/07/02 Javascript
Eclipse + Python 的安装与配置流程
2013/03/05 Python
使用IronPython把Python脚本集成到.NET程序中的教程
2015/03/31 Python
python通过定义一个类实例作为ftp回调方法
2015/05/04 Python
python实现求最长回文子串长度
2018/01/22 Python
详解Django中类视图使用装饰器的方式
2018/08/12 Python
使用python制作一个为hex文件增加版本号的脚本实例
2019/06/12 Python
解决pyqt5中QToolButton无法使用的问题
2019/06/21 Python
Django框架静态文件使用/中间件/禁用ip功能实例详解
2019/07/22 Python
PyTorch 随机数生成占用 CPU 过高的解决方法
2020/01/13 Python
Python搭建Keras CNN模型破解网站验证码的实现
2020/04/07 Python
Python使用requests模块爬取百度翻译
2020/08/25 Python
Python装饰器如何实现修复过程解析
2020/09/05 Python
详解HTML5之pushstate、popstate操作history,无刷新改变当前url
2017/03/15 HTML / CSS
个人四风问题整改措施思想汇报
2014/10/04 职场文书
安全生产标语大全
2014/10/06 职场文书
开幕式邀请函
2015/01/31 职场文书
走进毛泽东观后感
2015/06/04 职场文书
汤姆索亚历险记读书笔记
2015/06/29 职场文书
党风廉政教育心得体会2016
2016/01/22 职场文书