生成随机颜色

方法1：RGB模式

  1. function randomColor1()
  2.             {
  3.                 var r=Math.floor(Math.random()*256);
  4.                 var g=Math.floor(Math.random()*256);
  5.                 var b=Math.floor(Math.random()*256);
  6.                 //在控制器中显示出随机生成的颜色(可以删除,无影响)
  7.                 console.log("rgb("+r+","+g+","+b+")");
  8.                 //返回随机生成的颜色
  9.                 return "rgb("+r+","+g+","+b+")";
  10.             }

方法2：随机生成6位[0-9]进行拼接

  1. function randomColor2()
  2.             {
  3.                 var str1="#";
  4.                 for (var i=0;i<6;i++) {
  5.                     str1+=Math.floor(Math.random()*9);
  6.                 }
  7.                 //在控制器中显示出随机生成的颜色(可以删除,无影响)
  8.                 console.log(str1);
  9.                 //返回随机生成的颜色
  10.                 return str1;
  11.             }

自动随机切换页面颜色

采用定时器，每300毫秒调用一次。

  1.         //存放定时器的变量
  2.             var timer;
  3.             //创建定时器，自动修改背景颜色
  4.             function createTimer(){
  5.                 //创建定时器，并调用方法randomColor1(可修改为randomColor2)
  6.                 timer=window.setInterval(function(){
  7.                     //获取body
  8.                     var body1=document.getElementsByTagName("body");
  9.                     //修改body的背景样式
  10.                     body1[0].style.backgroundColor=randomColor1();
  11.                 },300);
  12.                 //定时器开启,自动修改背景按钮，不可用    停止自动修改背景  可用
  13.                 var but1=document.getElementById("but3");
  14.                 but1.disabled=false;
  15.                 var but2=document.getElementById("but4");
  16.                 but2.disabled=true;
  17.             }
  18.             //清除定时器
  19.             function clearTimer(){
  20.                 //清除定时器
  21.                 window.clearInterval(timer);
  22.                 //定时器开启,自动修改背景按钮，可用    停止自动修改背景，不可用
  23.                 var but1=document.getElementById("but3");
  24.                 but1.disabled=true;
  25.                 var but2=document.getElementById("but4");
  26.                 but2.disabled=false;
  27.             }

实现页面背景颜色随机改变（完整代码）

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.         <script type="text/javascript">
  7.             window.onload=function (){
  8.                 //页面开始随机切换页面背景(随机色)
  9.                 createTimer();
  10.             }
  11.             //按钮1:切换颜色不同方法
  12.             function but1(strColor){
  13.                 //获取body节点
  14.                 var body1=document.getElementsByTagName("body");
  15.                 //修改body的背景颜色
  16.                 body1[0].style.backgroundColor=strColor;
  17.             }
  18.             //生成随机数：RGB模式
  19.             function randomColor1()
  20.             {
  21.                 var r=Math.floor(Math.random()*256);
  22.                 var g=Math.floor(Math.random()*256);
  23.                 var b=Math.floor(Math.random()*256);
  24.                 //在控制器中显示出随机生成的颜色(可以删除,无影响)
  25.                 console.log("rgb("+r+","+g+","+b+")");
  26.                 //返回随机生成的颜色
  27.                 return "rgb("+r+","+g+","+b+")";
  28.             }
  29.             //生成随机色2:随机生成6位[0-9]进行拼接
  30.             function randomColor2()
  31.             {
  32.                 var str1="#";
  33.                 for (var i=0;i<6;i++) {
  34.                     str1+=Math.floor(Math.random()*9);
  35.                 }
  36.                 //在控制器中显示出随机生成的颜色(可以删除,无影响)
  37.                 console.log(str1);
  38.                 //返回随机生成的颜色
  39.                 return str1;
  40.             }
  41.  
  42.             //存放定时器的变量
  43.             var timer;
  44.             //创建定时器，自动修改背景颜色
  45.             function createTimer(){
  46.                 //创建定时器，并调用方法randomColor1(可修改为randomColor2)
  47.                 timer=window.setInterval(function(){
  48.                     //获取body
  49.                     var body1=document.getElementsByTagName("body");
  50.                     //修改body的背景样式
  51.                     body1[0].style.backgroundColor=randomColor1();
  52.                 },300);
  53.                 //定时器开启,自动修改背景按钮，不可用    停止自动修改背景  可用
  54.                 var but1=document.getElementById("but3");
  55.                 but1.disabled=false;
  56.                 var but2=document.getElementById("but4");
  57.                 but2.disabled=true;
  58.             }
  59.             //清除定时器
  60.             function clearTimer(){
  61.                 //清除定时器
  62.                 window.clearInterval(timer);
  63.                 //定时器开启,自动修改背景按钮，可用    停止自动修改背景，不可用
  64.                 var but1=document.getElementById("but3");
  65.                 but1.disabled=true;
  66.                 var but2=document.getElementById("but4");
  67.                 but2.disabled=false;
  68.             }
  69.         </script>
  70.     </head>
  71.     <body>
  72.         <button id="but1" onclick="but1(randomColor2())">手动修改背景1</button>
  73.         <button id="but2" onclick="but1(randomColor2())">手动修改背景2</button><br/>
  74.         <button id="but3" onclick="clearTimer()">停止自动修改背景</button>
  75.         <!--disabled 标签不可用  true|false-->
  76.         <button id="but4" onclick="createTimer()">自动修改背景</button>
  77.     </body>
  78. </html>

