<!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>

　　

js几种生成随机颜色方法的更多相关文章

  1. JS七种加密解密方法

    http://www.cnblogs.com/mq0036/p/4983858.html HTML或JS加密解密 本文一共介绍了七种方法:   一:最简单的加密解密   二:转义字符"\&q ...

  2. js几种数组遍历方法.

    第一种:普通的for循环 ; i < arr.length; i++) { } 这是最简单的一种遍历方法,也是使用的最多的一种,但是还能优化. 第二种:优化版for循环 ,len=arr.len ...

  3. 原生Js 两种方法实现页面关键字高亮显示

    原生Js 两种方法实现页面关键字高亮显示 上网看了看别人写的,不是兼容问题就是代码繁琐,自己琢磨了一下用两种方法都可以实现,各有利弊. 方法一 依靠正则表达式修改 1.获取obj的html2.统一替换 ...

  4. 2.32 js几种定位方法总结

    2.32 js几种定位方法总结 前言本篇总结了几种js常用的定位元素方法,并用js点击按钮,对input输入框输入文本 一.以下总结了5种js定位的方法除了id是定位到的是单个element元素对象, ...

  5. js一种继承机制：用对象冒充继承构造函数的属性，用原型prototype继承对象的方法。

    js一种继承机制:用对象冒充继承构造函数的属性,用原型prototype继承对象的方法. function ClassA(sColor) { this.color = sColor; } ClassA ...

  6. jquery动态加载js三种方法实例

    这里为你提供了三种动态加载js的jquery实例代码哦,由于jquery是为用户提供方便的,所以利用jquery动态加载文件只要一句话$.getScript(\"test.js\" ...

  7. js处理的8种跨域方法

    这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...

  8. JS去掉首尾空格 简单方法大全(原生正则jquery)

    JS去掉首尾空格 简单方法大全 var osfipin= ' http://www.cnblogs.com/osfipin/ '; //去除首尾空格 osfipin.replace(/(^\s*)|( ...

  9. js弹出对话框的方法总结

    九种js弹出对话框的方法总结,需要的朋友可以参考一下 [1.最基本的js弹出对话框窗口代码] 这是最基本的js弹出对话框,其实代码就几句非常简单: <script LANGUAGE=" ...

随机推荐

  1. nginx安装

    nginx工作模式-->1个master+n个worker进程 安装nginx的所需pcre库[用于支持rewrite模块] 下载软件方法: 搜索 pcre  download 网址:http: ...

  2. 从Maya中把模型搬运至网页的过程

    虽然利用threejs来在网页中渲染3d模型不是第一次折腾了,但是还是遇到了各种问题.总结下我所遇到的问题,希望能给正在使用threejs的小伙伴一个帮助. 一.所使用的软件与开发环境 Maya201 ...

  3. ECMAScript 6 扫盲

    ECMAScript 6 目前基本成为业界标准,它的普及速度比 ES5 要快很多,主要原因是现代浏览器对 ES6 的支持相当迅速,尤其是 Chrome 和 Firefox 浏览器,已经支持 ES6 中 ...

  4. [Intel Edison开发板] 01、Edison开发板性能简述

    Integrated Wi-Fi certified in 68 countries, Bluetooth® 4.0 support, 1GB DDR and 4GB flash memory sim ...

  5. ASP.NET MVC Model验证(二)

    ASP.NET MVC Model验证(二) 前言 上篇内容演示了一个简单的Model验证示例,然后在文中提及到Model验证在MVC框架中默认所处的位置在哪?本篇就是来解决这个问题的,并且会描述一下 ...

  6. ABP源码分析十一：Timing

    Timing这个简单实用的功能主要用于以统一的方式表示时间.因为ABP中有大量的module,还支持自定义module,所以将时间统一表示为local时间(默认)或utc时间是必要的. IClockP ...

  7. ABP源码分析二十四：Notification

    NotificationDefinition: 用于封装Notification Definnition 的信息.注意和Notification 的区别,如果把Notification看成是具体的消息 ...

  8. 关于js中的this之判断this

    this绑定规则的优先级顺序 new操作符绑定 > 显示绑定 > 隐式绑定 > 默认绑定   所以在判断函数在某个调用位置应用的是哪条规则,可以按下列这样的顺序   if(函数在ne ...

  9. vue-router2.0 组件之间传参及获取动态参数

    <li v-for=" el in hotLins" > <router-link :to="{path:'details',query: {id:el ...

  10. Redis数据结构详解(一)

    前言 Redis和Memcached最大的区别,Redis 除啦支持数据持久化之外,还支持更多的数据类型而不仅仅是简单key-value结构的数据记录.Redis还支持对这些数据类型做更多的服务端操作 ...