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