百度前端技术学院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真是超赞,思路清晰,毫不拖沓,墙裂推荐给有需要的同学!)