I'm Donkey

倔倔死磕Javascript之开篇

Apr 27

Ting倔倔在前端 Javascript 2 Comments

倔倔这个名字不是白起的,完全源于本人性格中最大的特点:那就是倔!

最近各种刺激扑面而来,叫我怎能不好好学习?在坨坨同学的指导下 我开始了”又”一次的Javascript之旅~(之所以说”又”是因为07年自己买下了《Javascript高级程序设计》,现在想来真不知道当时自己怎么了….好在是本好书~银子没白花)

先做几个很简单的实例,把自己学习的兴趣提起来.这点很重要.

声明:本人可以说是0基础,所以初学JS的朋友也可以一起学习.高手们可以飘过,多多指导哈

实例一:图片浏览

实现效果:点击”Previous”和”Next” button实现连续几张图片的切换. 很简单吧~

第一步:HTML&CSS

这一步对各位来说应该并不难,不过既然元素少,又是做Demo用的,我们就对自己的要求放松些吧,我说的放松是对于浏览器兼容问题的放松.我们选择HTML5与CSS3.可以暂时不用过多管IE678.(但你可以下载IE9的preview版来看看,也无妨)

主要HTML代码如下:

	<input type="button" id="btn_previous" value="Previous"/>
	<input type="button"  id="btn_next" value="Next"/>
	<ul id="container">
		<li id="pic_1" class="current">
			<img src="../images/demo/pic_1.gif" title="NO.1" alt="NO.1"/>
			<p title="NO.1">NO.1</p>
		</li>
		<li id="pic_2">
			<img src="../images/demo/pic_2.gif" title="NO.2" alt="NO.2"/>
			<p title="NO.2">NO.2</p>
		</li>
		<li id="pic_3">
			<img src="../images/demo/pic_3.gif" title="NO.3" alt="NO.3"/>
			<p title="NO.3">NO.3</p>
		</li>
		<li id="pic_4">
			<img src="../images/demo/pic_4.gif" title="NO.4" alt="NO.4"/>
			<p title="NO.4">NO.4</p>
		</li>
		<li id="pic_5">
			<img src="../images/demo/pic_5.gif" title="NO.5" alt="NO.5"/>
			<p title="NO.5">NO.5</p>
		</li>
	</ul>

第二步:梳理思路

想想需要解决哪几个问题:

1. 怎么知道是显示当前图片的上一张还是下一张?
2. 如何替换当前图片?

好,先解决掉这两个问题事情就好办多了.

1. 我们需要将”向前”和”向后”分别用两个数值来代替,做为参数传给接下来我们要完成的函数,这里用(-1)和(1)来表示.
2. 知道了是向前还是向后之后 我们就要把当前图片隐藏起来,然后显示出它的上一张或者下一张图片.

Ok,那我们就开始吧~

第三步:编写代码

首先我们给函数起个名字,就叫 imgSlider.(也许并不贴切,但以后会改进功能).把要传给这个函数的值取名为n.所以简单写下来函数应该长这个样子:

function imgSlider(n) {

}

然后我们需要一个变量,这个变量用来存储当前显示的是第几张图片,我们先赋一个初始值给它,像这样.

var currentImg = 1;
function imgSlider(n) {

}

为什么要把这个赋值语句写在函数外面呢?(全局变量)因为函数要对这个值做处理,也就是说将来一旦触发了这个函数,currentImg这个值会改变,所以我们将它写在外面.

接下来我们需要得到网页中的几个对象,取得对象的方法是采用document.getElementById(“idname”):

var currentImg = 1;
function imgSlider(n) {
	var currentImgCon = document.getElementById("pic_"+ currentImg);
	var btn_previous = document.getElementById("btn_previous");
	var btn_next = document.getElementById("btn_next");
}

哈哈,现在就到了最关键的步骤了,到目前为至我们还没有用到传进来的参数呢,想想假设现在传进来的是(1),即用户要显示下一张图片的话,我们要做何处理呢?很简单,就是在当前图片基础上+1 显示下一张呗~

