JS-改变页面的颜色之变化核心-获取六位的随机数
前言：从JS-改变页面的颜色（一）、JS-改变页面的颜色（二）、JS-改变页面的颜色（三）三个简单的小白例，我们可以轻而易举的看到起变化的核心是——十六进制颜色值的获取方式，所以，我们这里总结一下获取六位随机数的方法都有那些。
代码比较简单就不一个个解释了，不过总体的思路这里要简单的记录一下：
一：需求，获取六位的数字随机数
二：思路，关键就是怎么获取变化的数字
1）通过前端的随机函数，来获取随机数，可以获取一位或者多位然后通过循环来拼接成六位，或者我们想要的任何位数
2）获取随机数，除了通过随机函数，就是通过获取当前时间的毫秒后六位了，不过这样前面三位雷同的比较多，可以选择使用随机函数和毫秒数组合的方式来组合
3）除了前端获取也可以通过发送请求到后台来获取，这样不同的后台语言有不同的方式，不过最总还是少不了使用随机函数的，只是使用的方式会有所变化
5）这里提供了获取六位随机数的思路，不过我们可以举一反三，获取任何的随机数，也可以通过一定范围内的随机和数组结合获取我们想要的任何随机字符的组合，这也是前端简单的验证码实现的一种思路
1.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Get Random Num</title>
<script>
function getRandomNum()
{
var randomNum = ""+Math.round(Math.random()*1000000);
while(randomNum.length<6){randomNum="0"+randomNum;}
console.info("randomNum is ========",randomNum);
return randomNum;
}
</script>
</head>
<body bgcolor="LightGoldenRodYellow" align="center">
<input type="button" value="Please click ME and F12 !" onclick="getRandomNum();"/>
</body>
</html>
2.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Get Random Num</title>
<script>
function getRandomNum()
{
var randomNum = ""+Math.floor(Math.random()*1000000);;
while(randomNum.length<6){randomNum="0"+randomNum;}
console.info("randomNum is ========",randomNum);
return randomNum;
}
</script>
</head>
<body bgcolor="LightGoldenRodYellow" align="center">
<input type="button" value="Please click ME and F12 !" onclick="getRandomNum();"/>
</body>
</html>
3.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Get Random Num</title>
<script>
function getRandomNum()
{
var randomNum = ""+Math.ceil(Math.random()*1000000);;
while(randomNum.length<6){randomNum="0"+randomNum;}
console.info("randomNum is ========",randomNum);
return randomNum;
}
</script>
</head>
<body bgcolor="LightGoldenRodYellow" align="center">
<input type="button" value="Please click ME and F12 !" onclick="getRandomNum();"/>
</body>
</html>
4.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Get Random Num</title>
<script>
function getRandomNum()
{
var randomNum = (Math.random()+"").substr(2,6);
console.info("randomNum is ========",randomNum);
return randomNum;
}
</script>
</head>
<body bgcolor="LightGoldenRodYellow" align="center">
<input type="button" value="Please click ME and F12 !" onclick="getRandomNum();"/>
</body>
</html>
5.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Get Random Num</title>
<script>
function getRandomNum()
{
var randomNum = (Math.random()+"").substring(2,8);
console.info("randomNum is ========",randomNum);
return randomNum;
}
</script>
</head>
<body bgcolor="LightGoldenRodYellow" align="center">
<input type="button" value="Please click ME and F12 !" onclick="getRandomNum();"/>
</body>
</html>
6.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Get Random Num</title>
<script>
function getRandomNum()
{
var randomNum = "";
for(var i=0;i<6;i++)
{
randomNum+=Math.floor(Math.random()*10);
}
console.info("randomNum is ========",randomNum);
return randomNum;
}
</script>
</head>
<body bgcolor="LightGoldenRodYellow" align="center">
<input type="button" value="Please click ME and F12 !" onclick="getRandomNum();"/>
</body>
</html>
7.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Get Random Num</title>
<script>
function getRandomNum()
{
var randomNum = (function(t){ var str =''; while (t--){ str += ~~(Math.random()*10) }; return str; })(6);
console.info("randomNum is ========",randomNum,~~(Math.random()*10));
return randomNum;
}
</script>
</head>
<body bgcolor="LightGoldenRodYellow" align="center">
<input type="button" value="Please click ME and F12 !" onclick="getRandomNum();"/>
</body>
</html>
8.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Get Random Num</title>
<script>
function getRandomNum()
{
var randomNum = new Date().getTime()+'';
randomNum = (Math.floor(Math.random() * 9) + 1).toString()+randomNum.substring(randomNum.length-5,randomNum.length);
console.info("randomNum is ========",randomNum);
return randomNum;
}
</script>
</head>
<body bgcolor="LightGoldenRodYellow" align="center">
<input type="button" value="Please click ME and F12 !" onclick="getRandomNum();"/>
</body>
</html>
9.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Get Random Num</title>
<script>
function getRandomNum()
{
var randomNumTemp = /\d{5}$/.exec(+new Date()+'');
var randomNum = (Math.floor(Math.random() * 9) + 1).toString()+randomNumTemp[0];
console.info("randomNum is ========",randomNum);
return randomNum;
}
</script>
</head>
<body bgcolor="LightGoldenRodYellow" align="center">
<input type="button" value="Please click ME and F12 !" onclick="getRandomNum();"/>
</body>
</html>
10.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Get Random Num</title>
<script>
function getRandomNum()
{
var randomNum = Math.random()*900000|0+100000;
console.info("randomNum is ========",randomNum);
return randomNum;
}
</script>
</head>
<body bgcolor="LightGoldenRodYellow" align="center">
<input type="button" value="Please click ME and F12 !" onclick="getRandomNum();"/>
</body>
</html>
11.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Get Random Num</title>
<script>
function getRandomNum()
{
var randomNum = Math.floor(Math.random()*900000 + 100000);
console.info("randomNum is ========",randomNum);
return randomNum;
}
</script>
</head>
<body bgcolor="LightGoldenRodYellow" align="center">
<input type="button" value="Please click ME and F12 !" onclick="getRandomNum();"/>
</body>
</html>
12.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Get Random Num</title>
<script>
function getRandomNum()
{
var randomNum = (''+Math.random()).match(/\d{6}/)[0]
console.info("randomNum is ========",randomNum);
return randomNum;
}
</script>
</head>
<body bgcolor="LightGoldenRodYellow" align="center">
<input type="button" value="Please click ME and F12 !" onclick="getRandomNum();"/>
</body>
</html>
13.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Get Random Num</title>
<script>
function getRandomNum()
{
var randomNum = (''+Math.random()).match(/[^0\.]\d{5}/)[0]
console.info("randomNum is ========",randomNum);
return randomNum;
}
</script>
</head>
<body bgcolor="LightGoldenRodYellow" align="center">
<input type="button" value="Please click ME and F12 !" onclick="getRandomNum();"/>
</body>
</html>
JS-改变页面的颜色之变化核心-获取六位的随机数的更多相关文章
- 用JS改变页面中b标签的样式啊 样式的等
用JS改变页面中b标签的样式啊 样式的等 ,实际上是在标签内加上样式 ,用媒体查询的话 ,不能生效 <!DOCTYPE html> <html lang="en&qu ...
- selenium java ，执行js改变页面
1.面对页面一些页面上的限制而导致某些选择按钮无法选中的问题 很多时候由于页面上的一些限制会导致我们无法无法正常用webdriver来实现我们手动的正常操作,这时候我们可以通过执行js来适当的改变页面 ...
- js 改变页面元素的内容
改变页面标签里的内容 (方法) innerText innerHTML (常用) 代码示例 <div></div> <p> 我是文字 <span>1 ...
- js监听url的hash变化和获取hash值
当浏览器浏览器的url进行变化时,浏览器默认是会去服务器将相应的资源给请求下来的,在不阻止默认行为的前提下,使用给url加锚点的方式(hash模式),让浏览器不跳转. window.addEventL ...
- JS-改变页面的颜色（一）
需求:点击页面的按钮,改变页面的颜色 思路:一先画出最简单的页面,二想办法获取页面的body节点,三想办法修改body节点的背景颜色属性,四通过一个方法获取随机的颜色值 简单的代码片段如下所示: &l ...
- JS-改变页面的颜色（二）
需求:点击页面的按钮,改变页面的颜色 思路:一先画出最简单的页面,二想办法获取页面的body节点,三想办法修改body节点的背景颜色属性,四通过一个方法获取随机的颜色值 和第一个例 ...
- JS-改变页面的颜色（三）
需求:点击页面的按钮,改变页面的颜色 思路:一先画出最简单的页面,二想办法获取页面的body节点,三想办法修改body节点的背景颜色属性,四通过一个方法获取随机的颜色值 和第二个例 ...
- js如何实现动态点击改变单元格颜色？
js如何实现动态点击改变单元格颜色? 一.总结 1.通过table的rows属性,遍历表格所有行,然后通过cells属性,遍历每一行中的单元格. 2.遍历的过程中,动态的为每一个单元格定义单击事件,改 ...
- JS改变input的value值不触发onchange事件解决方案 （转）
方法(一)(转载的网络资料) 需要了解的知识 首先,我们需要了解onchange和onpropertychange的不同: IE下,当一个HTML元素的属性改变的时候,都能通过 onprope ...
随机推荐
- xloader
[1],先看一下整个系统的结构(软件是灵魂,硬件是驱体,再强大的灵魂力若没有躯体终将是游魂野鬼,再强壮的驱体若没有灵魂终将是植物人) 结构 作用 备注 硬件 一切软件的载体 xloader 引导u ...
- 有关默认相机转VR相机
呃...15年开篇~ 去年想写一个有关默认相机转VR相机的脚本,当时没写完,今天不小心翻到并写完了,而且思路也和原来完全不一样了,增加了是否删除原相机与是否转换所选相机的选项. 由于国内VR版本比较混 ...
- 使用 Fluent API 配置/映射属性和类型(摘自微软Data Access and Storage)
使用 Fluent API 配置/映射属性和类型 使用实体框架 Code First 时,默认行为是使用一组 EF 中内嵌的约定将 POCO 类映射到表.但是,有时您无法或不想遵守这些约定,需要将实体 ...
- Struts2 之 对xwork的理解
对象的生命周期的管理是面向对象编程亘古不变的话题,从syntax的角度,面向对象的高级编程语言都是以“对象”为核心,而对象之间的继承关系.嵌套引用关系构成的对象树结构为我们进行对象级别的逻辑操作提供了 ...
- Oracle几个基础配置问题：ORA-12154: TNS: 无法解析指定的连接标识符、ORA-12514: TNS: 监听程序当前无法识别连接描述符中请求的服务、ORA-12516 TNS监听程序找不到符合协议堆栈要求的可用处理程序
问题1:ORA-12154: TNS: 无法解析指定的连接标识符 在一台服务器上部署了Oracle客户端,使用IP/SID的方式访问,老是报ORA-12154错误,而使用tnsnames访问却没有问题 ...
- 如何使用vmware-vdiskmanager增加磁盘空间
VMware Virtual Disk Manager Usage: vmware-vdiskmanager.exe OPTIONS <disk-name> | <mount-poi ...
- 打开页面自动打开QQ的javascript代码
今天浏览个网站,发现我的QQ突然自动启动了,起初还以为中病毒了,后来找了半天无果,反而发现了几个无需启动的系统服务进程,遂管之. 后来打开网站的页面的源代码,发现一段javascript脚本,才知道我 ...
- [Maven] - 安装与Eclipse搭建
Maven的具体参考书可以看:<Maven实战> 下载maven可以到:http://maven.apache.org/ Maven的eclipse基本使用可以在这里看到:http://w ...
- B 最熟悉的陌生人 (纪念当年就读的梅州市江南高级中学)
最熟悉的陌生人 作者:张慧桥 枪与玫瑰 我看了一下聊天室的名单,哈哈哈,我不禁喜出望外:蝶恋花那丫头片子挂在线上呢,真是天助我也.初时的担心一扫而光,我精神抖擞地喝下一大口咖啡,猛抽了三口烟,现在的我 ...
- 协程、异步IO
协程,又称微线程,纤程.英文名Coroutine,协程是一种用户态的轻量级线程. 协程拥有自己的寄存器上下文和栈.协程调度切换时,将寄存器上下文和栈保存到其他地方,在切回来的时候,恢复先前保存的寄存器 ...