javascript中随机数一些实例整理-自学php网

javascript中随机数一些实例整理

来源：自学PHP网时间：2014-09-19 14:48 作者：阅读:次

[导读] 下面给大家利用随机数功能来做的几个常用的实例，这里包括有:产生随机颜色值、随机两个数区间的数、随机数方法。...

JS随机数方法

以下方法适用于隐性的窗口：Iframe页面、手机浏览器等。

方法：获取当前页面URL，在URL后加上随机数后加载。可强制刷新当前页面。

缺点：因为加载的一个新的URL，会产生‘历史记录’，浏览器可返回看上一个页面（实际为同一个页面）。

代码如下

复制代码

var url=''; // 根据需要获取,JS,PHP,ASP等;
function RandomNumber(){
//获取随机数
    var now=new Date();
    var number = now.getSeconds() +(now.getMilliseconds()%43)*7/1.131412567;
    if( number ==0){
        number = now.getFullYear() + (now.getMilliseconds()%1.24377)*7/1.131412567;
    }
    return number;
}
window.location.href=url+'&number='+RandomNumber();

// 注意,这里的分界符 & 需根据实际变量 url 中使用的符号;

随机数,随机两个数区间的数

代码如下	复制代码
/* * 说明:取任意值开始至任意值的随机整数 * 参数: under:起始值 over: 终止值 / function fRandomBy(under, over){ switch(arguments.length){ case 1: return parseInt(Math.random()under+1); case 2: return parseInt(Math.random()*(over-under+1) + under); default: return 0; } }

一组自己弄出来的漂亮的颜色数组，可加上面的方法，产生随机颜色：

代码如下

复制代码

/*
* 说明:根据随机数区随机颜色,必须先定义一个存有颜色值的全局数组变量
* 参数:
      num:随机数
*/
var colorArr=['#FF6666','#D366FF','#FF8166','#6672FF','#FF667F','#9B66FF','#FF66D8','#FF6675','#66B2FF','#FF8E66','#FF66F9','#FF8B66','#FF7766','#FF66C6','#FFC666','#6866FF','#FF667C','#FF7566','#FF66BC','#6666FF','#6696FF','#FF9666','#66DDFF','#669DFF','#CE66FF','#66C6FF','#FFAD66','#BA66FF','#8966FF','#E266FF','#F466FF','#FF66BE','#36F08B','#66A3FF','#F166FF','#66BAFF','#8E66FF','#FF6689','#66AAFF','#C966FF','#66A0FF','#8766FF','#FA558B','#66B7FF','#ED66FF'];

function randomColor(num){
    return colorArr[num];
}

var color=randomColor(fRandomBy(0, 30)); // 得到的颜色

产生随机颜色值

代码如下

复制代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>刷新试试-随机颜色实践</title>
<style type="text/css">
.div {width:100px; height:100px; float:left;}
</style>
</head>

<body>
<div class="div"></div>
<div class="div"></div>
<div class="div"></div>
<div class="div"></div>
<div class="div"></div>
<div class="div"></div>

<script type="text/javascript">
window.onload=function(){
    var obj=document.getElementsByClassName('div');
    for(var i=0;i<obj.length;i++){
        obj[i].style.backgroundColor=hsl2color([radomFuc(360), 100, 70])
    }
}

function radomFuc($value) { //取随机数
    return parseInt($value * Math.random());
}

function hsl2color(hsl) { //HSL颜色算法
    if (hsl[0] > 360 || hsl[0] < 0 || hsl[1] > 100 || hsl[1] < 0 || hsl[2] > 100 || hsl[2] < 0) return "#000000";
    var rgb = [0, 0, 0];
    if (hsl[0] <= 60) {
        rgb[0] = 255;
        rgb[1] = Math.floor(255 / 60 * hsl[0]);
    } else if (hsl[0] <= 120) {
        rgb[0] = Math.floor(255 - (255 / 60) * (hsl[0] - 60));
        rgb[1] = 255;
    } else if (hsl[0] <= 180) {
        rgb[1] = 255;
        rgb[2] = Math.floor((255 / 60) * (hsl[0] - 120));
    } else if (hsl[0] <= 240) {
        rgb[1] = Math.floor(255 - (255 / 60) * (hsl[0] - 180));
        rgb[2] = 255;
    } else if (hsl[0] <= 300) {
        rgb[0] = Math.floor((255 / 60) * (hsl[0] - 240));
        rgb[2] = 255;
    } else if (hsl[0] <= 360) {
        rgb[0] = 255;
        rgb[2] = Math.floor(255 - (255 / 60) * (hsl[0] - 300));
    }
    var sat = Math.abs((hsl[1] - 100) / 100);
    rgb[0] = Math.floor(rgb[0] - (rgb[0] - 128) * sat);
    rgb[1] = Math.floor(rgb[1] - (rgb[1] - 128) * sat);
    rgb[2] = Math.floor(rgb[2] - (rgb[2] - 128) * sat);
    var lum = (hsl[2] - 50) / 50;
    if (lum > 0) {
        rgb[0] = Math.floor(rgb[0] + (255 - rgb[0]) * lum);
        rgb[1] = Math.floor(rgb[1] + (255 - rgb[1]) * lum);
        rgb[2] = Math.floor(rgb[2] + (255 - rgb[2]) * lum);
    } else if (lum < 0) {
        rgb[0] = Math.floor(rgb[0] + rgb[0] * lum);
        rgb[1] = Math.floor(rgb[1] + rgb[1] * lum);
        rgb[2] = Math.floor(rgb[2] + rgb[2] * lum);
    }
    return "#" + (0x1000000 + rgb[0] * 0x010000 + rgb[1] * 0x000100 + rgb[2]).toString(16).substring(1);
}
</script>
</body>
</html>

javascript中ajax请求方式(GET与POST)状态值说明

js控制按钮在点击后是否可用实例

子栏目

javascript中随机数一些实例整理

最新评论

添加评论

更多文章推荐

添加评论