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 相关文章推荐
jValidate 基于jQuery的表单验证插件
Dec 12 Javascript
浅谈JavaScript函数参数的可修改性问题
Dec 05 Javascript
JS 对象属性相关(检查属性、枚举属性等)
Apr 05 Javascript
JS组件系列之使用HTML标签的data属性初始化JS组件
Sep 14 Javascript
JS实战篇之收缩菜单表单布局
Dec 10 Javascript
Vue 单文件中的数据传递示例
Mar 21 Javascript
浅谈Vue2.0父子组件间事件派发机制
Jan 08 Javascript
iview table render集成switch开关的实例
Mar 14 Javascript
ES6小技巧之代替lodash
Jun 07 Javascript
SSM+layUI 根据登录信息显示不同的页面方法
Sep 20 Javascript
微信小程序开发摇一摇功能
Nov 22 Javascript
JavaScript编码小技巧分享
Sep 17 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,ASP.JAVA,JAVA代码格式化工具整理
2010/06/15 PHP
PHP错误Cannot use object of type stdClass as array in错误的解决办法
2014/06/12 PHP
PHP实现的超长文本分页显示功能示例
2018/06/04 PHP
PHPExcel实现表格导出功能示例【带有多个工作sheet】
2018/06/13 PHP
php使用redis的几种常见操作方式和用法示例
2020/02/20 PHP
jq选项卡鼠标延迟的插件实例
2013/05/13 Javascript
禁止空格提交表单的js代码
2013/11/17 Javascript
JS获取select的value和text值的简单实例
2014/02/26 Javascript
用javascript读取xml文件读取节点数据
2014/08/12 Javascript
jQuery解决input超多的表单提交
2015/08/10 Javascript
详解JavaScript正则表达式之RegExp对象
2015/12/13 Javascript
使用vue-router完成简单导航功能【推荐】
2018/06/28 Javascript
详解使用mpvue开发github小程序总结
2018/07/25 Javascript
jQuery实现模拟搜索引擎的智能提示功能简单示例
2019/01/27 jQuery
微信公众号获取用户地理位置并列出附近的门店的示例代码
2019/07/25 Javascript
JS Html转义和反转义(html编码和解码)的实现与使用方法总结
2020/03/10 Javascript
[00:37]DOTA2上海特级锦标赛 Secert 战队宣传片
2016/03/03 DOTA
MySQLdb ImportError: libmysqlclient.so.18解决方法
2014/08/21 Python
Python跳出循环语句continue与break的区别
2014/08/25 Python
一步步教你用Python实现2048小游戏
2017/01/19 Python
Python简单生成随机姓名的方法示例
2017/12/27 Python
详解python实现线程安全的单例模式
2018/03/05 Python
python 通过字符串调用对象属性或方法的实例讲解
2018/04/21 Python
详解Python下ftp上传文件linux服务器
2018/06/21 Python
关于Flask项目无法使用公网IP访问的解决方式
2019/11/19 Python
pyCharm 设置调试输出窗口中文显示方式(字符码转换)
2020/06/09 Python
Python 字符串池化的前提
2020/07/03 Python
Python Matplotlib简易教程(小白教程)
2020/07/28 Python
娱乐地球:Entertainment Earth
2020/01/08 全球购物
护士自我鉴定怎么写
2014/02/07 职场文书
医学专业自荐信
2014/06/14 职场文书
公务员培的训心得体会
2014/09/01 职场文书
2015年高考寄语或鼓励的话
2015/03/23 职场文书
2015最新婚礼司仪主持词
2015/06/30 职场文书
pandas 实现将NaN转换为None
2021/05/14 Python
一文搞懂Redis中String数据类型
2022/04/03 Redis