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 相关文章推荐
动态创建样式表在各浏览器中的差异测试代码
Sep 13 Javascript
Jquery操作下拉框(DropDownList)实现取值赋值
Aug 13 Javascript
javascript获取选中的文本的方法代码
Oct 30 Javascript
JS+JSP checkBox 全选具体实现
Jan 02 Javascript
js如何判断访问是来自搜索引擎(蜘蛛人)还是直接访问
Sep 14 Javascript
jQuery获取复选框被选中数量及判断选择值的方法详解
May 25 Javascript
AngularJs  Creating Services详解及示例代码
Sep 02 Javascript
JSON 对象未定义错误的解决方法
Sep 29 Javascript
jQuery中的100个技巧汇总
Dec 15 Javascript
简单实现node.js图片上传
Dec 18 Javascript
bootstrap select2插件用ajax来获取和显示数据的实例
Aug 09 Javascript
vue中实现弹出层动画效果的示例代码
Sep 25 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导出Excel的小经验 完美解决乱码问题
2013/06/10 PHP
CI(CodeIgniter)框架中URL特殊字符处理与SQL注入隐患分析
2019/02/28 PHP
为数据添加append,remove功能
2006/10/03 Javascript
javascript 尚未实现错误解决办法
2008/11/27 Javascript
利用JQuery+EasyDrag 实现弹出可拖动的Div,同时向Div传值,然后返回Div选中的值
2009/10/24 Javascript
使用jQuery模板来展现json数据的代码
2010/10/22 Javascript
jquery 操作日期、星期、元素的追加的实现代码
2012/02/07 Javascript
JQuery实现鼠标移动图片显示描述层的方法
2015/06/25 Javascript
javascript使用输出语句实现网页特效代码
2015/08/06 Javascript
js中substring和substr两者区别和使用方法
2015/11/09 Javascript
理解javascript模块化
2016/03/28 Javascript
vue组件实例解析
2017/01/10 Javascript
详解vue 中使用 AJAX获取数据的方法
2017/01/18 Javascript
jQuery幻灯片插件owlcarousel参数说明中文文档
2018/02/27 jQuery
超出JavaScript安全整数限制的数字计算BigInt详解
2018/06/24 Javascript
Vue引入sass并配置全局变量的方法
2018/06/27 Javascript
vue-cli3脚手架的配置及使用教程
2018/08/28 Javascript
Vue触发式全局组件构建的方法
2018/11/28 Javascript
浅谈js闭包理解
2019/03/28 Javascript
解决vue项目中页面调用数据 在数据加载完毕之前出现undefined问题
2019/11/14 Javascript
[48:53]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS VG第一场
2014/05/26 DOTA
50行Python代码实现人脸检测功能
2018/01/23 Python
Python中字符串String的基本内置函数与过滤字符模块函数的基本用法
2019/05/27 Python
Tensorflow读取并输出已保存模型的权重数值方式
2020/01/04 Python
Python requests及aiohttp速度对比代码实例
2020/07/16 Python
Django如何批量创建Model
2020/09/01 Python
python批量生成条形码的示例
2020/10/10 Python
西班牙购买行李箱和背包网站:Maletas Greenwich
2019/10/08 全球购物
Linux面试题LINUX系统类
2014/11/19 面试题
纪念九一八事变演讲稿:青少年应树立远大理想
2014/09/14 职场文书
神秘岛读书笔记
2015/07/01 职场文书
遗嘱范文
2015/08/07 职场文书
2019年最新版见习人员管理制度!
2019/07/08 职场文书
mysql中between的边界,范围说明
2021/06/08 MySQL
MySQL系列之四 SQL语法
2021/07/02 MySQL
python编程项目中线上问题排查与解决
2021/11/01 Python