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 相关文章推荐
Google Suggest ;-) 基于js的动态下拉菜单
Oct 11 Javascript
List all the Databases on a SQL Server
Jun 21 Javascript
Javascript中使用parseInt函数需要注意的问题
Apr 02 Javascript
使用coffeescript编写node.js项目的方法汇总
Aug 05 Javascript
jQuery实现获取元素索引值index的方法
Sep 18 Javascript
jQuery ajax实现省市县三级联动
Mar 07 Javascript
简述Angular 5 快速入门
Nov 04 Javascript
Vue+iview+webpack ie浏览器兼容简单处理
Sep 20 Javascript
详解vue中$nextTick和$forceUpdate的用法
Dec 11 Javascript
浅谈Vue 函数式组件的使用技巧
Jun 16 Javascript
原生小程序封装跑马灯效果
Oct 21 Javascript
vue监听滚动事件的方法
Dec 21 Vue.js
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缓存技术的使用说明
2011/08/06 PHP
PHP生成图片验证码、点击切换实例
2014/06/25 PHP
php判断GIF图片是否为动画的方法
2020/09/04 PHP
php实现斐波那契数列的简单写法
2014/07/19 PHP
php基于socket实现SMTP发送邮件的方法
2015/03/05 PHP
解决微信授权回调页面域名只能设置一个的问题
2016/12/11 PHP
PHP中散列密码的安全性分析
2019/07/26 PHP
javascript 避免闭包引发的问题
2009/03/17 Javascript
jquery重新播放css动画所遇问题解决
2013/08/21 Javascript
js 时间函数应用加、减、比较、格式转换的示例代码
2013/08/23 Javascript
Javascript中查找不以XX字符结尾的单词示例代码
2013/10/15 Javascript
JavaScript面向对象编程入门教程
2014/04/16 Javascript
jQuery插件简单实现方法
2015/07/18 Javascript
深入浅析NodeJs并发异步的回调处理
2015/12/21 NodeJs
功能强大的Bootstrap组件(结合js)
2016/08/03 Javascript
完美解决input[type=number]无法显示非数字字符的问题
2017/02/28 Javascript
jquery中封装函数传递当前元素的方法示例
2017/05/05 jQuery
深入学习nodejs中的async模块的使用方法
2017/07/12 NodeJs
JavaScript使用ul中li标签实现删除效果
2019/04/15 Javascript
Vue Elenent实现表格相同数据列合并
2020/11/30 Vue.js
python获取网页状态码示例
2014/03/30 Python
Python中的元类编程入门指引
2015/04/15 Python
Python随机生成带特殊字符的密码
2016/03/02 Python
python3 kmp 字符串匹配的方法
2018/07/07 Python
Sanic框架Cookies操作示例
2018/07/17 Python
对pandas中时间窗函数rolling的使用详解
2018/11/28 Python
opencv实现静态手势识别 opencv实现剪刀石头布游戏
2019/01/22 Python
对Python实现累加函数的方法详解
2019/01/23 Python
Python实现的文轩网爬虫完整示例
2019/05/16 Python
Python数据结构dict常用操作代码实例
2020/03/12 Python
opencv 图像加法与图像融合的实现代码
2020/07/08 Python
解决阿里云邮件发送不能使用25端口问题
2020/08/07 Python
使用HTML5进行SVG矢量图形绘制的入门教程
2016/02/19 HTML / CSS
Boden美国官网:英伦原创时装品牌
2017/07/03 全球购物
2015年护士节活动总结
2015/02/10 职场文书
放飞理想主题班会
2015/08/14 职场文书