【JavaScript】内部与外部引入方式
1.内部引入方式：
-
script的type属性默认为"text/javascript"，可以不写
1 <script type="text/javascript"> 2 function init() { 3 // //案例二：书写轮播图片显示的定时操作(3秒) 4 // window.setInterval("changeImg()", 3000); //window可以省略不写 5 6 //案例三：1.设置显示广告图片的定时操作 7 //这里不能加var:加var局部变量，不加var全局变量 8 time=setInterval("showAd()", 3000); 9 } 10 11 //书写函数 12 var i = 0; 13 function changeImg() { 14 i++; 15 //获取图片位置并设置src属性值 16 document.getElementById("img1").src = "../img/" + i + ".jpg"; 17 if (i == 2) { 18 i = 0; 19 } 20 } 21 22 //2.书写显示广告图片的函数 23 function showAd(){ 24 //3.获取广告图片位置 25 var adEle=document.getElementById("img2"); 26 //4.修改元素里面的属性让其显示 27 adEle.style.display="block"; 28 //5.清除显示图片的定时操作 29 clearInterval(time); 30 //6.设置隐藏图片的定时操作 31 time=setInterval("hiddenAd()",3000); 32 33 } 34 //7.书写隐藏图片的函数 35 function hiddenAd(){ 36 //8.获取图片位置并设置style属性的display值为none 37 document.getElementById("img2").style.display="none"; 38 //9.清除隐藏图片的定时操作 39 clearInterval(time); 40 } 41 42 </script>
2.外部引入：
- 创建一个js文件，在里面书写Javascript代码，在html文件中通过script标签的src属性引入该外部js文件
<script type="text/javascript" src="1.js"></script>
1.js文件：
1 function init() { 2 // //案例二：书写轮播图片显示的定时操作(3秒) 3 // window.setInterval("changeImg()", 3000); //window可以省略不写 4 5 //案例三：1.设置显示广告图片的定时操作 6 //这里不能加var:加var局部变量，不加var全局变量 7 time = setInterval("showAd()", 3000); 8 } 9 10 //书写函数 11 var i = 0; 12 13 function changeImg() { 14 i++; 15 //获取图片位置并设置src属性值 16 document.getElementById("img1").src = "../img/" + i + ".jpg"; 17 if (i == 2) { 18 i = 0; 19 } 20 } 21 22 //2.书写显示广告图片的函数 23 function showAd() { 24 //3.获取广告图片位置 25 var adEle = document.getElementById("img2"); 26 //4.修改元素里面的属性让其显示 27 adEle.style.display = "block"; 28 //5.清除显示图片的定时操作 29 clearInterval(time); 30 //6.设置隐藏图片的定时操作 31 time = setInterval("hiddenAd()", 3000); 32 33 } 34 //7.书写隐藏图片的函数 35 function hiddenAd() { 36 //8.获取图片位置并设置style属性的display值为none 37 document.getElementById("img2").style.display = "none"; 38 //9.清除隐藏图片的定时操作 39 clearInterval(time); 40 }