var currentImg = 1;
function imgSlider(n) {
	var currentImgCon = document.getElementById("pic_"+ currentImg);
	var btn_previous = document.getElementById("btn_previous");
	var btn_next = document.getElementById("btn_next");
	currentImg = currentImg + n;
	targetImgCon.setAttribute("class","current");
	targetImgCon.className = "current";
}

currentImg加了1后,我们根据currentImg的最新值通过document.getElementById()这个方法找到了我们要显示的那个图片,并且将得到的对象命名为targetImgCon,然后将current这个class加到这个对象上,那么第二张图片就显示出来了.可不要忘记在这之前要先将之前的图片隐藏起来,所以还要对代码要做以下修改

var currentImg = 1;
function imgSlider(n) {
	var currentImgCon = document.getElementById("pic_"+ currentImg);
	var btn_previous = document.getElementById("btn_previous");
	var btn_next = document.getElementById("btn_next");
	currentImgCon.setAttribute("class","");
	currentImgCon.className = "";
	currentImg = currentImg + n;
	var targetImgCon = document.getElementById("pic_"+ currentImg);
	targetImgCon.setAttribute("class","current");
	targetImgCon.className = "current";
}

到此为至主要功能实现了,但完整程度还差好多~.不信可以将事件加到两个button上,如下:

<input type="button" onclick="imgSlider(-1)" id="btn_previous" value="Previous" disabled="disabled"/>
<input type="button" onclick="imgSlider(1)" id="btn_next" value="Next"/>

那么我们还要做什么呢?目前页面中只有5张图片,我们不希望用户一直点击向前向后,那样currentImg数值会越来越大,而执行过程中又取不到数值大于5的图片,会报错.所以现在我们要对临界值做一个判断处理.我们希望只有在1-5这个范围内再做我们以上的那些事情.

var currentImg = 1;
function imgSlider(n) {
	var currentImgCon = document.getElementById("pic_"+ currentImg);
	var btn_previous = document.getElementById("btn_previous");
	var btn_next = document.getElementById("btn_next");
	currentImgCon.setAttribute("class","");
	currentImgCon.className = "";
	currentImg = currentImg + n;
	if (currentImg > 1 || currentImg < 5 ) {
		var targetImgCon = document.getElementById("pic_"+ currentImg);
		targetImgCon.setAttribute("class","current");
		targetImgCon.className = "current";
	}
}

可运行一下,发现到第5张时候再点”Next”就什么都显示不出来了,再点”Previous”也没反应了,为什么呢?我们用input来跟踪下currentImg的数值变化:
在HTML中添加一个input:

<input type="text" value="" id="logger"/>

JavaScript做如下修改:

document.getElementById("logger").value = currentImg;

刷新下页面,点到最后发现currentImg的值是6,超出了1-5这个范围,自然执行不了我们if条件里的语句了.怎么解决这个问题呢,其实很简单,当页面当前显示的是第一张图片时我们就将”Previous”button 屏蔽掉,同理,当页面当前显示的是第5张,也就是最后一张的时候屏蔽掉”Next”button,事情就解决了.其它情况下两个button正常显示~~哈哈

初始的时候就要先将”Previous” button 置为disabled

<input type="button" onclick="imgSlider(-1)" id="btn_previous" value="Previous" disabled="disabled"/>

JavaScript添加如下代码:

if(currentImg == 1) {
	btn_previous.setAttribute("disabled","disabled");
}else {
	btn_previous.removeAttribute("disabled");
}

if(currentImg == 5) {
	btn_next.setAttribute("disabled","disabled");
}else {
	btn_next.removeAttribute("disabled");
}

大功告成~~最终效果

知识点:

1. CSS3 渐变http://www.qianduan.net/understand-the-css3-gradient.html
2. CSS Selector
3. CSS 缩写http://www.qianduan.net/css-font-shorthand-attribute-handbook.html
4. input disabled属性
5. function定义
6. 全局变量定义/初始化
7. document.getElementById(“idName”)
8. setAttribute(“attributeName”,”attributeValue”)
9. removeAttribute(“attributeName”)
10. if else

下期预告:放大镜~~~