HTML中使用js代码的三种方式

最新推荐文章于 2024-10-09 09:57:09 发布

靜忄

最新推荐文章于 2024-10-09 09:57:09 发布

阅读量2.1k

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/qq_51971512/article/details/121743756

版权

JavaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

这篇博客介绍了在HTML中如何使用JavaScript的三种方法：1) 通过内联方式直接在HTML标签中写JS代码；2) 引入外部JS文件；3) 在HTML底部使用<script>标签插入JS代码。示例代码展示了如何使用这些方法来动态更新页面内容，如显示当前日期和时间。

摘要由CSDN通过智能技术生成

HTML中使用js代码的三中方式

1：html代码

2：js文件的引入方式.js 相关代码

HTML中使用js代码的三中方式

1：html代码

<!DOCTYPE html>
<html>
<head>
	<title>js基础学习</title>
	<!-- 导入外部js文件 -->
	<script src="js文件的引入方式.js"></script>
</head>
<body>
	<!-- 点击这个按钮调用外部js函数func1改变时间 -->
	<button type='button' onclick="func1()">点击显示时间</button> 
	<p id='1'></p>

	<!-- 标签中的js代码 -->
	<button onclick="document.getElementById('2').innerHTML = Date()">
		点击显示日期和时间
	</button>
	<p id='2'></p>

	<!-- js标签中的js代码 -->
	<!-- js代码设置在后面 -->
	<p id='3'>我会显示时间</p>
	<script>
		document.getElementById('3').innerHTML = Date()
	</script>


</body>
</html>

2：js文件的引入方式.js 相关代码

function func1(){ // js写函数的方法
	// getElementById('demo') 找id
	// innerHTML 设置文本内容
	// Date() 获取时间的函数
	document.getElementById('1').innerHTML = Date()
}