【JavaScript】内部与外部引入方式
2024-10-16 04:01:35
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);
}
最新文章
- jenkins结合ansible用shell实现自动化部署和回滚
- vista/win7/win8区别
- JAVA中在Myeclipse里把表导入成相应的poco实体类
- POJ 2140
- 【转】不可变数组NSArray与可变数组NSMutableArray
- php必看六本书
- SSIS 学习(9):包部署常见问题汇总【转】
- 由zImage生成uImage
- PHP上传文件(学习)
- centos7.4下的KVM虚拟机安装使用
- 剑指offer:2.二维数组的查找(Java版)
- 20165231 2017-2018-2 《Java程序设计》第5周学习总结
- Vue通过id跳转到商品详情页
- URL重写中的中文参数问题
- 列表控件QListWidget
- spark.yarn.jar和spark.yarn.archive的使用
- Linux基础命令---文本过滤coi
- 解决ie9以下浏览器对html5新增标签的不识别,并导致CSS不起作用的问题
- 遍历FTP目录及下载
- mysql查询大于X分钟数
热门文章
- 【2019.7.16 NOIP模拟赛 T1】洗牌(shuffle)(找环)
- [LeetCode] 882. Reachable Nodes In Subdivided Graph 细分图中的可到达结点
- [LeetCode] 287. Find the Duplicate Number 寻找重复数
- 第02组 Alpha冲刺(5/6)
- Vue.js+vue-element
- vue学习面向对象,在项目中怎么用呢?
- Unity调用windows系统dialog 选择文件夹
- POJ 1061 青蛙的约会 题解
- 集合类源码(六)Map(HashMap, Hashtable, LinkedHashMap, WeakHashMap)
- C# 1.0 新特性之异步委托(AP、APM)