百度前端技术学院task0002的笔记。

练习1

题目：

一个多行文本输入框，一个按钮，用户在输入框中输入兴趣爱好，允许用换行、空格（全角/半角）、逗号（全角/半角）、顿号、分号来作为不同爱好的分隔。输入之后点击按钮，每一个爱好输出成为一个checkbox，爱好内容作为checkbox的label。爱好数量大于0小于11，否则给出提示。

思路：

得到输入，利用str.split(seperator,limit)方法将字符串分割为数组，seperator 可以是字符串或正则表达式，limit是返回数组长度的最大值，可以不填。 举个栗子：

var str="吃饭、睡觉、打豆豆";
console.log(str.split("、"));

得到:["吃饭", "睡觉", "打豆豆"]

对数组进行处理。去掉空的和重复的

function unique(array){
  var newarr = [];
  for(var i = 0; i < array.length; i++){
    if(newarr.indexOf(array[i]) == -1 && array[i] != ""){
    newarr.push(array[i]);
    }
  }
  return newarr;
}

create一个input标签:var inp=document.createElement("tag");设定type为checkbox:inp.type="checkbox";再create一个文本节点:var text=document.createTextNode(),再添加一个换行标签。再把这个三个元素用appendChild()方法分别添加到form中。

每次点击按钮时要把上一次的结果删除。先用hasChildNodes()方法判断form中是否有子元素。如果有就清空。

if(result.hasChildNodes()){
  result.innerHTML = "";
}

demo 源码

练习2

题目：

一个输入框，一个按钮，用户按照特定的格式YYYY-MM-DD输入年月日，点击按钮后，计算当前距离输入的日期有多少时间差，每秒刷新一次。

思路：

点击按钮=>取得输入的字符串=>对字符串进行处理=>判断格式是否正确=>如果错误，给出提示=>如果正确，得到要计算的目标时间desDate,对这个时间进行每隔一秒的倒计时。

var btn = document.getElementById('btn');
var inp;
var dateArr;
var timer; 

btn.onclick = function(){ 
  if(timer){
    clearInterval(timer);
  }
  inp = document.getElementById('inp').value;            
  dateArr = inp.split('-');
  var reg = /\d{4}-\d{2}-\d{2}/;
  var result = document.getElementById('result');
  if(reg.test(inp)){
    timer = setInterval('counter()',1000);
  } 
  else{           
    result.innerHTML = "(＠_＠)格式没有输入正确呢！";           
  }
}

function counter(){            
  var desDate = new Date(dateArr[0],dateArr[1] - 1,dateArr[2],00,00,00);//输入的时间
  var curDate = new Date();//起始点
  var time = Math.round((desDate - curDate)/1000);
  var days= Math.floor(time/(24*3600));
  var hours = Math.floor(time%(24*3600)/3600);
  var minutes = Math.floor(time%(24*3600)%3600/60)
  var seconds = time%60;
  hours = format(hours);        
  minutes = format(minutes);  
  seconds = format(seconds);
  var str = '距离' + dateArr[0] + '年' + dateArr[1] + '月' + dateArr[2] + '日还有' + days + '天' +
             hours + '小时' + minutes + '分' + seconds + '秒';          
  result.innerHTML = str;
}
function format(number){
  if(number < 10) {
    number = '0' + number;
  }
  return number;
}

需要注意的点：

  1. 月份是从0开始算的。

  2. 每次点击时要把上一次的计时清除，要不然会出现: 用户输入一个格式正确的值=>程序判断出格式正确=>计时=>用户再输入一个格式错误的值=>程序判断出格式错误=>显示提示信息=>继续对一个格式错误的值进行计时(因为上一次的setInteval(‘counter()’,1000) set之后并没有clear)

2016.01.16更新：改掉了每隔一秒都获取输入值的bug，之前无法解决bug的原因是:误以为函数A调用函数B则函数B可以直接使用函数A中定义的变量。 事实是如果B要使用A中的变量，可以让A以参数的形式把变量传给B，或者把这个变量定义为全局变量。

练习3

题目：

写一个轮播图，效果就和市面上的轮播图差不多，可以不用写左右箭头。轮播的顺序（正序、逆序）、是否循环、间隔时长可配置。

思路：

之前也仔细研究过一次轮播图的原理，轮到自己写，还是写不出来ORZ，然后又去看了一下慕课网上的课程。看完又撸了一遍代码。

学到的一点就是：不需要一下子把所有的逻辑过程都想到，一点点来，想实现什么就先写一个函数。然后不断的增加功能，最后修整一下，该删的删，该加的加，该抽离的抽离。

轮播图的实现原理： 滚动就是图片列表的left值在改变，而无限滚动，就是当滚动到最后一张的时候，用户点击下一张，我们就把第一张给他看，把left值改到第一张的left值就好。这样想，要播几张html里放几张就好。为什么要像下面这样在前后各增加一张呢？

<div class="list" id="list" style="left: -600px">
  <img src="img/5.jpg">//助攻B
  <img src="img/1.jpg">//A
  <img src="img/2.jpg">
  <img src="img/3.jpg">
  <img src="img/4.jpg">
  <img src="img/5.jpg">//B
  <img src="img/1.jpg">//助攻A
</div>

事实是： 如果你想实现的是瞬间切换，而不是慢慢的从第一张到下一张，以上面为例，就只要写img从1到5，但如果你要的是从一张到另一张有一个平滑过渡，就要增加前后助攻了，最后一个<img src="img/1.jpg">，它就是助攻，当图片展示到B的时候，让它和它前面的图片一样，平滑的过渡到下一张，也就是助攻A，然后你看到助攻A上场了，这个时候我就瞬间把镜头切换到A，这个移动你是看不出来的，第一，因为我是瞬间，第二，因为A和和助攻A是长一样的。所以在你看到的是5=>1=>2,而实际上呢是5=>1的助攻=>1=>2 。

理解了上面的问题之后就可以愉快地搬砖啦：demo 源码

容易忘记的细节问题:

  1. 动画执行过程中，要让点击按钮调用动画无效。所以要加一个全局变量，var switching=false;然后在动画函数开头将其设为true，动画执行完后设为false。并在点击按钮时判断一下这个变量。

  2. list.style.left得到的是带“px”的字符串，在进行比较前要将其转化为纯number，用parseInt()方法。

  3. 元素自带的属性可以通过“.”获取，比如“id”,“class”,“value”等是自带属性，而自定义的属性要通过getAttribute()方法获取。在轮播图中我们为小按钮自定义了index属性，<span index="2"></span>得到的属性值是字符“2”，还是要用parseInt()将其变为number。

2016.01.15更新：完成最后一条可配置的要求。（这两天看了慕课网上@liuyubobobo老师讲的canvas绘图。顺带学到了关于函数复用的知识。就回来把这个坑填了。PS：老师讲的canvas真是超赞，思路清晰，毫不拖沓，墙裂推荐给有需要的同学！）