Puock主题已经正式发售,一款颜值在线的多功能WordPress主题,赶快戳我来看看吧

JavaScript之基础语法案例展示

2,451次阅读
5条评论

前言

在之前的学习中,都是学习的Jquery,当然在之前的开发中,也学习了JS,其中包括JS的一些比较有用的函数,例如Trim等等,以及Js&Jq的Ajax,另外也学习了Pjax。

这周回到了学校老师讲了一下JavaScript的基础入门,在之前的选择器等等一直都是用的Jq的,原因大家都知道,Js的选择器很不是方便。昨天写了一个简单的Js的小小案例,今天贴上来,不喜勿喷 JavaScript之基础语法案例展示

代码

<head>
<meta charset="UTF-8">
<title>JavaScript-Example</title>
<style type="text/css">
	.btn{
		background-color: #03A4FA;
		border: none;
		color: #FFFFFF;
		min-width: 100px;
		min-height: 30px;
		border: 1px solid #eee;
		cursor:pointer;
	}
	#img1{
		width: 500px;
		height: 300px;
		border: 1px solid #EEEEEE;
	}
</style>
<script type="text/javascript">
window.onload = function(){
	/*
	 * Licoy's Blog
	 */
	var numMath = [1,1,1,1]; //用数组来进行存储变换标记
	var divObj = document.getElementById("container");
	var btnObj = document.getElementsByClassName("btn");
	/*
	 * 当[replace替换]按钮被单击时候发生的事件;
	 */
	btnObj[0].onclick = function(){
		var imgObj = document.getElementById("img1");
		var newImg = document.createElement("img");
		if(numMath[0]<5){
			newImg.src = "images/"+(numMath[0]+1)+".jpg";
			newImg.id = "img1";
			divObj.replaceChild(newImg,imgObj);
			numMath[0]++;
			if(numMath[0]==5){
				this.setAttribute("value","replace替换【完】");
			}else{
				this.setAttribute("value","替换为第"+numMath[0]+"张图片");
			}
		}
	}
	/*
	 * 当[attribute替换]按钮被单击时候发生的事件;
	 */
	btnObj[1].onclick = function(){
		var imgObj = document.getElementById("img1");
		if(numMath[1]<5){
			imgObj.setAttribute("src","images/"+(numMath[1]+1)+".jpg");
			numMath[1]++;
			if(numMath[1]==5){
				this.setAttribute("value","attribute替换【完】");
			}else{
				this.setAttribute("value","替换为第"+numMath[1]+"张图片");
			}
		}
	}
	/*
	 * 注意:Img对象不可以在外部进行选择获取,若在外部进行获取之后
	 * 		,在切换了一次图片之后,所获取的对象仍继续为上次
	 *		之后的对象,这样会导致[放大]&[缩小]按钮无法使用。
	 */
	//------------------------------------End Notice------------------------------------
	/*
	 * 当[放大]按钮被单击时候发生的事件;
	 */
	btnObj[2].onclick = function(){
		var imgObj = document.getElementById("img1");
		var width = imgObj.width;
		var height = imgObj.height;
		imgObj.style.width = width+50+"px";
		imgObj.style.height = height+50+"px";
		this.setAttribute("value","继续放大~");
	}
	/*
	 * 当[缩小]按钮被单击时候发生的事件;
	 */
	btnObj[3].onclick = function(){
		var imgObj = document.getElementById("img1");
		var width = imgObj.width;
		var height = imgObj.height;
		imgObj.style.width = width-50+"px";
		imgObj.style.height = height-50+"px";
		this.setAttribute("value","追赶缩小~");
	}
}
</script>
</head>
<body>
<center>
	<input type="button" class="btn" value="replace替换"/>
	<input type="button" class="btn" value="attribute替换" />
	<input type="button" class="btn" value="放大" />
	<input type="button" class="btn" value="缩小" />
</center>
<hr />
<div id="container">
	<img src="images/1.jpg" id="img1">
</div>
</body>
如果要测试以上代码的话在这个文件的同级目录创建一个images文件夹,里面存放5张图片,分别是1.jpg~5.jpg就OK了

后记

正如我的老师所说的,在实际的开发中,把Jq和Js混合来用,你的开发效率会得到大大的提升。 JavaScript之基础语法案例展示

11
憧憬Licoy
版权声明:本站原创文章,由憧憬Licoy于2016年09月04日发表,共计3180字。
转载提示:除特殊说明外本站文章皆由CC-4.0协议发布,转载请注明出处。
评论(5条评论)
Loading...
业余草 评论达人LV.1
2017-03-14 11:07:45 回复

每日签到,生活更精彩 ~:2017-03-14 11:7:12
内容不错!看起来高大上!

奶茶动漫 评论达人LV.1
2017-01-02 19:57:36 回复

憧憬兄弟的博客很漂亮值得我学习

爱眼博客 评论达人LV.1
2016-09-06 22:56:56 回复

看不懂代码