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

暗夜妖姬 發表於 2019-6-14 11:17:00

1.内部引入方式：
<ul>
<li>
<pre>script的type属性默认为"text/javascript"，可以不写</pre>
</li>
</ul>
<div class="cnblogs_code">
<pre> 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></pre>
</div>
 
2.外部引入：
<ul>
<li> 创建一个js文件，在里面书写Javascript代码，在html文件中通过script标签的src属性引入该外部js文件</li>
</ul>
<div class="cnblogs_code">
<pre><script type="text/javascript" src="1.js"></script></pre>
</div>
 
1.js文件：
<div class="cnblogs_code">
<pre> 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 }</pre>
</div>
  
来源：https://www.cnblogs.com/musecho/p/11022367.html

頁: [1]

琼殿技术论坛's Archiver

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