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 相关文章推荐
js 分栏效果实现代码
Aug 29 Javascript
IE6背景图片不缓存问题解决方案及图片使用策略多个方法小结
May 14 Javascript
Javascript学习笔记之 对象篇(四) : for in 循环
Jun 24 Javascript
jQuery提示效果代码分享
Nov 20 Javascript
JS实现网页背景颜色与select框中颜色同时变化的方法
Feb 27 Javascript
js实现文件上传表单域美化特效
Nov 02 Javascript
最实用的jQuery分页插件
Oct 09 Javascript
使用JS批量选中功能实现更改数据库中的status状态值(批量展示)
Nov 22 Javascript
浅谈Vue.js
Mar 02 Javascript
JS模拟超市简易收银台小程序代码解析
Aug 18 Javascript
js实现登录注册框手机号和验证码校验(前端部分)
Sep 28 Javascript
解决Vue使用mint-ui loadmore实现上拉加载与下拉刷新出现一个页面使用多个上拉加载后冲突问题
Nov 07 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中var_dump,var_export,print_r三个函数的区别
2013/06/21 PHP
四种php中webservice实现的简单架构方法及实例
2015/02/03 PHP
BOOM vs RR BO5 第二场 2.14
2021/03/10 DOTA
JavaScript中null与undefined分析
2009/07/25 Javascript
百度Popup.js弹出框进化版 拖拽小框架发布 兼容IE6/7/8,Firefox,Chrome
2010/04/13 Javascript
Json和Jsonp理论实例代码详解
2013/11/15 Javascript
js 限制input只能输入数字、字母和汉字等等
2013/12/18 Javascript
jquery遍历checkbox的注意事项说明
2014/02/21 Javascript
js实现字符串和数组之间相互转换操作
2016/01/12 Javascript
项目实践一图片上传之form表单还是base64前端图片压缩(前端图片压缩)
2016/07/28 Javascript
JavaScript中的冒泡排序法
2016/08/03 Javascript
详解vue-cli3开发Chrome插件实践
2019/05/29 Javascript
JavaScript实现的开关灯泡点击切换特效示例
2019/07/08 Javascript
js实现div色块拖动录制
2020/01/16 Javascript
JS实现图片懒加载(lazyload)过程详解
2020/04/02 Javascript
解决vue-router 切换tab标签关闭时缓存问题
2020/07/22 Javascript
JavaScript 中判断变量是否为数字的示例代码
2020/10/22 Javascript
python实现统计代码行数的方法
2015/05/22 Python
Django读取Mysql数据并显示在前端的实例
2018/05/27 Python
Python动态导入模块的方法实例分析
2018/06/28 Python
Python脚本修改阿里云的访问控制列表的方法
2019/03/08 Python
Django集成搜索引擎Elasticserach的方法示例
2019/06/04 Python
Pyqt5 基本界面组件之inputDialog的使用
2019/06/25 Python
解析Python3中的Import
2019/10/13 Python
使用Matplotlib 绘制精美的数学图形例子
2019/12/13 Python
Pytest单元测试框架如何实现参数化
2020/09/05 Python
python 基于opencv 实现一个鼠标绘图小程序
2020/12/11 Python
matplotlib之pyplot模块坐标轴标签设置使用(xlabel()、ylabel())
2021/02/22 Python
Beach Bunny Swimwear官网:设计师泳装和性感比基尼
2019/03/13 全球购物
大学生期末自我鉴定
2014/02/01 职场文书
恐龙的灭绝教学反思
2014/02/12 职场文书
护士长竞聘书
2014/03/31 职场文书
出国留学单位推荐信
2015/03/26 职场文书
建党伟业电影观后感
2015/06/01 职场文书
MySQ InnoDB和MyISAM存储引擎介绍
2022/04/26 MySQL
java版 联机五子棋游戏
2022/05/04 Java/Android