怎么引入(调用)一个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入门教程(8) Location地址对象
Jan 31 Javascript
JavaScript 轻松搞定快捷留言功能 只需一行代码
Apr 01 Javascript
JavaScript获取表单内所有元素值的方法
Apr 02 Javascript
JavaScript中常见的字符串操作函数及用法汇总
May 04 Javascript
详解AngularJS中的表达式使用
Jun 16 Javascript
基于BootStrap Metronic开发框架经验小结【四】Bootstrap图标的提取和利用
May 12 Javascript
AngularJS 自定义指令详解及示例代码
Aug 17 Javascript
bootstrap table操作技巧分享
Feb 15 Javascript
完美实现js选项卡切换效果(一)
Mar 08 Javascript
30分钟快速入门掌握ES6/ES2015的核心内容(上)
Apr 18 Javascript
vue-cli项目无法用本机IP访问的解决方法
Sep 20 Javascript
详解微信小程序获取当前时间及日期的方法
Apr 28 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
最新用php获取谷歌PR值算法,附上php查询PR值代码示例
2011/12/25 PHP
PHP的关于变量和日期处理的一些面试题目整理
2015/08/10 PHP
Laravel自定义 封装便捷返回Json数据格式的引用方法
2019/09/29 PHP
php将字符串转换为数组实例讲解
2020/05/05 PHP
限制文本框输入N个字符的js代码
2010/05/13 Javascript
xml文档转换工具,附图表例子(hta)
2010/11/17 Javascript
JQquery的一些使用心得分享
2012/08/01 Javascript
javascript阻止浏览器后退事件防止误操作清空表单
2013/11/22 Javascript
angular简介和其特点介绍
2015/01/29 Javascript
jQuery中slideUp 和 slideDown 的点击事件
2015/02/26 Javascript
jQuery 中的 DOM 操作
2016/04/26 Javascript
Vue.js计算属性computed与watch(5)
2016/12/09 Javascript
AngularJS使用ng-repeat和ng-if实现数据的删选显示效果示例【适用于表单数据的显示】
2016/12/13 Javascript
利用JavaScript在网页实现八数码启发式A*算法动画效果
2017/04/16 Javascript
简单实现js鼠标跟随效果
2020/08/02 Javascript
vue params、query传参使用详解
2017/09/12 Javascript
H5实现仿flash效果的实现代码
2017/09/29 Javascript
angularjs 动态从后台获取下拉框的值方法
2018/08/13 Javascript
JS中判断字符串存在和非空的方法
2018/09/12 Javascript
详解Vue用cmd创建项目
2019/02/12 Javascript
关于微信小程序获取小程序码并接受buffer流保存为图片的方法
2019/06/07 Javascript
小程序实现录音上传功能
2019/11/22 Javascript
详解如何在vue+element-ui的项目中封装dialog组件
2020/12/11 Vue.js
Python 基础知识之字符串处理
2017/01/06 Python
sublime python3 输入换行不结束的方法
2018/04/19 Python
Django高级编程之自定义Field实现多语言
2019/07/02 Python
Python timer定时器两种常用方法解析
2020/01/20 Python
Python基于内置库pytesseract实现图片验证码识别功能
2020/02/24 Python
Python SMTP配置参数并发送邮件
2020/06/16 Python
Free People中国官网:波西米亚风格女装服饰
2016/08/30 全球购物
介绍一下OSI七层模型
2012/07/03 面试题
科学发展观演讲稿
2014/09/11 职场文书
2014年政协委员工作总结
2014/12/01 职场文书
会计试用期自我评价
2015/03/10 职场文书
Java使用jmeter进行压力测试
2021/07/09 Java/Android
JS前端canvas交互实现拖拽旋转及缩放示例
2022/08/05 Javascript