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 相关文章推荐
改进版通过Json对象实现深复制的方法
Oct 24 Javascript
JQuery 中几个类选择器的简单使用介绍
Mar 14 Javascript
JS简单实现登陆验证附效果图
Nov 19 Javascript
JS阻止用户多次提交示例代码
Mar 26 Javascript
深入理解JavaScript系列(46):代码复用模式(推荐篇)详解
Mar 04 Javascript
JavaScript实现将数组中所有元素连接成一个字符串的方法
Apr 06 Javascript
完美解决jQuery符号$与其他javascript 库、框架冲突的问题
Aug 09 Javascript
jQuery实现的简单悬浮层功能完整实例
Jan 23 Javascript
react-redux中connect的装饰器用法@connect详解
Jan 13 Javascript
配置一个vue3.0项目的完整步骤
Apr 26 Javascript
微信小程序实现3D轮播图效果(非swiper组件)
Sep 21 Javascript
如何在 Vue 中使用 JSX
Feb 14 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
web目录下不应该存在多余的程序(安全考虑)
2012/05/09 PHP
深入解析Session是否必须依赖Cookie
2013/08/02 PHP
php中使用session_set_save_handler()函数把session保存到MySQL数据库实例
2014/11/06 PHP
php使用递归计算文件夹大小
2014/12/24 PHP
Yii框架中jquery表单验证插件用法示例
2016/10/18 PHP
ThinkPHP整合datatables实现服务端分页的示例代码
2018/02/10 PHP
一个JS翻页效果
2007/07/23 Javascript
JavaScript 工具库 Cloudgamer JavaScript Library v0.1 发布
2009/10/29 Javascript
浏览器脚本兼容 文本框中,回车键触发事件的兼容
2010/06/21 Javascript
javascript高级程序设计第二版第十二章事件要点总结(常用的跨浏览器检测方法)
2012/08/22 Javascript
jQuery遍历Form示例代码
2013/09/03 Javascript
JavaScript中合并数组的N种方法
2014/09/16 Javascript
jQuery在页面加载时动态修改图片尺寸的方法
2015/03/20 Javascript
JavaScript事件处理的方式(三种)
2016/04/26 Javascript
Vue.js组件tab实现选项卡切换
2020/03/23 Javascript
基于vue2.0+vuex的日期选择组件功能实现
2017/03/13 Javascript
jQuery判断邮箱格式对错实例代码讲解
2017/04/12 jQuery
JavaScript使用FileReader实现图片上传预览效果
2020/03/27 Javascript
Vue引入sass并配置全局变量的方法
2018/06/27 Javascript
通过循环优化 JavaScript 程序
2019/06/24 Javascript
浅谈vue 组件中的setInterval方法和window的不同
2020/07/30 Javascript
基于javascript实现放大镜特效
2020/12/03 Javascript
Python BeautifulSoup中文乱码问题的2种解决方法
2014/04/22 Python
Python对象的深拷贝和浅拷贝详解
2014/08/25 Python
Python下线程之间的共享和释放示例
2015/05/04 Python
python dict 字典 以及 赋值 引用的一些实例(详解)
2017/01/20 Python
python实现文本界面网络聊天室
2018/12/12 Python
解决django服务器重启端口被占用的问题
2019/07/26 Python
Python:type、object、class与内置类型实例
2019/12/25 Python
python GUI库图形界面开发之PyQt5结合Qt Designer创建信号与槽的详细方法与实例
2020/03/08 Python
基于Python爬取素材网站音频文件
2020/10/21 Python
澳大利亚的奢侈品牌:Oroton
2016/08/26 全球购物
意大利文具和办公产品在线商店:Y-Office
2020/02/27 全球购物
经贸日语专业个人求职信范文
2013/12/28 职场文书
学校消防安全制度
2014/01/30 职场文书
CSS 鼠标选中文字后改变背景色的实现代码
2023/05/21 HTML / CSS