Blogger Information
Blog 20
fans 0
comment 0
visits 39945
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
JavaScript基础第三节/函数的调用、参数函数、匿名函数、构造函数、DOM、轮播、tab、闭包
Time
Original
1057 people have browsed it

实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JavaScript基础第三节</title>
		<script>
			//函数的调用
			function lastime(){
				document.write('大家好我是Time');
			}
			lastime();
			document.write('<br />');
			//有参数的函数
			function lastie(a,b){
				document.write(a*b);
			}
			lastie(10,2);
			document.write('<br />')
			//第二种写法
			var las= function (x,y){return x+y};
			document.write(las(1,3));
			//函数作为方法调用 this指向的全局对象window
		
			document.write('<br />');
			var lasta = {
					firstName:'Time',
					lastName: 'lasy',
					piyinName: function () {
					   	return this.firstName + this.lastName;
					}
			}
				document.write(lasta.piyinName());
			//闭包
			//闭包就是能够读取其他函数内部变量的函数
			//子对象可以找到父对象中的东西,但是父对象找不到子对象的东西 /函数套函数
			
			function x1(){
				var x=10;
				function y1(){
					y=20;
					document.write(x);
				}
				alert(y)

			}
			x1();
			
		</script>
	</head>
	<body>
		
	</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JavaScript第三节DOM</title>
	</head>
	<style>
		
		#lasy{width: 300px;height: 300px;border: 1px solid aquamarine;text-align: center;margin: 10px;}
	</style>
	<body>
		<form action="" method="">
			<input type="text" name="" class="las"/>
			<input type="button" name="" value="按钮" class="las">
		</form>
		<div id="lasy">我的世界</div>
		<script>
			// 获取到id
			var id = document.getElementById("id");
			//获取class
			var classby = document.getElementsByClassName("class")[0];
			//获取到标签
			var Tag =  document.getElementsByTagName("标签");
			//获取元素的节点内容 并修改
			function lasyInner(){
				//获取到要修改的元素节点id
				var lasy = document.getElementById("lasy");
					lasy.innerHTML ='修改后的内容为:你好我是Time';
			}
			//别忘记调用函数否则 不成立!!
			lasyInner();
			
			//获取节点属性值
			var lasx = document.getElementsByClassName("las")[1];
			document.write("Input的value值是:"+lasx.getAttribute("value"));
			// getAttribute() 方法返回指定属性名的属性值
			// setAttribute() 方法添加指定的属性,并为其赋指定的值
			lasx.setAttribute("value","请点击我是按钮")
		</script>
	</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JavaScript第三章轮播图</title>
	</head>
	<style>
		#las-img{width: 500px; height: 300px;margin: 50px auto;overflow: hidden;position: relative;border: 1px solid #7FFFD4;}
		#las-img img{width: 500px; height: 300px;}
		p{color: #000;width: 500px;height: 30px;position: absolute;z-index:999;bottom: 0;left: 0;text-align: center;line-height: 30px;}
		p span{display: inline-block;width: 20px;height: 20px;text-align: center;line-height: 20px;background: rgba(155,55,205,0.5);cursor: pointer;}
		
	</style>
	<body>
		
		<div id="las-img">
			<a href="#"><img src="images/1.jpg" />1</a>
			<a href="#"><img src="images/2.jpg" />2</a>
			<a href="#"><img src="images/3.jpg" />3</a>
			<a href="#"><img src="images/4.jpg" />4</a>
			<a href="#"><img src="images/5.jpg" />5</a>
			<!-- 图片按钮 -->
			<p>
				<span onclick="las(0)">1</span>
				<span onclick="las(1)">2</span>
				<span onclick="las(2)">3</span>
				<span onclick="las(3)">4</span>
				<span onclick="las(4)">5</span>
			</p>
		</div>
		
		<script>
			function las(lasl){
				var id =document.getElementById("las-img");
				var ida = document.getElementsByTagName("a");
				for(var i = 0;i<ida.length;i++){
					ida[i].style.display = "none";
				}
				ida[lasl].style.display="block";
			}
		</script>
	</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JavaScript第三章轮播图</title>
	</head>
	<style>
		#las-img{width: 500px; height: 300px;margin: 50px auto;overflow: hidden;position: relative;border: 1px solid #7FFFD4;}
		#las-img img{width: 500px; height: 300px;}
		p{color: #000;width: 500px;height: 30px;position: absolute;z-index:999;bottom: 0;left: 0;text-align: center;line-height: 30px;}
		p span{display: inline-block;width: 20px;height: 20px;text-align: center;line-height: 20px;background: rgba(155,55,205,0.5);cursor: pointer;}
		
	</style>
	<body>
		
		<div id="las-img">
			<a href="#"><img src="images/1.jpg" />1</a>
			<a href="#"><img src="images/2.jpg" />2</a>
			<a href="#"><img src="images/3.jpg" />3</a>
			<a href="#"><img src="images/4.jpg" />4</a>
			<a href="#"><img src="images/5.jpg" />5</a>
			<!-- 图片按钮 -->
			<p>
				<span onclick="las(0)">1</span>
				<span onclick="las(1)">2</span>
				<span onclick="las(2)">3</span>
				<span onclick="las(3)">4</span>
				<span onclick="las(4)">5</span>
			</p>
		</div>
		
		<script>
			function las(lasl){
				var id =document.getElementById("las-img");
				var ida = document.getElementsByTagName("a");
				for(var i = 0;i<ida.length;i++){
					ida[i].style.display = "none";
				}
				ida[lasl].style.display="block";
			}
		</script>
	</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>tab</title>
	</head>
	<body>
		<!DOCTYPE html>
		<html>
			<head>
				<meta charset="utf-8">
				<title>JavaScript第三章轮播图</title>
			</head>
			<style>
				li{list-style: none;}
				a{text-decoration: none;}
				#las-img{width: 500px; height: 300px;margin: 50px auto;overflow: hidden;position: relative;border: 1px solid #ccc;}
				#las-img li{width: 500px; height: 300px;}
				p{color: #000;width: 500px;height: 30px;position: absolute;z-index:999;top: 20px;left: 0;right:0;margin: 0 auto; center;line-height: 30px;}
				p span{display: inline-block;width: 90px;height: 30px;text-align: center;line-height: 30px;cursor: pointer;border: 1px solid #ccc;}
				
			</style>
			<body>
				<p>
					<span onclick="las(0)">1</span>
					<span onclick="las(1)">2</span>
					<span onclick="las(2)">3</span>
					<span onclick="las(3)">4</span>
					<span onclick="las(4)">5</span>
				</p>
				<div id="las-img">
					<ul>
						<li>文章1</li>
						<li>文章2</li>
						<li>文章3</li>
						<li>文章4</li>
						<li>文章5</li>
					</ul>
					<!-- 图片按钮 -->
					
				</div>
				
				<script>
					function las(lasl){
						var id =document.getElementById("las-img");
						var idli = document.getElementsByTagName("li");
						for(var i = 0;i<idli.length;i++){
							idli[i].style.display = "none";
						}
						idli[lasl].style.display="block";
					}
				</script>
			</body>
		</html>
		
	</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

Correction status:Uncorrected

Teacher's comments:
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post