2017.11.24——学习笔记(一)【数字雨及数组分…

2018-06-24 00:53:43来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

【以下作品非原创,仅学习用】


<style>
  html,body{ width: 100%;height: 100%;overflow: hidden; }
</style>
</head>
<body>
  <canvas id="cav"></canvas>
<script>

var cav = document.getElementById('cav');
var ctx = cav.getContext('2d');
var W = window.innerWidth;
var H = window.innerHeight;
console.log(window.innerHeight);
console.log(document.body.clientWidth);
cav.width = W;
cav.height = H;
var fontsize = 16;
var columns = Math.ceil(W/fontsize);
var drops = [];
var texts = "0123456789".split("");//生成一个字符串数组texts = ["0","1","2","3","4",......]
for(var i=0;i<columns;i++){
  drops[i]=0;
  //drops[i]是数字雨坠落的总列数
  //直接给drops数组创建了columns个对象不过各个对象都是零.
  console.log(drops[i]);
}

function run(){
  ctx.fillStyle = 'rgba(0,0,0,0.05)';
  ctx.fillRect(0,0,W,H);
  ctx.fillStyle = "#0f0";
  ctx.font = fontsize + "px Arial";//设置字体大小和字体
  for(var i = 0;i<columns;i++){
    var text =[Math.floor(Math.random()*texts.length)];
    //text是要绘画的数字
    //Math.random()返回介于0~1之间的一个随机数
    ctx.fillText(text,i*fontsize,drops[i]*fontsize);
    if(drops[i]*fontsize>H||Math.random()>0.95){
    //如果即将超出屏幕或是字符的随机数大于0.95,让这个列消失.
      drops[i]=0;
    }
    drops[i]++; 
}

}
setInterval(run,30);

 

//1.设置画布基础设置
//2.读取窗口宽高
//3.让画布宽高等于窗口宽高
//4.定义变量fontsize = 16;用途有2,1是用窗口宽度/fontsize来数字雨的列数.
//5.定义数组drops,这是数字雨的列.
//6.创建字符串数组texts,包含需要在画布中绘画出来的数字
//7.依照column的数值遍历出数字雨的列数,塞进drops数组里,让列数们的初始值等于0;

//8.绘出底色,因为是用定时器不停地绘制出来,所以透明度调低,营造出跳出来的数字渐渐消失的景象(事实上是被每30毫秒绘出来的底色不停地覆盖)
//8.5遍历出drops[i]--这个数组里,的每一个元素,都指索引所对应的那个列里,目前包含的数字的数目.
//9.用fontsize设置字体大小,设置字体.
//10.事实上每30毫秒每一列同时出现一个数字,所以又以列数遍历生成每列一个随机数字--text =[Math.floor(Math.random()*texts.length)];
//random的区间在0~1,texts.length=10,然后四舍五入变为整数,也就是会生成0~9的数字
//11.然后随机找个坐标为(x = i*fontsize,y = drops[i]*fontsize)的位置画出来.
//12.判定:1.如果drops[i].fontsize即将超出现有窗口的高度H,让这个列的数目为0,它将从0*fontsize的位置重新绘制数字(也就是从头开始嘛); 2.如果随机数即将大于0.95(也就是会算出text=10),让它如上述一样从头开始.

 

array.slice( start,end )--数组
  该方法是对数组进行部分截取,并返回一个数组副本
   start : 截取的开始数组索引
  end : 你要取得最后一个数组元素的索引加上1
  截到的数组的索引为: end-1
  *原数组不改变*
<script>
  var a = [1,2,3,4,5,6];
  var b = a.slice(3);//如果不传入end,则会从start截到数组尾部
  var c = a.slice(2,4);//截到a[2]-a[3],
  console.log(c);

  var d = a.slice(-1);//输出b = [a[5]];如果两个参数任何一个是负数,array.length会和它们相加,试图让他们成为非负数.
  //当只传入一个负数时,length会与参数相加,然后由此作为索引截取
  console.log(d)

  var e = a.slice(-6);
  //当只传入一个参数,是负数时,并且参数绝大值大于数组length,会截取整个数组.因为参数+length会小于0嘛,索引小于0,就按0开始截罗
  console.log(e)

  var f = a.slice(-4,-1);
  //当传入两个其中有负的参数时,length也会先与负数相加后,再截取
  //一切都按照与length相加后剩余的数做索引为准,end若为负相加之后还是要-1

  console.log(f)

  var g = b.slice(6);//当传入一个参数,大于等于length时,返回一个空数组
  console.log(g)
</script>

string.slice( start,end )--字符串
  slice方法复制string的一部分来构造一个新的字符串,用法与参数均和数组的slice方法一样,end参数等于你要取的最后一个字符的位置值加上1
  字符串中空格也占一个索引

<script>
{
var a = "once upon a time";
var b = a.slice(-12,-9);
console.log(b)
console.log(b.length)
}
</script>

array.splice( start, deleteCount, item )
  splice从array中移除一个或多个数组,并用新的item替换它们,参数start是从数组array中移除元素的开始位置,参数deleteCount是要移除的元素的个数,如果有额外的参数,那么item会插入到被移出元素的位置上,它返回一个包含被移除元素的数组。

  原数组中不再包含被移除掉的元素

  d = 在c数组里移除的c[2],c[3], 后面的item参数不会包在d数组里,二是被插进了c数组里原本c[2]的位置,item作用于被移除元素的原数组。
<script>
{
  var a = ['a','b','c',1,2,3];
  var b = a.splice(2,2);
  console.log(a)
  console.log(b)
  var c = ['a','b','c',1,2,3,{f:9}];
  var d = c.splice(2,2,function(){ var i=baby });
  console.log(c);
  console.log(d);

//d = 在c数组里移除的c[2],c[3], 后面的item参数不会包在d数组里,二是被插进了c数组里原本c[2]的位置,item作用于被移除元素的原数组
}
</script>


string.split( separator,limit )----字符串
  split可以把这个string分割成片段来创建一个字符串数组.可选参数limit可以限制被分割的片段数量.separator可以是一个字符串或一个正则表达式.如果separator是一个空字符,会返回一个单字符的数组。
  split依照separator ,来寻找原字符串中的是否包含separator,以separator作为分隔符来分割字符串变为数组元素,字符串中作为separator的字符会消失。  
  一旦使用了split,返回的对象会自动变为一个数组。
  假如在原字符串中搜索不到separator,就会返回包含一整个字符串做一个元素的数组。

   当separator是一个空格时:" ",就会把一个句子分成一个个单词。

<script>
{
  var a = "123456";
  var b = a.split("",3);
  console.log(a)
  console.log(b)
  var a = "1$2,3*4,5,6,function(){}";
  var c = a.split(",");
  console.log(c)
  var d = a.split(3);
  console.log(d)
  var e = "once upon a time , there's a little prince";
  var f = e.split(/\s+/);
  console.log(f)
}
</script>

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:面向对象与原型2

下一篇:js插件实现一键复制功能