当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 小白必备：html、css、js 融会贯通（超简单）

小白必备：html、css、js 融会贯通（超简单）

2020年07月24日  | 移动技术网IT编程  | 我要评论

不会分文件的小朋友点击这里了解一下

我们利用一个在页面点击按钮实现数字加一的简单例子，来帮助了解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

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网