实例
<!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>运行实例 »
点击 "运行实例" 按钮查看在线实例
