JS里面利用random()实现随机颜色更换
首先你需要一个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()实现随机颜色更换的更多相关文章
- JS中取整以及随机颜色问题
前言:感觉自己已经好久好久没有写博客了,最近都是在写在线笔记比较多.现在来到新公司了,昨天刚刚完成一个项目所以今天有空研究研究一下前端方面的技术.下午在看一个游戏代码的时候,发现了几个别人留下的不错的 ...
- Shell 示例:利用 $RANDOM 产生随机整数
代码如下: #!/bin/bash # $RANDOM 在每次调用的时候,返回一个不同的随机整数 # 指定的范围是: 0 - 32767 MAXCOUNT=10 count=1 echo echo & ...
- JS多种方法实现随机颜色;
JS随机颜色有很多地方要用到:比如大家看到很多标签连接都是五颜六色.实现随机颜色的方法有多种,下面来看看具体的实现代码: 方法一: var getRandomColor = function() { ...
- JS实现随机颜色的3种方法与颜色格式的转化
JS实现随机颜色的3种方法与颜色格式的转化 随机颜色和颜色格式是我们在开发中经常要用到的一个小功能,网上相关的资料也很多,想着有必要总结一下自己的经验.所以这篇文章主要介绍了JS实现随机颜色的3种 ...
- js随机生成验证码以及随机颜色
Javascript通过Math.random()随机生成验证码. 代码如下: <!DOCTYPE html><html> <head> <meta char ...
- JS实现鼠标移入DIV随机变换颜色
今天分享一个在 JavaScript中,实现一个鼠标移入可以随机变换颜色,本质就是js的随机数运用. 代码如下: <!DOCTYPE html> <html> <head ...
- 获取随机颜色js
获取随机颜色方法一: function randomColor1() { var rand = Math.floor(Math.random() * 0xFFFFFF).toString(16); i ...
- JS一行代码,生成一个16进制随机颜色,简单粗暴。
var color = '#'+ Math.random().toString(16).substr(-6); document.body.style.backgroundColor = color; ...
- echarts之词云随机颜色的配置
echarts中的词云字体产生随机颜色,最主演的是要引入worldcloud.js,另外还要有jquery.js文件与echarts.js文件的引入,通过配置即可实现词云随机颜色的产生.下面为大家介绍 ...
随机推荐
- GBDT算法原理深入解析
GBDT算法原理深入解析 标签: 机器学习 集成学习 GBM GBDT XGBoost 梯度提升(Gradient boosting)是一种用于回归.分类和排序任务的机器学习技术,属于Boosting ...
- CSS详解
Web前端开发css基础样式总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-255 ...
- ubuntu 彻底卸载软件
找到此软件名称,然后sudo apt-get purge ......(点点为为程序名称),purge参数为彻底删除文件,然后sudo apt-get autoremove,sudo apt-get ...
- Win7系统安装好Axure点击运行报.NET Framework4.0未安装的解决办法
1:问题 由于工作需要,需要研究一下Axure原型设计软件的使用方式,在公司的电脑上成功安装了从同事那里拿来的Axure7.0软件,能够正确运行没有任何问题,在自己的电脑上安装的也非常顺利,不过运 ...
- 自己写的基于bootstrap风格的弹框插件
自己写的一款基于bootstrap风格的弹框插件,暂时只有确认框.提示框.后续功能扩展.bug修改再更新. ;(function($){ //默认参数 var PARAMS; var DEFAULTP ...
- .NET 平台下的插件化开发内核(Rabbit Kernel)-转
什么是RabbitHub? RabbitHub 是专门针对 .NET 平台所设计.研发的一套相对完整的插件开发框架,它是由一个内核两大框架多个组件及一系列的开发时支持而构成. RabbitHub 架构 ...
- android-studio设置代理
/home/{user}/.gradle/gradle.properties org.gradle.jvmargs=-Xmx1536m -DsocksProxyHost=127.0.0.1 -Dsoc ...
- Java 反射 getDeclareFields getModifiers setAccessible(true)
示例代码: public static Map<String, Object> dtoToMap(Object obj, String pre, String las ...
- Python 之 for循环中的lambda
第一种 f = [lambda x: x*i for i in range(4)] (如果将x换成i,调用时候就不用传参数,结果都为3) 对于上面的表达式,调用结果: >>> f ...
- JavaScript的学习2
1. a.字符串运算符 符号 功能 + 字符串连接 += 将左边的值加上右边的值然后再赋值给左边的变量 b.比较运算符 运算符 含义 说明 > 大于 M>N,当M大于N时,返回TRUE ...