小白必备：html、css、js 融会贯通（超简单）
程序员文章站
2022-06-22 11:48:20
不会分文件的小朋友点击这里了解一下在...
我们利用一个在页面点击按钮实现数字加一的简单例子，来帮助了解html、css、js 三者的关系。
创建
在 src 文件夹中新建 .js 文件，例如：
最上面的链接中说明了调用 css 文件的方法，即在 html 文件的 head 标签中使用 link
<link rel="stylesheet" href="./css/style.css">
<!-- href 中写 css 所在的地址 -->
而通常我们的脚本文件并不在 head 标签中调用，因为加载脚本需要时间，如果脚本过多过大，页面将会加载非常慢，影响用户体验。所以习惯将脚本文件在 body 标签最后面进行引用，使用 script
<script src="./src/click.js"></script>
<!-- src 中写 js 所在的地址 -->
如果一定要在 head 标签中调用，可以使用如下方法改善用户体验：
- 延迟脚本：
defer
脚本会延迟到整个页面都解析完毕后再运行； - 异步脚本：
async
异步加载页面其他内容，不保证脚本执行顺序；
实例
html 文件
设置要用到的容器，文字等基础：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>简单网页</title>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<div class="title">
点我加一
</div>
<div class="add">
<p>
0
</p>
<button id="bb">点我</button>
</div>
<script src="./src/click.js"></script>
</body>
</html>
css文件
使用 css 文件对 html 文件中的容器进行进一步设置，使其更加美观多样。
body {
margin: 0; /* 设置边距为零 */
}
.add {
text-align: center;
font-size: 24px;
margin-top: 20px;
color:red ;
}
.title {
text-align: center;
font-size: 24px;
margin-top: 20px;
color:red ;
}
button {
color: dodgerblue;
background-color: indigo;
}
button:hover { /* 鼠标移动到上面的效果 */
background-color: mediumpurple;
}
button:active { /*点击样式变化*/
background-color:tomato ;
}
到现在实现的效果如下：
但是现在点击按钮不会有任何的变化，我们需要在 js 文件中输入命令。
js 文件
let num = 0;
function changeText(element,number) { // 转化为字符串
element.innerHTML = number + '';
}
//const btn = document.getElementById('bb');
const btn = document.querySelector('#bb'); // 获取 html 文件中，为 bb 的 id 选择器，赋予 btn
const ppp = document.querySelector('p'); // 获取 p 标签，赋予 ppp
changeText(ppp,0)
//console.log(ppp);
//按钮事件
btn.onclick = function() {
num++;
changeText(ppp,num);
}
这样，点击按钮才可以实现加一。效果如下：
例子很简单，主要是说明一下 html、css、js 三者之间的配合。
本文地址：https://blog.csdn.net/Web_blingbling/article/details/107533895
上一篇： 用 PHP 函数变量数组改变代码结构
下一篇： js实现点击上传图片并设为模糊背景