首先你需要一个div

<div id="box"></div>

然后给这个div加入CSS属性

#box{width:500px;height:500px;border:1px solid red}

然后在JS代码:

var box=document.getElementById("box");
function fn(){
var a=parseInt(Math.random()*10);
var b=parseInt(Math.random()*10);
var c=parseInt(Math.random()*10);
var d=parseInt(Math.random()*10);
var e=parseInt(Math.random()*10);
var f=parseInt(Math.random()*10);
var g="#"+a+b+c+d+e+f;
box.style.background=g;
}
setInterval("fn()",1000);
这样就能实现简单的背景颜色随机改变
理论上每种颜色是由六位数字组成的
但是测试时函数里面只要a,b,c就可以实现
也就是这样:
function fn(){
var a=parseInt(Math.random()*10);
var b=parseInt(Math.random()*10);
var c=parseInt(Math.random()*10);
  var g="#"+a+b+c
}
setInterval("fn()",1000);
												

JS里面利用random()实现随机颜色更换的更多相关文章

  1. JS中取整以及随机颜色问题

    前言:感觉自己已经好久好久没有写博客了,最近都是在写在线笔记比较多.现在来到新公司了,昨天刚刚完成一个项目所以今天有空研究研究一下前端方面的技术.下午在看一个游戏代码的时候,发现了几个别人留下的不错的 ...

  2. Shell 示例:利用 $RANDOM 产生随机整数

    代码如下: #!/bin/bash # $RANDOM 在每次调用的时候,返回一个不同的随机整数 # 指定的范围是: 0 - 32767 MAXCOUNT=10 count=1 echo echo & ...

  3. JS多种方法实现随机颜色;

    JS随机颜色有很多地方要用到:比如大家看到很多标签连接都是五颜六色.实现随机颜色的方法有多种,下面来看看具体的实现代码: 方法一: var getRandomColor = function() { ...

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

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

  5. js随机生成验证码以及随机颜色

    Javascript通过Math.random()随机生成验证码. 代码如下: <!DOCTYPE html><html> <head> <meta char ...

  6. JS实现鼠标移入DIV随机变换颜色

    今天分享一个在 JavaScript中,实现一个鼠标移入可以随机变换颜色,本质就是js的随机数运用. 代码如下: <!DOCTYPE html> <html> <head ...

  7. 获取随机颜色js

    获取随机颜色方法一: function randomColor1() { var rand = Math.floor(Math.random() * 0xFFFFFF).toString(16); i ...

  8. JS一行代码,生成一个16进制随机颜色,简单粗暴。

    var color = '#'+ Math.random().toString(16).substr(-6); document.body.style.backgroundColor = color; ...

  9. echarts之词云随机颜色的配置

    echarts中的词云字体产生随机颜色,最主演的是要引入worldcloud.js,另外还要有jquery.js文件与echarts.js文件的引入,通过配置即可实现词云随机颜色的产生.下面为大家介绍 ...

随机推荐

  1. BaiduTemplate模板引擎使用示例附源码

    1.新建项目,asp.net 空Web应用程序 添加data,js,styles,templates文件夹,添加baiduTemplate.js,jquery.js,bootstrap.css 2.添 ...

  2. git学习:多人协作,标签管理

    多人协作: 查看远程库的信息, git remote 推送分支到远程库 git push origin master/dev 注意:master是主分支,时刻需要与远程同步 dev是开发分支,也需要与 ...

  3. asp.net mvc多条件+分页查询解决方案

    开发环境vs2010 css:bootstrap js:jquery bootstrap paginator 原先只是想做个mvc的分页,但是一般的数据展现都需要检索条件,而且是多个条件,所以就变成了 ...

  4. c# 变量,对象,静态类型,集合类的线程安全回顾

    1.变量的线程安全性与变量的作用域有关. 2.对象 对象是类型的实例 在创建对象时,会单独有内存区域存储对象的属性和方法.所以,一个类型的多个实例,在执行时,只要没有静态变量的参与,应该都是线程安全的 ...

  5. Windows平台分布式网站系统应用(转)

    概述 最近.NET的世界开始闹腾了,微软官方终于加入到了对.NET跨平台的支持,并且在不久的将来,我们在VS里面写的代码可能就可以通过Mono直接在Linux和Mac上运行.那么大家(开发者和企业)为 ...

  6. WGS84经纬度坐标与北京54坐标或者西安80坐标的关系

    一般来讲,GPS直接提供的坐标(B,L,H)是1984年世界大地坐标系(WordGeodetic System 1984即WGS-84)的坐标,其中B为纬度,L为经度,H为大地高即是到WGS-84椭球 ...

  7. MySQL MEM_ROOT详细讲解

    这篇文章会详细解说MySQL中使用非常广泛的MEM_ROOT的结构体,同时省去debug部分的信息,仅分析正常情况下,mysql中使用MEM_ROOT来做内存分配的部分. 在具体分析之前我们先例举在该 ...

  8. Shell中取得文件的最后修改时间

    stat -c %y file 取得修改日期 -,-,-

  9. c# 获取某日期所在周的第一天和最后一天

    using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace WyfC ...

  10. 慕课网-Java入门第一季-7-4 编程练习

    来源:http://www.imooc.com/code/1634 小伙伴们,请根据所学知识,参考注释,在代码编辑器中将代码补充完整.编写一个 Java 程序,实现输出学生年龄的最大值 要求: 1. ...