前端学习代码实例-JavaScript 生成随机数

分享一段非常强大的随机数生成功能代码实例,有需要的朋友可以做一下参考。

代码实例如下:

(function(){
  var charCodeIndex = [[48,57],[65,90],[97,122]];
  var charCodeArr = [];

  function getBetweenRound(min,max){
    return Math.floor(min+Math.random()*(max-min));
  };

  function getCharCode(){
    for(var index=0,len=3;index<len;index++){
      var thisArr = charCodeIndex[index];
      for(var j=thisArr[0],thisLen=thisArr[1];j<=thisLen;j++){
        charCodeArr.push(j);
      }
    }
  }

  function ranStr(slen){
    slen = slen || 20;
    charCodeArr.length<62 && getCharCode();

    var res = [];
    for(var i=0;i<slen;i++){
      var index = getBetweenRound(0,61);
      res.push(String.fromCharCode(charCodeArr[index]));
    }
    return res.join(‘‘);
  };
  this.ranStr = ranStr;
})();
console.log(this.ranStr(4));

web前端开发学习扣qun:731771211   详细教程分享

上面的代码实现了获取随机数的效果,下面介绍一下它的实现过程。

一.代码注释:

(1).(function(){})(),一个自执行的匿名函数。

(2).var charCodeIndex = [[48,57],[65,90],[97,122]],三个子数字分别表示ascii字符的区间,表示数字、大小写字母,感兴趣的朋友可以自己查阅ascii编码表,这里不多介绍。

(3).var charCodeArr = [],次数字用来存储ascii码。

(4).function getBetweenRound(min,max){

return Math.floor(min+Math.random()*(max-min));

},此方法实现了获取min到max之间数字的效果。

(5).function getCharCode(){

  for(var index=0,len=3;index<len;index++){

    var thisArr = charCodeIndex[index];

    for(var j=thisArr[0],thisLen=thisArr[1];j<=thisLen;j++){

      charCodeArr.push(j);

    }

  }

}通过循环的方式将ascii码写入数组中。

(6).function ranStr(slen){},次函数实现了产生随机数的效果,参数表示随机数的长度。

(7).slen = slen || 20,如果没有规定参数,那么默认随机数的长度是20。

(8).charCodeArr.length<62 && getCharCode(),判断数组是否已经存入ascii码,如果没有就执行函数存入,这个也能够防止,连续执行ranStr函数导致多次重复给数字压入ascii码效果。

(9).var res = [],此数组用来存储随机数结果的。

(10).for(var i=0;i<slen;i++){

var index = getBetweenRound(0,61);

res.push(String.fromCharCode(charCodeArr[index]));

},通过for循环获取随机数,其实也就是随机从数组中取元素。

(11).return res.join(‘‘),将数组中的元素连接起来。

(12).this.ranStr = ranStr,将随机数赋值给this.ranStr。

更多编程知识分享,关注v-x公众号id:mtbcxx

原文地址:https://blog.51cto.com/14284898/2386795

时间: 2024-12-12 17:26:11

前端学习代码实例-JavaScript 生成随机数的相关文章

前端学习代码实例-JavaScript点击按钮弹出层效果

强大的效果其实都是由一个个简单的功能组合而成的,下面介绍一下如何实现点击一个按钮弹出一个层的效果. 代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>web前端开发学习q群:73

前端学习代码实例-JavaScript文本循环变色效果

介绍一下如何实现一行文本实现一段文本内容能够滚动循环变色效果. 此效果可以有效的提高美观度,使用户的印象更加深刻,当然也就能够使网站更加能够留住用户. 代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> &

前端学习代码实例-JavaScript动态创建div并写入文本

介绍一下如何利用JavaScript动态创建div元素,然后在其中写入文本. 代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>web前端开发学习扣qun:731771211

前端学习代码实例-JavaScript阻止事件冒泡

任何现象都可能是双刃剑,有时候利用事件冒泡能够带来便利性,但是有时候也会带来不便. 下面通过带来实例介绍一下如何阻止事件冒泡. 代码实例如下: ] <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title&g

前端学习代码实例-JavaScript商城购物车价格自动计算功能

分享一段代码实例,它实现购物车价格自动计算功能. 代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>web前端开发学习q群:731771211 详细教程讲解</title&

前端学习代码实例-JavaScript 阻止击超链接的跳转

点击链接具有跳转效果,但是有时我们不需要这种效果. 下面就通过代码实例介绍一下如何实现此效果. 代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>web前端开发学习扣qun:731

前端学习代码实例-JavaScript 图片等比例缩放裁切详解

本文将通过代码实例详细介绍一下如何实现图片等比例缩放裁切效果. 图片有两种应用方式,一种作为子元素存在,一种是作为背景图片. 在每一种应用方式中,图片的等比例缩放又可以大致分为如下几种情况: (1).确保图片能够填充满元素,超出的部分被裁切或者隐藏. (2).确保图片的长或者宽填充满元素,超出的部分被裁切或者隐藏. 下面通过代码实例分别介绍一下上述列举的中可能,需要的朋友可以做一下参考. 一.作为背景图片: 通过CSS的background-image属性可以设置元素的背景图片效果. 下面就以如

前端学习代码实例-JavaScript 页面跳转效果

运用JavaScript,实现了在10秒之后跳转到指定页面. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>web前端开发学习q群:731771211 详细教程讲解</title>

前端学习实践笔记--JavaScript深入【1】

这一年中零零散散看过几本javascript的书,回过头看之前写过的javascript学习笔记,未免有点汗颜,突出“肤浅”二字,然越深入越觉得javascript的博大精深,有种只缘身在此山中的感觉,茫茫然而不得其要领,索性在一边写博文中,求得突破,乃至更上一层楼. 看过的书籍推荐: <javascript语言精粹> Douglas Crockford <javascript设计模式> Addy Osmani <javascript设计模式> Ross Harmes