【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 }