怎么引入(调用)一个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 相关文章推荐
javascript getElementsByName()的用法说明
Jul 31 Javascript
百度留言本js 大家可以参考下
Oct 13 Javascript
深入理解JavaScript作用域和作用域链
Oct 21 Javascript
AngularJS 入门教程之HTML DOM实例详解
Jul 28 Javascript
前端构建工具之gulp的语法教程
Jun 12 Javascript
jquery对table做排序操作的实例演示
Aug 10 jQuery
js数字滑动时钟的简单实现(示例讲解)
Aug 14 Javascript
基于webpack 实用配置方法总结
Sep 28 Javascript
vue-cli脚手架-bulid下的配置文件
Mar 27 Javascript
vue中如何实现后台管理系统的权限控制的方法示例
Sep 19 Javascript
vue使用websocket的方法实例分析
Jun 22 Javascript
Vuex中实现数据状态查询与更改
Nov 08 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
3
2006/10/09 PHP
php读取csv实现csv文件下载功能
2013/12/18 PHP
php读取目录及子目录下所有文件名的方法
2014/10/20 PHP
详解PHP导入导出CSV文件
2014/11/03 PHP
php+jQuery.uploadify实现文件上传教程
2014/12/26 PHP
PHPStorm+XDebug进行调试图文教程
2016/06/13 PHP
微信支付的开发流程详解
2016/09/13 PHP
php修改数组键名的方法示例
2017/04/15 PHP
Laravel学习教程之model validation的使用示例
2017/10/23 PHP
如何让您的中波更粗更长 - 中波框形天线制作
2021/03/10 无线电
js技巧--转义符&quot;\&quot;的妙用
2007/01/09 Javascript
javascript 极速 隐藏/显示万行表格列只需 60毫秒
2009/03/28 Javascript
深入认识javascript中的eval函数
2009/11/02 Javascript
基于JQuery框架的AJAX实例代码
2009/11/03 Javascript
基于Jquery的$.cookie()实现跨越页面tabs导航实现代码
2011/03/03 Javascript
jquery获取URL中参数解决中文乱码问题的两种方法
2013/12/18 Javascript
javascript常用函数归纳整理
2014/10/31 Javascript
javascript设置文本框光标的方法实例小结
2016/11/04 Javascript
微信公众号开发 实现点击返回按钮就返回到聊天界面
2016/12/15 Javascript
vue watch监听对象及对应值的变化详解
2018/02/24 Javascript
angular4 共享服务在多个组件中数据通信的示例
2018/03/30 Javascript
JavaScript中call和apply方法的区别实例分析
2018/08/03 Javascript
解决vue-cli脚手架打包后vendor文件过大的问题
2018/09/27 Javascript
[04:01]2014DOTA2国际邀请赛 TITAN告别Ohaiyo期望明年再战
2014/07/15 DOTA
python 切片和range()用法说明
2013/03/24 Python
python操作数据库之sqlite3打开数据库、删除、修改示例
2014/03/13 Python
Python3利用Dlib19.7实现摄像头人脸识别的方法
2018/05/11 Python
python脚本实现验证码识别
2018/06/07 Python
两个元祖T1=('a', 'b'),T2=('c', 'd')使用匿名函数将其转变成[{'a': 'c'},{'b': 'd'}]的几种方法
2019/03/05 Python
Python爬虫:将headers请求头字符串转为字典的方法
2019/08/21 Python
Python3的socket使用方法详解
2020/02/18 Python
python3安装OCR识别库tesserocr过程图解
2020/04/02 Python
python 爬虫爬取京东ps4售卖情况
2020/12/18 Python
群众路线党课主持词
2014/04/01 职场文书
优秀本科毕业生自荐信
2014/07/04 职场文书
导游词之青岛太清宫
2019/12/13 职场文书