js 颜色随机切换的更多相关文章

  1. js图片随机切换

    使用js做到随机切换图片 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...

  2. js设置随机切换背景图片

    <script> var imgs =["http://images.cnblogs.com/cnblogs_com/xiaobo-Linux/1112236/o_2.jpg&q ...

  3. JS实现随机颜色的3种方法与颜色格式的转化

    JS实现随机颜色的3种方法与颜色格式的转化   随机颜色和颜色格式是我们在开发中经常要用到的一个小功能,网上相关的资料也很多,想着有必要总结一下自己的经验.所以这篇文章主要介绍了JS实现随机颜色的3种 ...

  4. canvas绘制圆心扇形可组成颜色随机的七色小花

    啊~现在应该还是春天吧.心情一如既往的烦闷呐.最近做了一个canvas的扇形绘制的东西.把它整理出来变成一个适合春天的花朵绘制~沉闷的工作环境已经让我这种有趣的人也变成了无聊鬼怪呢.下次一定想找一个年 ...

  5. js 生成随机炫彩背景

    在浏览 https://ghost.org/xxxx/ 时. 可以使用 background-size: cover; 加上很小的像素图,放大后实现炫彩背景效果. 使用 js canvas 随机生成小 ...

  6. Js控制iFrame切换加载网址

    <html> <head> <title>Js控制 iFrame 切换加载网址</title> </head> <body> & ...

  7. 基于Ascensor.js全屏切换页面插件

    今天给大家分享一款基于Ascensor.js全屏切换页面插件,这款实例 适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览 ...

  8. 用js实现选项卡切换效果

    这是要实现的效果图: 一.HTML页面布局 <!-- HTML页面布局 --><ul class="tab_menu"> <li class=&quo ...

  9. iOS-点击视图，视图背景颜色随机更改

    一.效果图 二.代码 - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the v ...

随机推荐

  1. Java基础系列 - JAVA集合ArrayList,Vector，HashMap,HashTable等使用

    package com.test4; import java.util.*; /** * JAVA集合ArrayList,Vector,HashMap,HashTable等使用 */ public c ...

  2. BZOJ1941Hide and Seek

    做KD_tree的入门题. 问题就是求出任意一个点距其他点的最大曼哈顿距离和最小曼哈顿距离差,然后对其取min即可. 这个东西就是KD_tree可以轻松解决的了. 下面总结一下做KD_tree(不带修 ...

  3. lucene正向索引（续）——域(Field)的元数据信息在.fnm里，在倒排表里，利用跳跃表，有利于大大提高搜索速度。

    4.1.2. 域(Field)的元数据信息(.fnm) 一个段(Segment)包含多个域,每个域都有一些元数据信息,保存在.fnm文件中,.fnm文件的格式如下: FNMVersion 是fnm文件 ...

  4. Flutter移动电商实战 --（49）详细页_Stack制作底部工具栏

    一直悬浮在最下面的 Stack层叠组件.里面用Row 可以横向布局 开始 stack如果想定位就要用position去定位. 修改return返回值的这个地方 大R刷新查看效果,可以看到固定的在左下角 ...

  5. keras输出预测值和真实值

    在使用keras搭建神经网络时,有时需要查看一下预测值和真是值的具体数值,然后可以进行一些其他的操作.这几天查阅了很多资料.好像没办法直接access到训练时的数据.所以我们可以通过回调函数,传入新的 ...

  6. initGanttView

    void TeslaManage::initGanttView() { if (vcGanttObject ==NULL) { vcGanttObject = new VCGantt(this); g ...

  7. osg::Camera 参数修改

    #ifdef _WIN32 #include <Windows.h> #endif // _WIN32 #include<iostream> #include <osgV ...

  8. 17flutter中的路由/命名路由/命名路由传值/无状态组件传值/有状态组件传值。

    main.dart import 'package:flutter/material.dart'; import 'package:flutter_demo/pages/Search.dart'; i ...

  9. 123457123456#0#-----com.twoapp.drawGame09--前拼后广--儿童画画游戏jiemei

    com.twoapp.drawGame09--前拼后广--儿童画画游戏jiemei

  10. 浏览器打印出一段unicode码，汉字无法正常显示

    处理办法:http://tool.chinaz.com/tools/unicode.aspx:unicode转中文就可以啦