Correction status:Uncorrected
Teacher's comments:
<!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>
点击 "运行实例" 按钮查看在线实例