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表格万条数据瞬间加载实现代码
Feb 20 Javascript
JavaScript 实现简单的倒计时弹窗DEMO附图
Mar 05 Javascript
select多选 multiple的使用示例
Jun 16 Javascript
js实现网页右上角滑出会自动消失大幅广告的方法
Feb 27 Javascript
微信小程序 获取微信OpenId详解及实例代码
Oct 31 Javascript
angular 基于ng-messages的表单验证实例
May 04 Javascript
JavaScript中正则表达式判断匹配规则及常用方法
Aug 03 Javascript
基于vue实现分页效果
Nov 06 Javascript
小程序实现订单倒计时功能
Apr 23 Javascript
解决vue-cli webpack打包开启Gzip 报错问题
Jul 24 Javascript
Node 使用express-http-proxy 做api网关的实现
Oct 15 Javascript
JS常用跨域方法实现原理解析
Dec 09 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 显示客户端IP与服务器IP的代码
2010/10/12 PHP
JS提交并解析后台返回的XML的代码
2008/11/03 Javascript
jQuery UI Autocomplete 体验分享
2012/02/14 Javascript
两个listbox实现选项的添加删除和搜索
2013/03/01 Javascript
node.js中的fs.fsyncSync方法使用说明
2014/12/15 Javascript
基于JS如何实现类似QQ好友头像hover时显示资料卡的效果(推荐)
2016/06/09 Javascript
Vue.js每天必学之表单控件绑定
2016/09/05 Javascript
利用bootstrapValidator验证UEditor
2016/09/14 Javascript
angular+webpack2实战例子
2017/05/23 Javascript
bootstrap表格内容过长时用省略号表示的解决方法
2017/11/21 Javascript
React实现全局组件的Toast轻提示效果
2018/09/21 Javascript
微信小程序地图(map)组件点击(tap)获取经纬度的方法
2019/01/10 Javascript
countUp.js实现数字动态变化效果
2019/10/17 Javascript
JavaScript中的函数申明、函数表达式、箭头函数
2019/12/06 Javascript
Vue scoped及deep使用方法解析
2020/08/01 Javascript
[06:44]2014DOTA2国际邀请赛-钥匙体育馆开战 开幕式振奋人心
2014/07/19 DOTA
django实现用户登陆功能详解
2017/12/11 Python
Python爬虫实现百度图片自动下载
2018/02/04 Python
Python实现将json文件中向量写入Excel的方法
2018/03/26 Python
python3 selenium 切换窗口的几种方法小结
2018/05/21 Python
Python迭代器与生成器用法实例分析
2018/07/09 Python
Python输出\u编码将其转换成中文的实例
2018/12/15 Python
python opencv调用笔记本摄像头
2019/08/28 Python
解决Python import docx出错DLL load failed的问题
2020/02/13 Python
Python flask框架端口失效解决方案
2020/06/04 Python
Django创建一个后台的基本步骤记录
2020/10/02 Python
IE兼容css3圆角的实现代码
2011/07/21 HTML / CSS
拉夫劳伦爱尔兰官方网站:Ralph Lauren爱尔兰
2020/04/10 全球购物
Groupon西班牙官方网站:在线优惠券和交易,节省高达70%
2021/03/13 全球购物
财务副总经理工作职责
2013/11/25 职场文书
项目管理计划书
2014/01/09 职场文书
护士感人事迹
2014/05/01 职场文书
公司离职证明范本(汇总)
2014/09/10 职场文书
总经理助理岗位职责范本
2015/03/31 职场文书
《我在为谁工作》:工作的质量往往决定生活的质量
2019/12/27 职场文书
python爬虫之利用selenium模块自动登录CSDN
2021/04/22 Python