javascript实现手动点赞效果


Posted in Javascript onApril 09, 2019

做移动开发的时候经常会遇到点赞的一些处理,尤其是当使用字体图标的时候,由于仅希望改变字体,但是字体经过编译之后又和它的.html()不一致,所以导致判断起来比较麻烦,最后想了一个办法来解决此问题。

还有一种点赞是点赞之后后面跟有数字,点击之后颜色变化并且数字+1,当再次点击的时候,颜色改变并且数字-1。

以下是我写的一个小例子来简单实现。

效果图如下:

 javascript实现手动点赞效果

HTML代码:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>点赞</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
 <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<link rel="stylesheet" type="text/css" href="css/style.css" >
<script src="js/Zepto.js"></script>
<script src="js/touch.js"></script>
</head>
<body>
<div class="method1">
 <p>
 <i class="iconfont icon"></i><a class="iconfont" style="display: none;" id="node"></a> 
 </p>
 <p>
 <i class="iconfont icon"></i>
 </p>
 <p>
 <i class="iconfont icon"></i>
 </p>
</div> 
<div class="method2">
 <p>
 <i class="iconfont icon"></i><span>50</span>
 </p>
 <p>
 <i class="iconfont icon"></i><span>60</span>
 </p>
 <p>
 <i class="iconfont icon"></i><span>80</span>
 </p>
</div> 
<script src="js/jss.js"></script>
</body>
</html>

css代码:

@font-face {font-family: 'iconfont';
 src: url('iconfont.eot'); /* IE9*/
 src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
 url('iconfont.woff') format('woff'), /* chrome、firefox */
 url('iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
 url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
}
.iconfont{
 font-family:"iconfont" !important;
 font-size:16px;font-style:normal;
 -webkit-font-smoothing: antialiased;
 -webkit-text-stroke-width: 0.2px;
 -moz-osx-font-smoothing: grayscale;}
*{
 margin: 0;
 padding: 0;
}
.method1 {
 color: green;
}
.method1 p,.method2 p {
 padding-left: 20px;
 margin-top: 10px;
}
.icon {
 cursor: pointer;
 font-size: 30px;
}
.method2 {
 color: #000;
}
.method2 span {
 font-size: 30px;
}

js代码:

var str = $("#node").html();
$(".method1").on("tap","i",function(){
 var html = $(this).html();
 if(html == str){
 $(this).html("");
 }else{
 $(this).html("");
 }
});
$(".method2").on("tap","p",function(){
 var color = $(this).find("i").css("color");
 var number = $(this).find("span").html();
 if(color == "rgb(0, 0, 0)"){
 $(this).find("i").css("color","#f00");
 $(this).find("span").html(number*1+1);
 }else if(color == "rgb(255, 0, 0)"){
 $(this).find("i").css("color","#000");
 $(this).find("span").html(number*1-1);
 }
})

至于字体图标可以去阿里矢量图库进行下载;

如果需要完整的代码可以到此处下载:js实现手动点赞效果

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
在网页中屏蔽快捷键
Sep 06 Javascript
ExtJS 2.0实用简明教程 之ExtJS版的Hello
Apr 29 Javascript
jQuery循环滚动新闻列表示例代码
Jun 17 Javascript
理解javascript回调函数
Dec 28 Javascript
jquery图片切换插件
Mar 16 Javascript
js实现YouKu的漂亮搜索框效果
Aug 19 Javascript
微信小程序之ES6与事项助手的功能实现
Nov 30 Javascript
jQuery仿IOS弹出框插件
Feb 18 Javascript
vue实现新闻展示页的步骤详解
Apr 11 Javascript
Koa从零搭建到Api实现项目的搭建方法
Jul 30 Javascript
javascript实现鼠标点击生成文字特效
Dec 24 Javascript
功能完善的小程序日历组件的实现
Mar 31 Javascript
实例分析Array.from(arr)与[...arr]到底有何不同
Apr 09 #Javascript
浅谈Vue.js组件(二)
Apr 09 #Javascript
4 种滚动吸顶实现方式的比较
Apr 09 #Javascript
vue响应式系统之observe、watcher、dep的源码解析
Apr 09 #Javascript
浅谈发布订阅模式与观察者模式
Apr 09 #Javascript
vue使用keep-alive保持滚动条位置的实现方法
Apr 09 #Javascript
浅谈JavaScript闭包
Apr 09 #Javascript
You might like
深入PHP magic quotes的详解
2013/06/17 PHP
PHP图片上传代码
2013/11/04 PHP
PHP中substr()与explode()函数用法分析
2014/11/24 PHP
php实现根据词频生成tag云的方法
2015/04/17 PHP
php猜单词游戏
2015/09/29 PHP
thinkPHP框架实现类似java过滤器的简单方法示例
2018/09/05 PHP
php高清晰度无损图片压缩功能的实现代码
2018/12/09 PHP
使用PHPUnit进行单元测试并生成代码覆盖率报告的方法
2019/03/08 PHP
Laravel 类和接口注入相关的代码
2019/10/15 PHP
PHP实现笛卡尔积算法的实例讲解
2019/12/22 PHP
解析Jquery的LigerUI如何实现文件上传
2013/07/09 Javascript
通过js获取div的background-image属性
2013/10/15 Javascript
js去空格技巧分别去字符串前后、左右空格
2013/10/21 Javascript
网页防止tab键的使用快速解决方法
2013/11/07 Javascript
IE中鼠标经过option触发mouseout的解决方法
2015/01/29 Javascript
JavaScript判断对象是否为数组
2015/12/22 Javascript
jQuery实现日期联动效果实例
2016/07/26 Javascript
JavaScript简单下拉菜单特效
2016/09/13 Javascript
HTML Table 空白单元格补全的简单实现
2016/10/13 Javascript
简单谈谈Javascript函数中的arguments
2017/02/09 Javascript
javascript实现文字无缝滚动效果
2017/08/26 Javascript
JS数组扁平化、去重、排序操作实例详解
2020/02/24 Javascript
Python操作sqlite3快速、安全插入数据(防注入)的实例
2014/04/26 Python
Python 中开发pattern的string模板(template) 实例详解
2017/04/01 Python
Python实现导出数据生成excel报表的方法示例
2017/07/12 Python
解决pycharm每次打开项目都需要配置解释器和安装库问题
2020/02/26 Python
Django用数据库表反向生成models类知识点详解
2020/03/25 Python
美国从事品牌鞋类零售的连锁店:Famous Footwear
2016/08/25 全球购物
Bergfreunde丹麦:登山装备网上零售商
2017/02/26 全球购物
美国巧克力喷泉品牌:Sephra
2019/05/05 全球购物
攀岩、滑雪、徒步旅行装备:Black Diamond Equipment
2019/08/16 全球购物
工作决心书范文
2014/03/11 职场文书
公证委托书模板
2014/04/03 职场文书
开除通知书范本
2015/04/25 职场文书
校园运动会广播稿
2015/08/19 职场文书
介绍信应该怎么开?
2019/04/03 职场文书