html+js实现点赞
2024-06-22 15:02:04
html+js实现点赞
2版 2021-10-07
实现：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<!--评论1-->
<!--content n.所容纳之物; 所含之物; 内容; (书的)目录-->
<div class="content_2_box1"><div class="content_2_box1_1"><img src="data:images/001.jpeg" height="200" width="200"><font class="content_2_box1_1_font">网络用户</font><span id="tixing0" style="font-size:30px;color:red;position:relative;left:200px;top:-40px;"></span><div class="dianzan_11"><div class="dianzan_font"><center><span id="cishu0">18</span></center></div><button class="btn" id="0" onclick=""></button></div></div><div class="content_2_box1_2"><font>阿斯达四大撒大所，爱仕达撒所大所所大所，阿斯达萨达萨达！阿斯达四大撒大所奥术大师大所！啊啊撒大所大所</font></div>
</div><!--评论2-->
<div class="content_2_box1"><div class="content_2_box1_1"><img src="data:images/001.jpeg" height="200" width="200"><font class="content_2_box1_1_font">网络用户</font><span id="tixing1" style="font-size:30px;color:red;position:relative;left:200px;top:-40px;"></span><div class="dianzan_11"><div class="dianzan_font"><center><span id="cishu1"></span></center></div><button class="btn" id="1" onclick=""></button></div></div><div class="content_2_box1_2"><font>阿斯达四大撒大所，爱仕达撒所大所所大所，阿斯达萨达萨达！阿斯达四大撒大所奥术大师大所！啊啊撒大所大所</font></div>
</div></body>
<script>var i=2;//评论条数var Atixing=new Array(); //存储提示字的id名var Acishu=new Array(); //存储次数的id名var count=new Array();//限制每次按钮只可以单击一次window.onload = function(){//页面加载出来后实现下列方法bianliButtonCount();//获取所有按钮idbutton1();//根据button 不同id进入不同标签chushizhi();//将数据初始化}function bianliButtonCount(){for(var j = 0;j<i;j++){Atixing[j] = String("tixing"+j);Acishu[j] = String("cishu"+j);//alert(Atixing[j]);}}function chushizhi(){for(var m = 0;m<i;m++){document.getElementById(Atixing[m]).innerHTML="";document.getElementById(Acishu[m]).innerHTML="13";}}function button1(){var arr = document.getElementsByTagName('button');for(var i = 0;i<arr.length;i++){arr[i].onclick = function(){var btn = document.getElementById(this.id);btn.style.background="red";change(this.id);//根据button id，通过这个函数改变次数、提示字}}}function change(id){if(count[id]!=1){document.getElementById(Acishu[id]).innerHTML="14";count[id]=1;}else{document.getElementById(Atixing[id]).innerHTML="亲，您的赞太多了~";setTimeout(function(){document.getElementById(Atixing[id]).innerHTML="";},3000);//提示字三秒消失}}
</script></html>
结果：
总结：实现前端，未给后端传入数据
1版 2021-10-06
实现：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<!--评论1-->
<!--content n.所容纳之物; 所含之物; 内容; (书的)目录-->
<div class="content1"><!--class 就像java类的修饰一样 一个名字而已--><div class="content1box1" ><img src="data:images/001.jpeg" ><br><font class="content1box1font">网络用户</font><br><br><br><br><!--position n.位置; 地方; 恰当位置; 正确位置; (坐、立的)姿态，姿势; 放置方式 --><!--relative n.相对--><!--提醒问题--><!--可以这里定义数据 也可以document设定数据--><span id="tixing1" style="font-size:30px;color:red;position:relative;left:0px;top:40px;"></span><div class="dianzan1"><div class="dianzan1font"><center><span id="cishu1"></span></center></div><button class="btn" id="1" onclick=""></button></div></div><div class="content1box2"><font>阿斯达四大撒大所，爱仕达撒所大所所大所，阿斯达萨达萨达！阿斯达四大撒大所奥术大师大所！啊啊撒大所大所</font></div></div><!--评论2-->
<div class="content2"><div class="content2box1"><img src="data:images/001.jpeg" ><font class="content2box1font">网络用户</font><br><br><br><br><!--span 跨度--><span id="tixing2" style="font-size:60px;color:red;position: relative;left:120px;top:40px;"></span><br><br><br><br><div class="dianzan2"><div class="dianzan2font"><center><span id="cishu2"></span></center></div><button class="btn" id="2" onclick=""></button></div></div><div class="content2box2"><font>阿斯达四大撒大所，爱仕达撒所大所所大所，阿斯达萨达萨达！阿斯达四大撒大所奥术大师大所！啊啊撒大所大所</font></div>
</div>
</body>
<script>//初始化变量/属性var i=2;//评论条数var Atixing=new Array(); //存储提醒字的id名var Acishu=new Array(); //存储次数的id名var count=new Array();//限制每次按钮只可以单击一次//定义函数/方法 相当于java接口window.onload = function(){//页面加载出来后实现下列方法tixingAndCishu();//获取tixingAndCishu idchushizhi();//将数据初始化button();//根据button 不同id进入不同标签}//实现函数function tixingAndCishu(){for(var j = 1;j<=i;j++){Atixing[j] = String("tixing"+j);Acishu[j] = String("cishu"+j);//alert(Atixing[j]);}//出来的结果 Atixing[1] =tixing1 Acishu[1] = cishu1 Atixing[2] =tixing2 Acishu[2] = cishu2}count[0]=0;count[1]=1;count[2]=2;//实现函数function chushizhi(){for(var m =1;m<=i;m++){document.getElementById(Atixing[m]).innerHTML="null"; //Atixing[1]=tixing1 and Atixing[2]=tixing2 获取标签对象 设置 值为adaddocument.getElementById(Acishu[m]).innerHTML="13"; //Atixing[1]=tixing1 and Atixing[2]=tixing2 获取标签对象 设置 值为adad}}//实现函数function button(){var arr = document.getElementsByTagName('button');//拿到button标签对象 2个对象 集合 arr.length=2for(var i = 1;i<=arr.length;i++){//一个对象触发onclick点击事件arr[i].onclick = function(){//根据id 获取button标签对象var btn = document.getElementById(this.id);btn.style.background="red";//arr[i].style.background="red";change(this.id);//根据button id，通过这个函数改变次数、提醒字//第一遍 的时候 count[1] =1 走if//第二遍 的时候 count[2] =2 != 1 走else}}}//实现函数function change(id){if(count[id] = 1){document.getElementById(Atixing[id]).innerHTML="点赞了";document.getElementById(Acishu[id]).innerHTML="14";}else{document.getElementById(Atixing[id]).innerHTML="亲，您的赞太多了~";document.getElementById(Acishu[id]).innerHTML="14";setTimeout(function(){document.getElementById(Atixing[id]).innerHTML="";},3000);//提示字三秒消失}}</script></html>
结果：
总结：
未到自己的要求
html+js实现点赞相关推荐
- vue 3 + mo.js 实现点赞粒子特效【实战】
ue 3.2 + js 实现点赞粒子特效 创建一个项目 一.显示页面 1.新建页面 2.写部分显示代码 3.导入文件 4.将其他的注释掉 二.下载点赞图片 1.打开阿里云矢量库 2.复制SVG代码 3 ...
- js实现点赞、取消点赞思路（前端技术适用）
js实现点赞.取消点赞思路 忽然冒出来的想法,记录一下 js操作good值逻辑 取good值-1的绝对值 忽然冒出来的想法,记录一下 页面.数据库通过1和0标记已点赞和未点赞,假设这个标识为good. ...
- phpcms 点赞_php+js实现点赞功能的示例详解
最近在做一个视频网站,需要实现视频的点赞功能,我是结合ajax和数据库实现的,数据库的格式为有四个字段:文章id,赞,踩,ip.因为需要一个ip只能点赞一次,所以需要一个ip字段存储点赞的ip,这样便 ...
- 简单点赞效果html,js实现点赞效果
javascript实现点赞或踩加一,再点一次减一的效果 好多新手在网上找不到点赞效果的代码,今天给大家分享一个采用js写的简单方法(有点错误,已修正) 效果图如下 HTML代码 可直接ctrl + ...
- html实现点赞效果,js实现点赞效果
javascript实现点赞或踩加一,再点一次减一的效果 好多新手在网上找不到点赞效果的代码,今天给大家分享一个采用js写的简单方法(有点错误,已修正) 效果图如下 HTML代码 可直接ctrl + ...
- 基于auto.js微信点赞
前言: 在学习auto.js的过程中,根据教程写了一个非常简单的微信自动点赞脚本. CODE: pinglun = desc("评论").findOne(); log(pinglu ...
- JS实现点赞变亮与取消点赞变灰样式
html代码: <div :class="box change ? 'box-one' : 'box-two'" @click="toggleClick" ...
- Node.js框架对比：Express/Koa/Hapi
Node.js框架对比:Express/Koa/Hapi 引言 Express.js是当今使用最广泛的Node.js Web应用程序框架.它似乎是大多数Node.js Web应用程序中的基本依赖项,即 ...
- tornado web高级开发项目之抽屉官网的页面登陆验证、form验证、点赞、评论、文章分页处理、发送邮箱验证码、登陆验证码、注册、发布文章、上传图片...
本博文将一步步带领你实现抽屉官网的各种功能:包括登陆.注册.发送邮箱验证码.登陆验证码.页面登陆验证.发布文章.上传图片.form验证.点赞.评论.文章分页处理以及基于tornado的后端和ajax的 ...
最新文章
- C++数值极限numeric_limits
- 【 C 】初识函数指针
- pywebio 和 pyecharts天生一对
- crossvalind函数 （交叉验证函数）
- 删除表的sql命令是什么_【技术干货】30个最适合初学者的SQL查询
- 【转】Java开发必须要知道的知识体系
- qt 苹果应用程序_什么是苹果的电视应用程序，您应该使用它吗？
- python运行命令_Python中执行外部命令
- SH760模态分析-多种解析与数字计算方法
- 简明 Vim 练级攻略 | 酷壳 - CoolShell.cn
- Android Studio 设置主题及字体
- SharePoint 2007部署过程详细图解（上）— 前期环境搭建
- Ubuntu源码安装gcc-10
- win7专业版激活方案
- Centos7查看硬盘容量
- [1]技术浅谈——小刘对渗透攻击的一些见解
- RemoveWGA升级了
- 日系插画学习笔记（七）：日系角色脸部画法-3表情
- java 遍历二叉树_java实现二叉树遍历的三种方式
- PS | 工作区，工具栏不见了怎么办 -- 复位基本功能