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 相关文章推荐
HTML中的setCapture和releaseCapture使用介绍
Mar 21 Javascript
JavaScript中实现异步编程模式的4种方法
Sep 24 Javascript
node.js中的forEach()是同步还是异步呢
Jan 29 Javascript
JS组件系列之Bootstrap table表格组件神器【终结篇】
May 10 Javascript
javascript 小数乘法结果错误的处理方法
Jul 28 Javascript
Vue中的数据监听和数据交互案例解析
Jul 12 Javascript
vue插件实现v-model功能
Sep 10 Javascript
使用Node.js实现一个多人游戏服务器引擎
Mar 13 Javascript
微信小程序判断用户是否需要再次授权获取个人信息
Jul 18 Javascript
Vue+Node实现的商城用户管理功能示例
Dec 23 Javascript
微信小程序自定义联系人弹窗
May 26 Javascript
vue实现移动端触屏拖拽功能
Aug 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
解析php二分法查找数组是否包含某一元素
2013/05/23 PHP
浅谈php错误提示及查错方法
2015/07/14 PHP
php搜索文件程序分享
2015/10/30 PHP
laravel 实现登陆后返回登陆前的页面方法
2019/10/03 PHP
js+html5操作sqlite数据库的方法
2016/02/02 Javascript
JS动态创建元素的两种方法
2016/04/20 Javascript
JavaScript中输出信息的方法(信息确认框-提示输入框-文档流输出)
2016/06/12 Javascript
nodejs入门教程一:概念与用法简介
2017/04/24 NodeJs
使用jQuery实现鼠标点击左右按钮滑动切换
2017/08/04 jQuery
使用Fullpage插件快速开发整屏翻页的页面
2017/09/13 Javascript
Node.JS中快速扫描端口并发现局域网内的Web服务器地址(80)
2017/09/18 Javascript
vue与vue-i18n结合实现后台数据的多语言切换方法
2018/03/08 Javascript
分享几道你可能遇到的python面试题
2017/07/24 Python
python实现图片处理和特征提取详解
2017/11/13 Python
python针对不定分隔符切割提取字符串的方法
2018/10/26 Python
python实现石头剪刀布程序
2021/01/20 Python
windows下Pycharm安装opencv的多种方法
2020/03/05 Python
Python pandas如何向excel添加数据
2020/05/22 Python
Python关于拓扑排序知识点讲解
2021/01/04 Python
世界首屈一指的钓鱼用品商店:TackleDirect
2016/07/26 全球购物
英国高街品牌:Miss Selfridge(塞尔弗里奇小姐)
2016/09/21 全球购物
英国安全产品购物网站:The Safe Shop
2017/03/20 全球购物
美国Lolё官网:购买大胆而美丽的女性运动服装
2017/05/22 全球购物
印度尼西亚最大的电商平台:Tokopedia(印尼版淘宝)
2017/12/02 全球购物
联想德国官网:Lenovo Germany
2018/07/04 全球购物
什么是servlet链?
2014/07/13 面试题
妇产科护士自我鉴定
2013/10/15 职场文书
2014年基层党组织公开承诺书
2014/03/29 职场文书
给领导的感谢信范文
2015/01/23 职场文书
武当山导游词
2015/02/03 职场文书
共青团员自我评价
2015/03/10 职场文书
pytorch实现ResNet结构的实例代码
2021/05/17 Python
Python编程编写完善的命令行工具
2021/09/15 Python
基于Python和openCV实现图像的全景拼接详细步骤
2021/10/05 Python
Mysql数据库手动及定时备份步骤
2021/11/07 MySQL
5个实用的JavaScript新特性
2022/06/16 Javascript