前端基础教程:简单的实现html+css+javascript点赞效果

橙叶创作社区

已于 2022-10-03 13:28:21 修改

阅读量2.8k

点赞数 5

分类专栏：前端基础教程文章标签： javascript html css 经验分享其他

于 2022-10-03 13:05:05 首次发布

本文链接：https://blog.csdn.net/weixin_63545689/article/details/126576120

版权

前端基础教程专栏收录该内容

3 篇文章 0 订阅

订阅专栏

程序的主要目的：在网页中实现点赞效果，一共六个步骤！

步骤一：在D盘右键新建一个文件夹，将其命名为"Web"

文件夹

步骤二：然后在这个Web文件夹中右键，选择“新建”，“文本文档”，创建三个文本文档文件（文件扩展名为txt的文件）

文本文档文件

步骤三：选中html.txt,右键“打开方式”，选择"记事本"打开，将下面的html代码复制到里面保存

html代码：

<!DOCTYPE html>
<html>
    <head>
        <title>第一个网页</title>
        <meta charset="UTF-8">
        <link href="./css.css" rel="stylesheet" type="text/css"  >
       <script src="./JavaScript.js"></script>
    </head>
 
    <body>
       <h1>这是标题</h1>
       <p class="content">这是文章内容</p>   
       <button id="like" onclick="like()">点赞</button><p id="tag">0<p>
    </body>
</html>

步骤四：选中css.txt,右键“打开方式”，选择"记事本"打开，将下面的css代码复制到里面保存

css代码：

h1{
	text-align:center;
}

.content{
	color:red;
}

#tag{
	display:inline-block;
}

步骤五：选中JavaScript.txt,右键“打开方式”，选择"记事本"打开，将下面的JavaScript代码复制到里面保存

javascript代码：

var love = 0;
function like() {   
    love++;
    document.getElementById('tag').innerHTML = love;   
}

步骤六：修改文件扩展名

注意:这里是修改文件扩展名，而不是文件名

可以通过文件后面的类型，查看文件的类型（也就是文件扩展名）

也可以在上方的查看中勾选文件扩展名

将html.txt的文件扩展名改为html

将css.txt的文件扩展名改为css

将JacaScript.txt的文件扩展名改为js

然后双击html.html文件，就可以打开该网页了

Web

由于添加了JavaScript代码，所以“点赞”按钮是可以触发onclick()，从而实现数字的改变（点赞效果）