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