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 技巧大全(新手入门篇)
May 12 Javascript
Javascript弹出窗口的各种方法总结
Nov 11 Javascript
jQuery添加和删除输入文本框标签代码
May 20 Javascript
jQuery Mobile漏洞会有跨站脚本攻击风险
Feb 12 Javascript
js实现百度登录框鼠标拖拽效果
Mar 07 Javascript
微信小程序之绑定点击事件实例详解
Jul 07 Javascript
删除table表格行的实例讲解
Sep 21 Javascript
VS Code转换大小写、修改选中文字或代码颜色的方法
Dec 15 Javascript
Vue引入sass并配置全局变量的方法
Jun 27 Javascript
ES6 中可以提升幸福度的小功能
Aug 06 Javascript
vue 组件简介
Jul 31 Javascript
vue组件入门知识全梳理
Sep 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
Smarty的配置与高级缓存技术分享
2012/06/05 PHP
将PHP程序中返回的JSON格式数据用gzip压缩输出的方法
2016/03/03 PHP
可输入的下拉框
2006/06/19 Javascript
jQuery的三种$()
2009/12/30 Javascript
JavaScript中使用Math.PI圆周率属性的方法
2015/06/14 Javascript
纯js实现瀑布流布局及ajax动态新增数据
2016/04/07 Javascript
Vue如何实现组件的源码解析
2017/06/08 Javascript
nodejs读取并去重excel文件
2018/04/22 NodeJs
JS实现的缓冲运动效果示例
2018/04/30 Javascript
Vue子组件向父组件通信与父组件调用子组件中的方法
2018/06/22 Javascript
element UI upload组件上传附件格式限制方法
2018/09/04 Javascript
使用Javascript简单计算器
2018/11/17 Javascript
详解vue中localStorage的使用方法
2018/11/22 Javascript
Node.js如何对SQLite的async/await封装详解
2019/02/14 Javascript
微信小程序 可搜索的地址选择实现详解
2019/08/28 Javascript
jQuery插件simplePagination的使用方法示例
2020/04/28 jQuery
[59:07]海涛为你详解DOTA2新版本“贤哲秘契”
2014/11/22 DOTA
[54:41]2018DOTA2亚洲邀请赛3月30日 小组赛B组 VGJ.T VS paiN
2018/03/31 DOTA
python 简单的绘图工具turtle使用详解
2017/06/21 Python
pandas 快速处理 date_time 日期格式方法
2018/11/12 Python
pygame游戏之旅 添加游戏暂停功能
2018/11/21 Python
从运行效率与开发效率比较Python和C++
2018/12/14 Python
Python Pillow Image Invert
2019/01/22 Python
在python image 中安装中文字体的实现方法
2019/08/22 Python
手动安装python3.6的操作过程详解
2020/01/13 Python
python实现打砖块游戏
2020/02/25 Python
Matlab中plot基本用法的具体使用
2020/07/17 Python
python+pygame实现坦克大战小游戏的示例代码(可以自定义子弹速度)
2020/08/11 Python
Pretty Little Thing美国:时尚女性服饰
2018/08/27 全球购物
语文教育专业推荐信范文
2013/11/25 职场文书
求职简历的自我评价
2014/01/31 职场文书
《诺贝尔》教学反思
2014/02/17 职场文书
董事长助理岗位职责
2014/02/18 职场文书
政风行风整改报告
2014/11/06 职场文书
信息技术课教学反思
2016/02/23 职场文书
决心书格式及范文
2019/06/24 职场文书