<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 选择器实际上就是将css样式封装在一个选择器中
哪个标签要使用,就可以直接调用,生成
*/
.style1 {
display: block;
100px;
height: 100px;
background: skyblue;
border: 1px solid #000;
}
</style>
</head>
<body>
<!-- 选择器实际上就是将 需要的css样式 封装在 一个选择器中
哪个标签需要加载,哪个标签就调用这个选择器,就等于调用加载选择器中的css样式
不用重复的定义css样式语句,定义一次就可以反复使用
达到我们优化代码,提高效率的功能
-->
<div class="style1">div标签</div>
<a href="JavaScript:;" class="style1">超链接</a>
<p class="style1">p标签</p>
<script src="./tools.js"></script>
<script>
// 什么是函数
// 函数就是我们实现功能的代码模块
// 作用:
// 方便我们反复调用,执行程序,实现效果
// 可以类比,我们之前学过的 css 选择器
// 选择器,是定义一次需要的样式,可以反复调用使用
// 函数, 定义一次需要的程序,可以反复的调用使用
// 提高程序的重复使用率,提高代码的简介度,提高执行效率
// 来一个简单的小例子
// 在页面中多次生成金字塔
// 如果是定义程序,就要多次反复的定义程序
// 如果是使用函数的方式,只要定一次反复调用即可
// 与css选择器是相同的,内部样式,只能一个文件中反复调用
// 外部css文件中的样式,可以被多个HTML文件调用使用
// 写在外部js文件中的程序,也可以被多个HTML文件加载调用使用
// 在这个函数中,就封装了生成5行金字塔的程序
function fun() {
for (var i = 1; i <= 5; i++) {
for (var j = 1; j <= 5 - i; j++) {
document.write(' ');
}
for (var k = 1; k <= i; k++) {
document.write('* ');
}
document.write('<br>');
}
}
fun();
fun();
fun();
fun();
fun();
// 外部js文件中的函数
setNine();
</script>
</body>
</html>
和html文件同级新建一个tools.js的文件写上
// 定义一个生成99乘法表的函数
function setNine(){
for(var i = 1 ; i <= 9 ; i++){
for(var j = 1 ; j <= i ; j++){
document.write( `${j} * ${i} = ${j*i} ` );
}
document.write('<br>');
}
}
// 实际项目中,函数一般都是独立写在一个外部js文件中,便于不同的HTML文件加载使用
// js外部文件,通过 script 标签的 src 属性来加载外部js文件
// 一定是先加载外部js文件,再来调用外部js文件中的程序或者函数
// 任何html文件,加载这个外部js文件,都可以调用执行其中的程序和函数
// 调用外部js文件中的函数
setNine();