【JavaScript】内部与外部引入方式

1.内部引入方式：

• script的type属性默认为"text/javascript"，可以不写

 <script type="text/javascript">
             function init() {
 //                //案例二：书写轮播图片显示的定时操作(3秒)
 //                window.setInterval("changeImg()", 3000); //window可以省略不写

                 //案例三：1.设置显示广告图片的定时操作
                 //这里不能加var:加var局部变量，不加var全局变量
                 time=setInterval("showAd()", 3000);
             }

             //书写函数
             var i = 0;
             function changeImg() {
                 i++;
                 //获取图片位置并设置src属性值
                 document.getElementById("img1").src = "../img/" + i + ".jpg";
                 if (i == 2) {
                     i = 0;
                 }
             }

             //2.书写显示广告图片的函数
             function showAd(){
                 //3.获取广告图片位置
                 var adEle=document.getElementById("img2");
                 //4.修改元素里面的属性让其显示
                 adEle.style.display="block";
                 //5.清除显示图片的定时操作
                 clearInterval(time);
                 //6.设置隐藏图片的定时操作
                 time=setInterval("hiddenAd()",3000);

             }
             //7.书写隐藏图片的函数
             function hiddenAd(){
                 //8.获取图片位置并设置style属性的display值为none
                 document.getElementById("img2").style.display="none";
                 //9.清除隐藏图片的定时操作
                 clearInterval(time);
             }

         </script>

2.外部引入：

• 创建一个js文件，在里面书写Javascript代码，在html文件中通过script标签的src属性引入该外部js文件

<script type="text/javascript" src="1.js"></script>

1.js文件：

 function init() {
     //                //案例二：书写轮播图片显示的定时操作(3秒)
     //                window.setInterval("changeImg()", 3000); //window可以省略不写

     //案例三：1.设置显示广告图片的定时操作
     //这里不能加var:加var局部变量，不加var全局变量
     time = setInterval("showAd()", 3000);
 }

 //书写函数
 var i = 0;

 function changeImg() {
     i++;
     //获取图片位置并设置src属性值
     document.getElementById("img1").src = "../img/" + i + ".jpg";
     if (i == 2) {
         i = 0;
     }
 }

 //2.书写显示广告图片的函数
 function showAd() {
     //3.获取广告图片位置
     var adEle = document.getElementById("img2");
     //4.修改元素里面的属性让其显示
     adEle.style.display = "block";
     //5.清除显示图片的定时操作
     clearInterval(time);
     //6.设置隐藏图片的定时操作
     time = setInterval("hiddenAd()", 3000);

 }
 //7.书写隐藏图片的函数
 function hiddenAd() {
     //8.获取图片位置并设置style属性的display值为none
     document.getElementById("img2").style.display = "none";
     //9.清除隐藏图片的定时操作
     clearInterval(time);
 }