怎么引入(调用)一个JS文件


Posted in Javascript onMay 26, 2016

我们旺旺需要调用别的 js文件。怎么处理?

看随机抽取这个例子。在一个页面中如下:

<html>
<head>
<title>random number</title>
<script type="text/javascript">
//随机抽取人名 </script>
</head>
<body>
<form>
<input type="button" style='font-size:40px' value="Start" onclick="start()">
<input type="button" style='font-size:40px' value="Stop" onclick="stop();">
</form>
<br>    
<font color="blue" style='font-size:150px' id="num"></font>
<br>
</body>
</html>

我们可以把 js 放在另外一个文件里,比如当前文件夹的 a.js 中。

这样 html 页面如下:

<html>
<head>
<title>random number</title>
<script type="text/javascript" src="a.js">
</script>
</head>
<body>
<form>
<input type="button" style='font-size:40px' value="Start" onclick="start()">
<input type="button" style='font-size:40px' value="Stop" onclick="stop();">
</form>
<br>    
<font color="blue" style='font-size:150px' id="num"></font>
<br>
</body>
</html>

a.js

var errorString = "Please input a positive integer.";
var arr = ["A", "B", "C", "D"];
function count() {
max = arr.length; //max, 全局变量
document.getElementById("num").innerHTML = arr[parseInt(max * Math.random())];
}
function start()
{
timeId = setInterval("count();", 100);
}
function stop() {
clearInterval(timeId);
}

这样就行了。

当然,也可以把 a.js放在web上,然后引用成下面这样。

<html>
<head>
<title>random number</title>
<script type="text/javascript" src="http://localhost:8080/test/js/random1.js"></script>
</head>
<body>
<form>
<input type="button" style='font-size:40px' value="Start" onclick="start()">
<input type="button" style='font-size:40px' value="Stop" onclick="stop();">
</form>
<br>    
<font color="blue" style='font-size:150px' id="num"></font>
<br>
</body>
</html>

以上所述是小编给大家介绍的引入(调用)一个JS文件的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持

Javascript 相关文章推荐
解析DHTML,JavaScript,DOM,BOM以及WEB标准的描述
Jun 19 Javascript
jQuery删除一个元素后淡出效果展示删除过程的方法
Mar 18 Javascript
JS+CSS简单树形菜单实现方法
Sep 12 Javascript
简单实现jQuery进度条轮播实例代码
Jun 20 Javascript
【经验总结】编写JavaScript代码时应遵循的14条规律
Jun 20 Javascript
9个让JavaScript调试更简单的Console命令
Nov 14 Javascript
vue2.0开发实践总结之疑难篇
Dec 07 Javascript
angular2路由切换改变页面title的示例代码
Aug 23 Javascript
vue中倒计时组件的实例代码
Jul 06 Javascript
简单了解Ajax表单序列化的实现方法
Jun 14 Javascript
JS面向对象编程基础篇(二) 封装操作实例详解
Mar 03 Javascript
探索浏览器页面关闭window.close()的使用详解
Aug 21 Javascript
JS加载器如何动态加载外部js文件
May 26 #Javascript
jquery获取复选框的值的简单实例
May 26 #Javascript
改变checkbox默认选中状态及取值的实现代码
May 26 #Javascript
JavaScript数组实现数据结构中的队列与堆栈
May 26 #Javascript
jquery获取复选框checkbox的值的简单实现方法
May 26 #Javascript
jquery判断checkbox是否选中及改变checkbox状态的实现方法
May 26 #Javascript
jquery获取所有选中的checkbox实现代码
May 26 #Javascript
You might like
基于session_unset与session_destroy的区别详解
2013/06/03 PHP
php array_reverse 以相反的顺序返回数组实例代码
2017/04/11 PHP
thinkphp查询,3.X 5.0方法(亲试可行)
2017/06/17 PHP
jquery pagination插件实现无刷新分页代码
2009/10/13 Javascript
jquery中实现标签切换效果的代码
2011/03/01 Javascript
关于捕获用户何时点击window.onbeforeunload的取消事件
2011/03/06 Javascript
js闭包实现按秒计数
2015/04/23 Javascript
使用jQuery+EasyUI实现CheckBoxTree的级联选中特效
2015/12/06 Javascript
Backbone.js框架中简单的View视图编写学习笔记
2016/02/14 Javascript
使用JavaScript实现弹出层效果的简单实例
2016/05/31 Javascript
Bootstrap 响应式实用工具实例详解
2017/03/29 Javascript
vue2.0 和 animate.css的结合使用
2017/12/12 Javascript
vue中的使用token的方法示例
2020/03/10 Javascript
vue+springboot+element+vue-resource实现文件上传教程
2020/10/21 Javascript
[08:53]DOTA2每周TOP10 精彩击杀集锦vol.9
2014/06/26 DOTA
[01:23]2014DOTA2国际邀请赛 球迷无处不在Ti现场世界杯受关注
2014/07/10 DOTA
[32:56]完美世界DOTA2联赛PWL S3 Rebirth vs CPG 第二场 12.11
2020/12/16 DOTA
Python实现基于权重的随机数2种方法
2015/04/28 Python
Python NumPy库安装使用笔记
2015/05/18 Python
详解Python发送email的三种方式
2018/10/18 Python
使用pycharm设置控制台不换行的操作方法
2019/01/19 Python
python xlwt如何设置单元格的自定义背景颜色
2019/09/03 Python
python Pillow图像处理方法汇总
2019/10/16 Python
python如果快速判断数字奇数偶数
2019/11/13 Python
基于python实现把图片转换成素描
2019/11/13 Python
python GUI库图形界面开发之PyQt5信号与槽基本操作
2020/02/25 Python
详解Pandas 处理缺失值指令大全
2020/07/30 Python
html5小技巧之通过document.head获取head元素
2014/06/04 HTML / CSS
Foot Locker加拿大官网:美国知名运动产品零售商
2019/07/21 全球购物
父亲追悼会答谢词
2014/01/17 职场文书
迟到检讨书500字
2014/02/05 职场文书
刘胡兰的英雄事迹材料
2014/02/11 职场文书
食品工程专业求职信
2014/06/15 职场文书
地理科学专业自荐信
2014/09/01 职场文书
党支部审查意见
2015/06/02 职场文书
python图像处理基本操作总结(PIL库、Matplotlib及Numpy)
2021/06/08 Python