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 相关文章推荐
使用Jquery来实现可以输入值的下拉选单 雏型
Dec 06 Javascript
a标签的href和onclick 的事件的区别介绍
Jul 26 Javascript
jquery.validate的使用说明介绍
Nov 12 Javascript
使用js判断当前时区TimeZone是否是夏令时
Feb 23 Javascript
jQuery学习笔记之toArray()
Jun 09 Javascript
js实现遮罩层划出效果是生成div而不是显示
Jul 29 Javascript
详解js私有作用域中创建特权方法
Jan 25 Javascript
vue插件tab选项卡使用小结
Oct 27 Javascript
js鼠标经过tab选项卡时实现切换延迟
Mar 24 Javascript
基于jQuery ztree实现表格风格的树状结构
Aug 31 jQuery
vue2.x集成百度UEditor富文本编辑器的方法
Sep 21 Javascript
微信小程序引入VANT组件的方法步骤
Sep 19 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和ACCESS写聊天室(八)
2006/10/09 PHP
程序员编程十条戒律
2009/07/09 PHP
php printf输出格式使用说明
2010/12/05 PHP
PHP数据流应用的一个简单实例
2012/09/14 PHP
PHP fopen中文文件名乱码问题解决方案
2020/10/28 PHP
javaScript 删除字符串空格多种方法小结
2012/10/24 Javascript
jquery自定义类似$.ajax()的方法实现代码
2013/08/13 Javascript
Javascript操作URL函数修改版
2013/11/07 Javascript
jQuery制作简洁的多级联动Select下拉框
2014/12/23 Javascript
jQuery动画效果实现图片无缝连续滚动
2016/01/12 Javascript
详谈表单重复提交的三种情况及解决方法
2017/08/16 Javascript
强大的JavaScript响应式图表Chartist.js的使用
2017/09/13 Javascript
使用 Node.js 模拟滑动拼图验证码操作的示例代码
2017/11/02 Javascript
angular2路由之routerLinkActive指令【推荐】
2018/05/30 Javascript
Vuerouter的beforeEach与afterEach钩子函数的区别
2018/12/26 Javascript
利用Angular2的Observables实现交互控制的方法
2018/12/27 Javascript
jQuery实现的简单歌词滚动功能示例
2019/01/07 jQuery
ES6 迭代器与可迭代对象的实现
2019/02/11 Javascript
ES6顶层对象、global对象实例分析
2019/06/14 Javascript
JS实现购物车基本功能
2020/11/08 Javascript
适用于 Vue 的播放器组件Vue-Video-Player操作
2020/11/16 Javascript
[07:09]2014DOTA2国际邀请赛-Newbee再次发威成功晋级决赛
2014/07/19 DOTA
Python实现比较两个文件夹中代码变化的方法
2015/07/10 Python
Python中operator模块的操作符使用示例总结
2016/06/28 Python
python dict.get()和dict['key']的区别详解
2016/06/30 Python
教你用Python创建微信聊天机器人
2020/03/31 Python
Python callable()函数用法实例分析
2018/03/17 Python
Pycharm导入Python包,模块的图文教程
2018/06/13 Python
详解python使用turtle库来画一朵花
2019/03/21 Python
python 函数中的内置函数及用法详解
2019/07/02 Python
简单了解django缓存方式及配置
2019/07/19 Python
美国当红的名品折扣网:Gilt Groupe
2016/08/15 全球购物
日本最大的药妆连锁店:Matsukiyo松本清药妆店
2017/11/23 全球购物
师范院校学生自荐信范文
2013/12/27 职场文书
海南地接欢迎词
2014/01/14 职场文书
公司出差管理制度范本
2015/08/05 职场文书