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 相关文章推荐
JavaScript入门教程(2) JS基础知识
Jan 31 Javascript
上传的js验证(图片/文件的扩展名)
Apr 25 Javascript
jquery中常用的SET和GET$(”#msg”).html循环介绍
Oct 09 Javascript
jQuery内置的AJAX功能和JSON的使用实例
Jul 27 Javascript
JS日期格式化之javascript Date format
Oct 01 Javascript
详解vue中router-link标签所必备了解的属性
Apr 15 Javascript
微信接入之获取用户头像的方法步骤
Sep 23 Javascript
Vue 技巧之控制父类的 slot
Feb 24 Javascript
vue跳转页面的几种方法(推荐)
Mar 26 Javascript
jQuery 淡入/淡出效果函数用法分析
May 19 jQuery
详解javascript void(0)
Jul 13 Javascript
vue实现一个获取按键展示快捷键效果的Input组件
Jan 13 Vue.js
实例分析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
索尼ICF-SW100收音机评测
2021/03/02 无线电
Discuz板块横排显示图片的实现方法
2007/05/28 PHP
PHP数学运算函数大汇总(经典值得收藏)
2016/04/01 PHP
php基于PDO实现功能强大的MYSQL封装类实例
2017/02/27 PHP
ASP.NET jQuery 实例17 通过使用jQuery validation插件校验ListBox
2012/02/03 Javascript
js模拟select下拉菜单控件的代码
2013/05/08 Javascript
跟我学习javascript的基本类型和引用类型
2015/11/16 Javascript
Javascript中神奇的this
2016/01/20 Javascript
Google 地图类型详解及示例代码
2016/08/06 Javascript
简单理解js的冒泡排序
2016/12/19 Javascript
移动端基础事件总结与应用
2017/01/12 Javascript
jQuery Masonry瀑布流插件使用方法详解
2017/01/18 Javascript
JS实现本地存储信息的方法(基于localStorage与userData)
2017/02/18 Javascript
vue中实现移动端的scroll滚动方法
2018/03/03 Javascript
对Angular中单向数据流的深入理解
2018/03/31 Javascript
原生JS+HTML5实现跟随鼠标一起流动的粒子动画效果
2018/05/03 Javascript
解决Vue.js应用回退或刷新界面时提示用户保存修改问题
2019/11/24 Javascript
python 算法 排序实现快速排序
2012/06/05 Python
python实现2014火车票查询代码分享
2014/01/10 Python
在Python中调用ggplot的三种方法
2015/04/08 Python
在Django的URLconf中使用命名组的方法
2015/07/18 Python
Python中数组,列表:冒号的灵活用法介绍(np数组,列表倒序)
2018/04/18 Python
python使用插值法画出平滑曲线
2018/12/15 Python
Pandas之ReIndex重新索引的实现
2019/06/25 Python
python 非线性规划方式(scipy.optimize.minimize)
2020/02/11 Python
Numpy一维线性插值函数的用法
2020/04/22 Python
tensorflow实现将ckpt转pb文件的方法
2020/04/22 Python
Python批量删除mysql中千万级大量数据的脚本分享
2020/12/03 Python
找工作最新求职信
2013/12/22 职场文书
咖啡馆创业计划书
2014/01/26 职场文书
毕业寄语大全
2014/04/09 职场文书
2014年国庆节演讲稿
2014/09/02 职场文书
大学生自我推荐信范文
2015/03/24 职场文书
Python可视化学习之matplotlib内置单颜色
2022/02/24 Python
Python实现灰色关联分析与结果可视化的详细代码
2022/03/25 Python
Redis中key的过期删除策略和内存淘汰机制
2022/04/12 Redis